浏览器：重绘与回流

浏览器的渲染过程

此文是本人学习过程笔记文章 欢迎大家讨论

浏览器获得html、css、js等，将代码渲染到页面的过程如下：

1. 解析HTML、生成DOM树，解析CSS，生成CSSOM树
2. 将DOM树和CSSOM树结合，生成渲染树（Render Tree）

图1.DOM、CSSOM、Render Tree

3. 根据生成的渲染树，进行回流，获得节点的几何信息（包括位置、大小）
4. 根据渲染树和回流获得的节点几何信息将其具体化，将位置、大小转换成绝对像素交给GPU
5. GPU获得节点的像素，通过GPU图像处理单元处理后展示到页面上

生成渲染树

总所周知，浏览器会通过网络进程获取到需要的HTML等文档资源，然后交给浏览器渲染进程，在浏览器渲染进程中会开始解析HTML，解析CSS，同时生成了Render Tree，构建渲染树的过程如下：

1. 通过DOM树从根节点开始遍历每个可见节点
2. 对于每一个可见节点，对照CSSOM树找到对应的规则，应用
3. 根据每个可见节点和样式生成渲染树

不可见节点包括：

• 设置display:none
• 输出节点，script、meta、link等

注意：css设置visibility和opacity隐藏节点，虽然页面不可见，但是同样会解析到渲染树上。

回流（Reflow）

• 回流是指浏览器为了重新渲染部分或者全部文档而重新结算元素的位置和几何大小的过程
• 触发条件：
  • 当改变元素的位置或者几何大小时
    • 删除或添加DOM元素
    • 元素的位置发生改变
    • 元素的尺寸发生改变（包括外边距、内边距、边框大小、高度和宽度等）
    • 内容发生变化、比如文本改变，图片被不同尺寸的图片替换等
    • 页面首次渲染的时候
    • 浏览器窗口大小发生变化
• 影响：回流是来计算元素的位置和几何大小的，是一种昂贵的操作，它会影响整个页面的布局，所有是很影响性能的，所以我们要减少回流，提高性能

重绘（Repaint）

• 重绘是指根据浏览器的样式重新绘制元素的过程，又是知道节点的位置和几何大小后转换成绝对像素的过程
• 触发条件
  • 回流一定触发重绘
  • 当元素的可见样式（例如颜色、背景、阴影等）发生改变时，可能触发重绘。