浏览器的重绘与重排

前端开发的时候大量的操作dom会引起浏览器重绘(redraw)和重排(reflow) 。

　　在文档重新加载的时候，浏览器引擎会解析html来生成dom树，之后根据DOM元素的几何属性构建一棵用于渲染的树。渲染树的每个节点都有大小和边距等属性，类似于盒子模型（由于隐藏元素不需要显示，渲染树中并不包含DOM树中隐藏的元素）。当渲染树构建完成后，浏览器就可以将元素放置到正确的位置了，再根据渲染树节点的样式属性绘制出页面。由于浏览器的流布局，对渲染树的计算通常只需要遍历一次就可以完成。

　　重绘是一个元素外观的改变所触发的浏览器行为，例如改变visibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。重绘不会带来重新布局，并不一定伴随重排。

　　重排是更明显的一种改变，可以理解为渲染树需要重新计算。下面是常见的触发重排的操作：

　　DOM元素的几何属性变化 

　　　　DOM元素的属性变化时，浏览器会重新渲染该部分，而且会涉及到子节点/兄弟节点的重新计算。重排一定会引起浏览器的重绘，代价是很大的。

　　DOM树的结构变化   

　　　　DOM树的增 删 移动 ，会出发重排，浏览器引擎布局过程是从上到下的，从左到右的过程。 所以，如果在body最前面插入一个元素，会导致整个文档的重新渲染，而在其后插入一个元素，则不会影响到前面的元素。

　　获取某些属性

　　　　当获取一些属性的时候， 为了取得正确的值，会进行重排。  offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)。所以，在多次使用这些值时应进行保存。

　　改变元素样式 也会引起重排。

   尽量减小重排次数和影响范围：

　　　　将多次改变样式属性的操作合并成一次操作。　

　　　　

var changeDiv = document.getElementById(‘changeDiv’);
 
changeDiv.style.color = ‘#093′;
 
changeDiv.style.background = ‘#eee’;
 
changeDiv.style.height = ’200px’;  

//也可以 新增一个class 一次增加class

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

   在需要经常获取那些引起浏览器重排的属性值时，要缓存到变量。

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