一、重绘(repaint)

重绘就是一个元素它的布局没有被改变，但是它的外观被改变；比如说：

visibility:hidden;

或者颜色的修改，文本方向的修改，阴影的修改

二、重排(reflow)

重排就是DOM的变化影响到了元素的几何属性(宽和高)，浏览器会重新计算元素的几何属性

比如说：

1.设置 display：none;

2.添加、删除、更新DOM节点

3.改变窗口的大小

4.元素的margin,padding,border,width,height发生变化

5.内容发生改变

只改变元素的外观，一定不会引起网页重新布局；但是如果网页重新布局之后，一定会重绘

有些重绘和重排的代价是高昂的，但是重排的代价远大于重绘的代价，所以如果两者都无法避免，就选择代价更小的重绘。

我们可以采取改变class的方式来集中改变样式

或者可以createDocumentFragment创建一个游离于DOM树之外的节点，然后在这个节点上批量操作，最后插入DOM树中，只会触发一次重排。