重绘、回流

1、简单说一下页面的重绘和回流

简单理解:

一个房间只是改变软装(更换壁纸)就是重绘、而进行硬装(改变房屋结构)就是回流

回流:

重新构建页面结构

当 render tree 的一部分或者全部的元素改变了自身的宽高、布局、显示或隐藏、或者元素内部的文字结构发生变化、导致需要重新构建页面的时候、回流就产生了

重绘:

改变元素外观

当一个元素自身的宽高、布局、及显示或隐藏没有改变、只是改变了元素的外观风格时、就产生重绘例如改变元素的背景颜色 background-color

结论:

重绘不一定回流、但是回流一定重绘

2、如何最小重绘和回流

1. 需要对元素进行复杂操作时、先将元素进行 display:none 隐藏掉、操作完再进行显示
2. 需要创建多个DOM节点时使用 documentFragment 创建完再一次性加入 document
3. 缓存 Layout 属性值
4. 避免使用 table 布局(table元素一旦出发回流就会导致table里所有元素回流)
5. 避免使用css表达式,因为每次调用都会进行重新计算(包括加载页面)
6. 尽量使用css属性简写