浏览器重排和重绘

一个页面由两部分组成：
DOM：描述该页面的结构
render Tree（渲染树）：描述 DOM 节点 (nodes) 在页面上如何呈现。（解析完DOM+css之后会生成一个渲染树 Render Tree，就是 dom 和 css 的一一对应关系。DOM+css= Render Tree ）

如何理解重排和重绘？

重绘：当 DOM 元素的属性发生变化 (如 color) 时, 浏览器会通知 render Tree重新描绘相应的元素, 此过程称为重绘。（重绘属性都不会修改节点的大小和位置）

重排：如果该次变化涉及元素布局 (如 width), 浏览器则抛弃原有属性, 重新计算并把结果传递给 render Tree以重新描绘页面元素, 此过程称为重排。

这两个过程是很耗费浏览器性能的。

那么如何减少呢？

（1）分离读写操作;         

var curLeft=div.offsetLeft;
var curTop=div.offsetTop;
div.style.left=curLeft+1+'px';
div.style.top=curTop+1+'px';

（2）样式集中改变;

（3）使用absolute脱离文档流;

将需要多次重排的元素，position属性设为absolute或fixed，这样此元素就脱离了文档流，它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位。

（4）使用 display:none；

由于display属性为none的元素不在渲染树中，对隐藏的元素操作不会引发其他元素的重排。如果要对一个元素进行复杂的操作时，可以先隐藏它，操作完成后再显示。这样只在隐藏和显示时触发2次重排。

（5）在内存中多次操作节点，完成后再添加到文档中去。例如要异步获取表格数据，渲染到页面。可以先取得数据后在内存中构建整个表格的html片段，再一次性添加到文档中去，而不是循环添加每一行。

（6） 在需要经常取那些引起浏览器重排的属性值时，要缓存到变量，如窗口的offsetTop、offsetLeft事先缓存

 

导致重绘的属性：

* color 
* border-style 
* border-radius 
* visibility 
* text-decoration 
* background 
* background-image 
* background-position 
* background-repeat 
* background-size 
* outline-color 
* outline 
* outline-style 
* outline-width 
* box-shadow

导致重排的属性：

* width 
* height 
* padding 
* margin 
* display 
* border-width 
* border 
* min-height
* top 
* bottom 
* left 
* right 
* position 
* float 
* clear 
* text-align 
* overflow-y 
* font-weight 
* overflow 
* font-family 
* line-height 
* vertival-align 
* white-space 
* font-size