笔记——浏览器渲染原理

步骤

1. 解析HTML：当浏览器接收到HTML文档时，它会开始解析HTML。这个过程中，如果遇到CSS或JS，浏览器会分别解析CSS和JS。

CSS不会阻塞HTML解析，JS会阻塞HTML解析。JS代码的执行过程中可能会修改当前的DOM树，所以DOM树的生成必须暂停。

2. 构建DOM树：解析HTML后，浏览器会构建一个DOM树，这是一个结构化的树状图，表示HTML文档的结构.

3. 构建CSSOM树：浏览器解析CSS后，会构建一个CSSOM树，这个树状图表示CSS信息。

4. 合成渲染树：DOM树和CSSOM树通过样式计算会被合并成渲染树。渲染树只包含需要渲染的节点，例如，隐藏的节点、不可见的节点等不会被包含在渲染树中。

5. 布局：渲染树生成后，浏览器会计算每个节点的几何信息，如宽度、高度、位置等。然后进行分层（will-change）。

6. 绘制：接下来，浏览器会根据渲染树的节点和几何信息绘制图像。

7. 合成和显示：先分块，然后将所有的绘制内容合并显示在屏幕上。

回流（reflow）和重绘（repaint）

回流也称为布局（layout），指当DOM元素的尺寸、位置或可见性发生改变时，浏览器需要重新计算元素的几何属性，并重新布局页面的过程。回流会涉及到整个页面或部分页面的重新渲染，因此是一种较为昂贵的操作。

重绘指当DOM元素的样式发生改变，但不影响其几何属性时，浏览器只需要重新绘制元素的外观，而不需要重新布局页面。重绘的代价相对较小，因为它不涉及到元素的位置和大小的改变。

回流一定会引起重绘。

为什么transform的效率高

因为transform既不会影响布局也不会影响绘制指令，即不会影响回流和重绘，它影响的只是渲染流程的最后一个draw阶段。由于draw阶段在合成线程中，所以transform的变化几乎不会影响渲染主线程。反之，渲染主线程无论如何忙碌，也不会影响transform的变化。