回流和重绘 如何避免？

什么是重绘：当元素需要更新样式，但是这些样式属性只是改变元素的外观、风格，而不会引起布局变化的，只需要浏览器根据元素的新属性重新绘制，使元素呈现新的外观叫做重绘。

什么是回流：当 render 树中的一部分或者全部因为元素的规模尺寸、布局、隐藏等改变而需要重新构建，这就是回流。

首次加载触发重绘与回流：

每个页面都至少有一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建 render 树，在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘；

重绘不一定需要回流（比如颜色的改变），但回流必然会触发重绘（比如改变 div 的位置）

会导致重绘与回流的操作：

重绘：

1.修改文本颜色

2.修改文本样式

回流：

1.首次加载

2.浏览器窗口大小发生改变

3.元素的尺寸、位置发生改变（边距、宽高）

4.元素的内容发生改变

5.删除或添加可见元素

如何减少重绘与回流：

1.需要对元素进行复杂的操作时，可以先隐藏（ display : " none "）,操作完成后再显示

2.尽量避免用 table 布局（ table 元素一旦触发回流就会导致 table 里面所有的其他元素回流）

3.避免使用 css 表达式（ expression ）,因为每次调用都会重新计算值（包括加载页面）

4.尽量使用 css 属性简写，如 用 border 代替 border-width ,border-style , border- color

5.批量修改元素样式：elem.className 和 elem.style.cssText 代替 elem.style.xxx