"什么是重排(redraw/reflow)重绘(repaint)？如何减少重排重绘？"

当DOM的变化影响了元素的几何属性（宽或高），浏览器需要重新计算元素的几何属性，同样其他元素的几何属性和位置也会因此受到影响。浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。这个过程称为重排。完成重排后，浏览器会重新绘制受影响的部分到屏幕，该过程称为重绘。由于浏览器的流布局，对渲染树的计算通常只需要遍历一次就可以完成。但table及其内部元素除外，它可能需要多次计算才能确定好其在渲染树中节点的属性，通常要花3倍于同等元素的时间。这也是为什么我们要避免使用table做布局的一个原因。

重排何时发生？

1、添加或者删除可见的DOM元素
2、元素位置改变
3、元素尺寸改变
4、元素内容改变（例如：一个文本被另一个不同尺寸的图片替代）
5、页面渲染初始化（这个无法避免）
6、浏览器窗口尺寸改变
7、获取某些属性，如offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle()

重绘何时发生

1、字体颜色、背景颜色、边框颜色
2、透明度(opacity)，可视化(visibility)
3、transfrom等

如何减少重排重绘？

1、合并style或class
2、js修改样式可以使用cssText，批量处理
3、添加dom节点，可以使用document.createDocumentFragment，再innerHTML
4、使用内存或web存储保存影响重排的属性值等