🚀 输入URL到页面渲染发生了什么?
欢迎来到我的博客文章！所有文章都是满满的前端干货，文章简明扼要。
总结
URL解析与DNS查询-TCP三次握手-发送HTTP请求-服务器返回响应-HTML解析,构建DOM树-加载CSS,构建CSSOM树,布局-绘制-合成"
URL到页面渲染完整流程
- URL解析与DNS查询
-
- 解析协议（https）、主机名（example.com）、路径等
-
检查本地缓存 → 若无，发起 DNS 查询，将域名解析为 IP 地址（如
93.184.216.34）
- TCP三次握手
-
- 建立 TCP 连接（三次握手）
-
若为 HTTPS，还需进行 TLS
握手（协商加密算法、验证证书、生成会话密钥）
- 发送HTTP请求
-
- 浏览器向服务器发送 HTTP 请求
- 包含请求方法、头部信息、请求体等
- 服务器返回响应
-
- 服务器处理请求并返回 HTTP 响应
- 包含状态码、响应头、响应体（HTML内容）
- HTML解析，构建DOM树
-
- 浏览器解析 HTML，构建 DOM 树
- CSS 不阻塞 DOM 构建，但阻塞渲染（需 CSSOM）
-
同步 <script> 阻塞 HTML 解析（DOM 构建暂停），直到 JS
下载并执行完毕
- 推荐使用 async/defer 优化 JS 加载
- 加载CSS，构建CSSOM树
-
- 加载 CSS，构建 CSSOM 树
- DOM + CSSOM 合并 → Render Tree（渲染树）
- 布局
-
- 浏览器计算 Render Tree 中各元素的几何信息（位置、大小）
- 即布局（Layout）或重排（Reflow）
- 绘制
-
- 将布局后的元素绘制到屏幕上
- 包括颜色、边框、阴影等视觉效果
- 合成
-
- 若页面有多个图层（如 transform, opacity 变化的元素）
-
浏览器在合成线程（Compositor Thread）将图层按 Z 轴顺序合并