什么是重绘（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定位