如何最小化重绘和回流？

如何最小化重绘和回流？

1.什么是重绘（repaint）

重绘：当元素的一部分属性发生改变，如外观、背景、颜色等不会引起布局的变化，只需要浏览器根据元素的新属性重新绘制，使元素呈现新的外观是重绘。

2.什么是回流（reflow）

重排（回流）：当 render 树中的一部分或者全部因为大小边距等问题发生改变而需要 DOM 树重新计算的过程。

重绘不一定会引起重排（比如颜色改变），重排一定会引起重绘（比如改变网页位置）

3.最小化重绘和回流?

1. 批量修改元素样式 elem.className 和 ele.style.cssText 代替 elem.style.xxx
2. 尽量使用 CSS 属性简写：比如 border、 font、 background等
3. 避免使用 CSS 表达式（expression），因为每次调用都会重新计算值（包括加载页面）
4. 尽量避免用 table 布局（table 元素一旦触发回流就会导致 table 里的所有其他元素回流）
5. 需要对元素进行复杂操作时，可以先隐藏（display:none）,操作完成后再显示
6. 需要创造多个 DOM 节点时，使用 DocumentFramgment 创建完后一次性加入 document 缓存 Layout属性值，如：let left = elem.offsetLeft ; 这样多次使用 left 只产生一次回流。