一、回流和重绘
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