浏览器工作步骤
- 处理HTML标签生成DOM树。
- 处理CSS标签构建CSSOM树。
- Layout(reflow)计算每个对象的确切位置和大小。
- 最后是绘制(Paint),把最终的渲染树对象渲染成屏幕像素。
渲染数生成的时候简单来说,
- 从DOM树根节点开始,遍历每个可见节点。
- 每个可见节点找到并应用对应的CSSOM规则。
- 返回计算好样式的内容。
然后呢?
从渲染树知道了每个元素的位置和尺寸,下面就是Layout(reflow)了,根据设备的viewport计算每个元素该怎样展示。Layout之后就是绘制过程了。
对性能有什么影响?
根据内容样式不同,设备不同,每一步花费时间不太一样,但是页面越复杂,样式越多,每个步骤,特别是Layout会花费更多时间。
从上面步骤看到,一旦DOM或者CSSOM发生改变,这些步骤都会全部再走一遍。如果短时间内频繁触发,或者页面太复杂,导致某个步骤花费时间太多,就会导致页面帧率降低,页面变的卡顿。