一:浏览器的渲染步骤
1.处理 HTML 并构建 DOM 树。
2.处理 CSS 构建 CSSOM 树。
3.将 DOM 与 CSSOM 合并成一个渲染树。
4.根据渲染树来布局,计算每个节点的位置。
5.调用 GPU 绘制,合成图层,显示在屏幕上。
二:回流
布局改变,或者DOM的尺寸等属性改变(比如修改元素的 width
、height
、top
)时。浏览器需要重新计算元素的属性,然后再将计算的结果绘制出来,这个过程叫做回流。
三:重绘
只修改样式,而不影响页面布局(比如修改元素的 visibility
、color
、background-color
等)。浏览器不需重新计算元素的位置尺寸等,直接为该元素绘制新的样式。这个过程叫做重绘。
回流必定会发生重绘,重绘不一定会引发回流。回流所需的成本比重绘高的多,改变深层次的节点很可能导致父节点的一系列回流。
四:会导致回流的操作:
- 页面首次渲染
- 浏览器窗口大小发生改变
- 元素尺寸或位置发生改变
- 元素内容变化(文字数量或图片大小等等)
- 元素字体大小变化
- 添加或者删除可见的
DOM
元素 - 激活
CSS
伪类(例如::hover
) - 查询某些属性或调用某些方法
参考链接:https://juejin.cn/post/6844903781084168206
https://juejin.cn/post/6844904119157669902