页面渲染

[conan1992]

构建DOM（文档对象模型）

浏览器会把HTML结构字符串解析转换DOM树形结构。

构建CSSOM（CSS对象模型）

解析CSS会产生CSS规则树，它和DOM结构比较像。

渲染树rendering tree

• rendering tree不用于DOM tree,渲染树只包括需要显示的节点和节点的样式
• CSS 的 Rule Tree主要是为了完成匹配并把CSS Rule附加上Rendering Tree上的每个Element（也就是每个Frame）
• 然后，计算每个Frame 的位置，这又叫layout和reflow过程。

布局与绘制

当浏览器生成渲染树以后，就会根据渲染树来进行布局（也可以叫做回流）。这一阶段浏览器要做的事情是要弄清楚各个节点在页面中的确切位置和大小。通常这一行为也被称为“自动重排”。

回流和重绘

• 重绘：当我们对 DOM 的修改导致了样式的变化、却并未影响其几何属性（比如修改了颜色或背景色）时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式（跳过了上图所示的回流环节）。

  • 一个 DOM 元素的几何属性变化，常见的几何属性有width、height、padding、margin、left、top、border 等等, 这个很好理解
  • 添加或者删除可见的DOM元素
  • 内容变化，比如用户在input框中输入文字
  • 浏览器窗口尺寸改变——resize事件发生时
  • 计算 offsetWidth 和 offsetHeight 属性
  • 设置 style 属性的值

• 回流：当我们对 DOM 的修改引发了 DOM 几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性（其他元素的几何属性和位置也会因此受到影响），然后再将计算的结果绘制出来。这个过程就是回流（也叫重排）

  • 当 DOM 的修改导致了样式的变化，并且没有影响几何属性的时候，会导致重绘(repaint)

首屏渲染

Chrome的First Paint

性能优化

• 避免频繁使用 style，而是采用修改class的方式。
• 使用 visibility 替换 display: none ，因为前者只会引起重绘，后者会引发回流（改变了布局）
• 对于 resize、scroll 等进行防抖/节流处理。
• 添加 will-change: tranform

参考

• 谈谈你对重绘和回流的理解
• 你不知道的浏览器页面渲染机制