重绘（repaints）和回流（reflow）

重绘就是重新绘画，重绘是一个元素外观的改变所触发的浏览器行为，当给一个元素更换颜色、更换背景，虽然不会影响页面布局，但是颜色或背景变了，浏览器就会根据元素的新属性重新绘制，这就是重绘

当增加或删除 dom 节点，或者给元素修改宽高时，会改变页面布局，那么就会重新构造 dom 树然后再次进行渲染，这就是回流

重绘不会引起 dom 结构和页面布局的变化，只是样式的变化，有重绘不一定有回流

回流则是会引起 dom 结构和页面布局的变化，有回流就一定有重绘

重绘和回流都会影响性能，怎么进行优化或减少？

1、多个属性尽量使用简写，例如：boder 可以代替 boder-width、boder-color、boder-style
2、创建多个 dom 节点时，使用 documentfragment 创建
3、避免使用 table 布局
4、避免设置多层内联样式，避免节点层级过多
5、避免使用 css 表达式
6、将频繁重绘或回流的节点设置为图层，图层能够阻止该节点的渲染行为影响到别的节点（例：will-change \ video \ iframe等标签），浏览器会自动将该节点变为图层
7、脱离文档流之后进行的任何操作，都不会造成回流了，复杂操作的地方，不妨使用 position：absolute / fixed定位