回流和重绘

一、回流和重绘

1）回流（Reflow）：又称重排，引起DOM树结构变化，改变页面布局的过程
2）重绘（Repaint）：不影响页面布局，只跟样式有关的元素进行重新绘制的操作。

注意：回流必引起重绘，而重绘不一定会引起回流

二、减少回流和重绘的方法

1）css中避免重绘和回流：
css避免回流和重绘

• 1、用transform代替top。
• 2、用visibility换display：none，前者只引起重绘，后者引起回流。
• 3、不要将节点属性值放在一个循环。
• 4、不要使用table布局。
• 5、动画实现的动画速度越快，回流次数越多。也可以使用requestAnimationFrame。
• 6、将频繁重绘或回流的节点设置为图层。

2）JS避免回流和重绘

避免使用JS一个样式修改完接着下一个样式，最好是一次性更改CSS样式，或者将样式定义好class避免频繁操作DOM