html+css 重绘与回流

重绘(Repaint)和回流(Reflow)是浏览器渲染渲染页面的两个过程。

1、重绘(Repaint)：当页面的一部分元素的视觉效果改变，但并没有改变布局的情况下，浏览器会将新的视觉效果绘制在屏幕上，

这个过程就是重绘。

2、回流(Reflow)：当页面的一部分因为元素的增加、删除、修改，或者父元素的改变导致需要重新计算布局和位置的时候，

就会发生回流。回流可能会导致重绘，也可能不会（例如，只有位置改变而视觉效果没有改变的情况）。

如何减少重绘和回流：

1、避免频繁改变类。

2、使用CSS的class替代直接在JavaScript中修改元素的样式。

3、对需要变化的元素进行absolute或fixed定位，这样它们的布局不会影响其他元素。

4、使用DocumentFragment或者div来一次性更新DOM。

5、对于动画，使用CSS3动画代替JavaScript。

6、避免在布局信息改变时做选择器查询。