如何最小化重绘和（repaint）和回流（reflow）

一、什么是重绘，什么是回流呢？

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

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

敲重点了啊 ： 重绘不一定会导致回流（比如颜色的改变），但是回流一定会导致重绘（比如改变网页的位置 等）

那么回归主题！

如何最小化重绘和回流呢！

• 方法1、需要对元素进行复杂的操作时，可以 先隐藏（display：“none”），操作完成后在显示

• 方法2、需要创建多个 DOM 节点时，使用 documentFragment 创建完后一次性的加入 document缓存 Layout 属性值，如： let left = elem.offsetleft; 这样，多次使用 left 只产生一次回流

• 方法3、尽量避免用 table 布局 （table 元素一旦触发回流就会导致 table 里所有的其他元素回流）

• 方法4、避免使用 css 表达式 （expression），因为每次调用都会重新计算值 （包括加载页面）

• 方法5、尽量使用 css 属性简写，如： 用border 代替 border-width，border-style，border-color

• 方法6、批量修改元素样式：elem.className 和 elem.style.cssText 代替 elem.style.xxxx