重绘与回流

重绘

当元素样式的改变不影响布局时，浏览器将使用重绘对元素进行更新，此时由于只需要UI层面的重新像素绘制，因此损耗较少

常见重绘操作有：
1.改变元素颜色
2.改变元素背景色
3.。。。。。。

回流（重排）

当元素的尺寸、结构或者触发某些属性时，浏览器会重新渲染页面，称为回流。此时，浏览器需要重新计算，计算后还需要重新布局页面，因此是较重的操作。

常见回流操作有：
1.页面初次渲染
2.浏览器窗口大小改变
3.元素尺寸、位置、内容发生改变
4.元素字体大小变化
5.添加或删除可见的DOM
6.激活css伪类（：hover）
7.。。。。。。

总结

回流必定触发重绘，重绘不一定触发回流。回流开销较大。

如何避免大量使用重绘和回流

1.避免频繁操作样式，可汇总后统一修改
2.尽量使用class进行样式修改，而不是直接插入样式
3.减少dom操作。可使用字符串一次插入