- 发生在浏览器解析
DOM Tree
过程中 - 回流
Reflow
计算每一个可见(visible)元素的大小和位置,回流也称布局layout
- 重绘
Repaint
把每个像素(pixels)绘制到屏幕上
position
位置font-size
字体width,height
大小float
浮动- 页面新增和删除节点
上述属性发生变化,可能会引起其该节点的父节点,子节点,兄弟节点,甚至是整个文档的重新布局
color
outline
backgound
visibility
opactiy
其中一个发生改变就会引起重绘
- 不要用多条语句来改变样式,取而代之
class
或cssText
- 批量
DOM
离线更新docuemntFragment
- 先
cloneNode
节点,再更新节点,最后替换replace
- 先
display:none
(1Repaint
& 1Reflow
),积累 100 个更新后,再恢复display
,总共2Repaint
,2Reflow
- 不要重复读取计算样式(
computed styles
),先缓存在读取 - 开启
GPU
加速transform
filter
opacity
will-change