重绘就是重新绘画,重绘是一个元素外观的改变所触发的浏览器行为,当给一个元素更换颜色、更换背景,虽然不会影响页面布局,但是颜色或背景变了,浏览器就会根据元素的新属性重新绘制,这就是重绘
当增加或删除 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定位