什么是重绘，重排？如何解决？

一、重绘（repaint/redraw）

某个dom节点的颜色，背景颜色变了，字体大小，只影响自己，不影响其他元素。

注意：table及其内部元素可能需要多次计算才能确定好其在渲染树中节点的属性，比同等元素要多花两倍时间，这就是我们尽量避免使用table布局页面的原因之一。

二、重排（回流/reflow/重构）

某个dom节点的宽高，布局，隐藏等发生改变，不仅自身发生了改变，而且其他元素也会受到影响随之发生改变。每个页面最少一次回流，就是页面第一次加载的时候。

触发重排的原因：

1. 页面初始化渲染（无可避免）
2. 添加或删除可见的DOM元素；
3. 元素尺寸的改变------大小，外边距；边框；
4. 浏览器窗口尺寸的变化；
5. 填充内容的改变，比如文本的改变或图片大小改变而引起的计算值宽度和高度的改变；
6. 读取某些元素属性：（offsetLeft/Top/Height/Width,　clientTop/Left/Width/Height,　scrollTop/Left/Width/Height,　width/height,　getComputedStyle(),　currentStyle(IE)　)

1.重绘不一定重排，但是重排一定会重绘

2.重绘和重排的成本都是非常高的，要尽量减少dom的增删改

如何解决：

1. 不要直接操作样式，先设置好class，然后修改DOM的className;
2. position:absolute 与flex 不会导致重排
3. 不要把DOM 节点的属性放在一个循环当成循环的变量；
4. 需要动画的元素脱离文档流；
5. 不使用table 布局，
6. 尽量不修改影响范围比较大的DOM;
7. 如果要多次添加DOM,先使用  document.createDocumentFragment() 创建一个盒子，完盒子里面先添加子元素，添加完成在插入元素中；