⚡ 30 秒速记
- 核心判断：页面从 HTML/CSS 解析到布局、绘制和合成是一条流水线，变更命中哪一层决定更新成本
- 原理主线：围绕 「页面的请求过程」、「DNS 解析」、「TCP 连接的建立」 建立输入、状态变化与输出之间的因果关系
- 文章范围：讲解了从浏览器输入URL到页面渲染的完整网络请求流程，包括DNS解析、TCP连接、HTTP请求与响应、资源加载、缓存机制及浏览器渲染原理，帮助前端开发者全面理解网页加载背后的核心原理。
- 边界与代价：浏览器会批量延迟样式计算，但同步读取布局可能强制刷新；合成层也不是越多越好
- 工程落地：优化应使用性能面板确认主线程、布局、绘制与合成瓶颈，再减少对应阶段的工作量
浏览器发起一个网络请求时，会先解析域名并建立连接，再发送 HTTP 请求，收到响应后继续解析资源并渲染页面。 域名需要经过 DNS 转成服务器 IP，随后通常通过 TCP 建立可靠连接，传输中依靠排序和重传保证数据完整。拿到 HTML 后，浏览器还会按内容继续请求 JavaScript、CSS 和图片，并受到缓存、重定向及同源策略影响。需要注意，HTTP/3 的底层是基于 UDP 的 QUIC，不能把所有 HTTP 请求都简单理解为建立 TCP 连接。
这篇文章不要按 API 清单来背。先用上面的 Mind Map 建立全局结构，再通过交互 DEMO 观察正常路径和边界路径如何改变状态；阅读正文时重点核对每一步的输入、负责执行的参与者、产生的中间状态以及最终可观察结果。遇到版本敏感结论，要把“历史实现”“当前行为”和“工程兼容策略”分开说明；遇到性能或架构取舍，则用实际指标、失败现象和验证手段支撑判断。
版本校准： 原理文章中的代码代表特定实现与写作时间。应用到当前项目时，应先确认浏览器、框架或工具的主版本，再区分稳定的规范语义、可变化的内部实现和项目自身约束。
当我们去面试的时候，常常会被问到一个问题：在浏览器里面输入 url，按下回车键，会发生什么？
这个问题涉及浏览器中的运行机制和页面加载流程，并且这些内容也都穿插在我们日常开发中，包括前后端联调、对网页进行性能优化等。
今天我会先跟你聊一聊浏览器中网络请求是怎么进行的，这样你对整个网页渲染会有个更好的认识。
# 页面的请求过程
当我们打开某个网站的页面，浏览器就会发起网络请求获取该页面的资源，我们也可以从控制台看到以下的请求信息：
在 Network 面板里，我们能看到所有浏览器发起的网络请求，包括页面、图片、CSS 文件、XHR 请求等，还能看到请求的状态（200 成功、404 找不到、缓存、重定向等等）、耗时、请求头和内容、返回头和内容等
图中第一个就是网站页面的请求，返回<html>页面。
接下来，浏览器会加载页面，同时页面中涉及的外部资源也会根据需要，在特定的时机触发请求下载，包括我们看到的 PNG 图片、JavaScript 文件（这里没有 CSS 样式，是因为样式被直出在<html>页面内容里了）。
