>[danger]页面渲染的过程，重排（回流）和重绘 1. **构建 DOM 树** 2. **创建 CSSOM 树** 3. **构建渲染树** 4. **布局** 5. **绘制** 6. **合成** * **回流（重排）指的是当页面中的元素发生布局或几何属性发生变化时**，浏览器需要重新计算这些元素的位置和大小，然后重新构建页面的渲染树，这个过程称为回流。由于需要重新计算布局，回流的代价很大，会对页面的性能产生负面影响。 * **重绘指的是当页面中的元素样式发生改变时**，浏览器会重新绘制这些元素的外观，但不会改变它们在页面中的位置和大小。重绘的代价相对较小，但仍然会对页面性能产生一定的影响。 >[info]浏览器渲染过程是 浏览器渲染过程是将 HTML、CSS、JavaScript 等资源转化为用户可视的网页的过程，通常包含以下几个步骤： 1. **构建 DOM 树**：浏览器从文档解析 HTML，创建一个 DOM（文档对象模型）树，把所有 HTML 标签转化成树上的结点，并生成一张标签树，其中每个节点都是一个文档对象。 2. **创建 CSSOM 树**：浏览器同步下载所有的样式表，并把他们解析成一个 CSSOM（CSS 对象模型）树。与 DOM 树不同，CSSOM 是一个被计算的树，它主要包含了每个元素匹配到的具体样式信息。 3. **构建渲染树**：通过将 DOM 树和 CSSOM 树进行合并，浏览器创建出一个渲染树（render tree），即从 DOM 树上选取需要显示的节点和对应的 CSSOM 树上的样式，并生成相应的显示规则，这些显示规则关联着渲染树的每个节点。 4. **布局**：浏览器根据渲染树中每个元素的布局信息，计算每个元素在屏幕中显示的位置和大小，生成布局树。 5. **绘制**：遍历渲染树，按照布局树中的位置绘制页面元素。 6. **合成**：由于现代浏览器使用 GPU 加速渲染，所以绘制的页面元素会在合成阶段被组合成位图，并通过显卡进行展示。 总之，浏览器渲染过程是一个复杂的流程，它主要包含了构建 DOM 树，创建 CSSOM 树，构建渲染树，布局，绘制和合成等多个步骤，最终将 HTML、CSS 和 JavaScript 等资源转化为用户可以看到的网页。 >参考链接 [链接](https://juejin.cn/book/6844733763675488269/section/6844733763771957256)