解释下页面的回流与重绘？如何减少重绘与回流？

重排（回流）

部分渲染树（或者整个渲染树）需要重新分析并且节点尺寸需要重新计算，表现为重新生成布局，重新排列元素

重绘

由于节点的几何属性发生改变或者由于样式发生改变，例如改变元素背景色时，屏幕上的部分内容需要更新，表现为某些元素的外观被改变

如何减少重绘与回流

html方面

1、保证层级扁平（尽量少的添加无意义标签）

css方面

1、使用 transform 替代 top

2、使用 visibility 替换 display: none（因为visibility只会引起重绘，display会引发回流）

3、避免设置多层内联样式（CSS 选择符从右往左匹配查找，避免节点层级过多。）

4、避免使用CSS表达式

5、将频繁重绘或者回流的节点设置为图层（图层能够阻止该节点的渲染行为影响别的节点，例如will-change、video、iframe等标签，浏览器会自动将该节点变为图层。）

6、CSS3 硬件（GPU）加速（使用css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘 。但是对于动画的其它属性，比如background-color这些，还是会引起回流重绘的，不过它还是可以提升这些动画的性能。）

js方面

1、避免频繁操作样式（最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性。）

2、避免频繁操作DOM（创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。）

3、避免频繁读取会引发回流/重绘的属性（如果确实需要多次使用，就用一个变量缓存起来。）

4、对具有复杂动画的元素使用绝对定位（使它脱离文档流，否则会引起父元素及后续元素频繁回流。）