--- theme: cyanosis highlight: a11y-dark --- 页面渲染是浏览器的核心功能之一，所谓渲染流程，本质就是**将 HTML 字符串转换为屏幕上像素点**的过程。\ 这个过程看似简单，实则是一套由**多进程多线程**协同完成的复杂流水线。 # 渲染时机在探讨整个渲染流程之前，我们需要先明确渲染是怎样开始的。通常在用户访问某个网址时，浏览器就会发起一个网络请求，向目标服务器请求对应页面。\ 当浏览器的**网络线程**收到 HTML 文档后，会产生一个**渲染任务**，并将其传递给**渲染主线程**的消息队列。在[事件循环](https://juejin.cn/post/7326803868326592539)机制的作用下，**渲染主线程**取出消息队列中的渲染任务，开启渲染流程。 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/caebc9ffa32b45aea9254396f6e2f2bf~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pqu5pif:q75.awebp?rk3s=f64ab15b&x-expires=1757687154&x-signature=kHmZDt3%2FbhpR%2Ff3xFD%2BRS4pAZq4%3D) # 渲染流程总览整个渲染流程分为多个阶段，分别是：*HTML 解析*、*样式计算*、*布局*、*分层*、*绘制*、*分块*、*光栅化*、*Draw*。每个阶段都有明确的输入输出，**上一个阶段的输出会成为下一个阶段的输入**。 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/cd81ba504ef841ada68280f472a43ca5~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pqu5pif:q75.awebp?rk3s=f64ab15b&x-expires=1757687154&x-signature=qK4HxXlgUNPpNzr%2FGPfb5jHMmsc%3D) 各个阶段环环相扣，最终形成了一套组织严密的生产流水线，任何一个环节的**阻塞**或**延迟**都会影响**最终的渲染性能**。 # 1. HTML 解析 **Parse HTML** 是渲染的第一步，这一步的输入是通过网络请求拿到的 HTML 字符串。浏览器在开始解析前，会启动一个**预解析线程**，率先下载 HTML 中的**外部 CSS 文件**和**外部 JS 文件**。最终，HTML 字符串会被逐行解析为 **DOM 树**，CSS 资源加载并解析后生成 **CSSOM 树**，这两个树形结构对象也赋予了 JS 操纵页面 DOM 和样式的能力，它们也是该阶段的**最终输出**。 > 两棵树上的节点并非 JS 对象，而是由浏览器内核实现的 C++ 对象\ > JS 能操作的是浏览器提供的这些节点对象的“代理对象” ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/790939794efc49498124b0e84ad7b089~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pqu5pif:q75.awebp?rk3s=f64ab15b&x-expires=1757687154&x-signature=QuIDxUsOw1ykS8YcQbNH5WNkA68%3D) **CSSOM 树**内包含了所有的浏览器默认样式、内部样式、外部样式、行内样式，平时我们通过`dom.style.xxx`操作的只是元素的**行内样式**，不会影响开发者定义的内部和外部样式表。想要访问除内联样式和浏览器默认样式外的内部和外部样式表，我们可以通过`document.styleSheets`接口，它是 JS 访问 CSSOM 的核心接口之一，提供了操作 CSSOM 中样式规则的方法。 > `document.styleSheets`访问的只是 CSSOM 的映射，而不是其本身 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/26645fe2d3aa4edb873eabfab4a5f517~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pqu5pif:q75.awebp?rk3s=f64ab15b&x-expires=1757687154&x-signature=R%2BkC8WYZBTa6p8KLwOtFazd82D4%3D) 💎 HTML 解析过程中遇到 CSS 代码怎么办？如果主线程解析到``位置，此时外部的 CSS 文件还没下载解析好，**渲染主线程不会等待**，而是会**继续解析后续的 HTML**。这是因为下载和解析 CSS 的工作是在**预解析线程**中进行的，这也是 CSS 不会阻塞 HTML 解析的**根本原因**。 ❗ 虽然 CSS 解析不会阻塞 HTML 解析，但由于还没有 CSSOM 生成，*仍会阻塞后续的渲染*。 > 预解析线程并不会负责 CSS 的所有解析工作，渲染主线程接手后会完成最后的部分并生成 CSSOM ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/bd590b34136249e4ae73fae695127a5f~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pqu5pif:q75.awebp?rk3s=f64ab15b&x-expires=1757687154&x-signature=l0LnJvGWbK4woXDnfOdMm10RgPQ%3D) 💎 HTML 解析过程中遇到 JS 代码怎么办？渲染主线程解析到` ``` ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/58ce5de2d139478785fa634b3fb8f26d~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pqu5pif:q75.awebp?rk3s=f64ab15b&x-expires=1757687154&x-signature=9MgabxI3fEiEoSttJyq9ICwJafs%3D) # 总结完整流程如下图： ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/836d42c035a24be09e4c389dc1d33fd1~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5pqu5pif:q75.awebp?rk3s=f64ab15b&x-expires=1757687154&x-signature=7CHsonaDFiyKKPB1VI4dFUw5qzw%3D) * **HTML 解析**：将 HTML 字符串解析为描述页面结构的 DOM 树和整合所有样式规则的 CSSOM 树。 * **样式计算**：遍历 DOM 树，结合 CSSOM 树为每个节点计算最终样式，生成带有样式的 DOM 树。 * **布局**：根据带样式的 DOM 树计算每个节点的几何信息，生成仅包含可见元素的 Layout 树。 * **分层**：将 Layout 树划分为多个图层，实现局部更新优化。 * **绘制**：为每个图层生成详细的绘制指令集。 * **分块**：合成线程将每个图层切割为小块，优先处理视口内区域。 * **光栅化**：GPU 进程将分块的绘制指令转换为位图，交给合成线程。 * **合成绘制**：合成线程生成 quad 信息，GPU 结合 quad 将所有位图合成并输出到屏幕成像。 # 重排 Reflow Reflow 即重排，也称**回流**。它是指当 DOM 元素的**几何属性**（如尺寸、位置、数量、隐藏 / 显示）发生变化时，浏览器需要**重新计算**元素的几何信息（位置、大小等）的过程。重排发生在整个渲染流程的布局阶段，它的本质是**重新计算 Layout 树**，是布局的“推倒重来”。触发重排的常见场景： * 修改元素的宽高（`width`、`height`）、外边距（`margin`）、内边距（`padding`） * 改变元素的定位方式（`position: absolute`改为`relative`） * 增减 DOM 元素（如`appendChild`、`removeChild`） * 浏览器窗口大小变化（`resize`事件） * 读取或修改某些会触发布局的属性（如`offsetWidth`、`scrollTop`） * 浏览器为返回最新值，会立即触发重排重排的代价很**高**，因为一个元素的几何变化可能会影响其他元素的位置（比如父元素尺寸变化会导致子元素重新排列）。浏览器会从该元素开始，向上遍历 DOM 树，重新计算所有受影响元素的布局，形成 “**重排链**”。为了避免**连续的多次操作**导致布局树反复计算，浏览器会**合并**这些操作，当 JS 代码全部完成后再进行**统一计算**。所以，改动属性造成的 Reflow 是**异步**完成的。也同样因为如此，当 JS 获取**布局属性**时，就可能造成无法获取到**最新**的布局信息。所以浏览器的策略是，当要获取布局属性会**立即 Reflow**，以返回最新值。 ```javascript // 连续修改样式会被浏览器合并为一次重排（异步） box.style.width = "200px"; box.style.height = "150px"; // 读取布局属性会强制触发重排（同步） console.log(box.offsetWidth); // 触发重排以获取最新值 ```
💎 常见优化手段基于上述重排机制，在日常开发中我们就可以有如下考虑重排的优化手段： * **批量修改样式**：通过`class`一次性切换多个样式，而非逐条修改`style`属性： ```javascript // 优化前：多次修改可能触发多次重排（实际被浏览器合并，但仍有风险） box.style.width = "200px"; box.style.height = "150px"; // 优化后：一次class切换完成所有修改 box.classList.add("new-size"); // CSS中定义.new-size { width: 200px; height: 150px; } ``` * **避免强制同步布局**：先修改样式，再集中读取布局属性： ```javascript // 优化前：读取→修改→读取，触发两次重排 const width = box.offsetWidth; box.style.width = width + 10 + "px"; console.log(box.offsetWidth); // 优化后：先修改，再读取，仅触发一次重排 box.style.width = box.offsetWidth + 10 + "px"; console.log(box.offsetWidth); ``` * **使用 “离线 DOM”** ：对复杂 DOM 修改，先将元素脱离文档流（如`display: none`），修改后再恢复： ```javascript const list = document.getElementById("list"); list.style.display = "none"; // 脱离文档流，后续修改不触发重排 // 执行大量DOM操作... list.appendChild(newItem); list.appendChild(anotherItem); list.style.display = "block"; // 仅触发一次重排 ``` # 重绘 Repaint Repaint 即**重绘**，是指当 DOM 元素的**非几何属性发生变化**（如颜色、背景、阴影）时，浏览器不需要重新计算元素的几何信息，只需**重新绘制元素外观**的过程。重绘发生在整个渲染流程的**绘制阶段**，它的本质是为可见样式改变的元素**重新生成渲染指令**，是外观的“局部刷新”。由于元素的布局信息也属于可见样式，所以 **Reflow 一定会引起 Repaint**。\ 反之，Repaint 不一定会触发 Reflow *** # 写在最后 > *One day you'll leave this world behind. So live a life you will remember! --- Avicii* 我是暮星，一枚有志于在前端领域证道的攻城狮。优质前端内容持续输出中......，欢迎**点赞 + 关注 + 收藏**。点赞.jpeg