重绘与重排

1.什么是重绘与重排

        重绘就是页面进行重新绘制：是一个元素的外观发生变化，被浏览器所捕捉，浏览器会根据元素的新属性进行重新绘制，页面结构不变，使元素呈现新的外观。

        重排就是页面进行重新排列：节点更新以及节点尺寸发生变化了，改变页面结构，浏览器将重新渲染排列。

2.两者之间的关系

        重绘不一定重排，但重排一定重绘。（重排是大场面，重绘是小场面）

        重绘和重排都会影响浏览器的性能，尽可能避免发生，尤其是重排。

3.引起重排的属性和方法

• 添加或删除可见的DOM元素
• 元素的尺寸或位置发生变化，或者使用动画
• 浏览器窗口尺寸发生变化（resize事件发生时）
• 页面渲染初始化
• 设置style属性的值
• 激活css伪类（如：hover）

 4.引起重绘的属性

• visibility、outline、背景色，改变字体颜色等属性的改变
• 这些属性只是影响元素的外观，风格，而不会影响布局的

5.减少重绘和重排

1. 不要一条一条的修改DOM的样式，可以先定义好css的class，然后修改DOM的className。
2. 不要把DOM结点的属性值放在一个循环里当成循环里的变量
3. 给动画的HTML元件使用fixed或absolute的position（脱离文档流），那么修改他们的css是不会重排