深入了解浏览器的重绘与重排

重绘与重排是浏览器渲染的重要动作，对前端性能影响非常大，所以值得多了解一下什么是重绘与重排？重绘是一个改变元素外观的行为，例如改变visibility、背景色等属性重排是浏览器重新计算各个元素的排列位置，需要重新进行布局计算，例如改变元素的宽高、元素内的内容重绘不会带来重新布局，并不一定伴随重排，但重排一定会导至重绘哪些操作会引起重排？（1）改变DOM元素的几何属性某元素的几何属性发生变化时，会触发子节点、兄弟节点、祖先节点重新计算，也就是所有元素都得重新计算大小、位置，整个页面重新渲染，代价非常大（2）DOM树的结构变化例如节点的增减、移动等，也会触发重排这个影响小于第一种情况，因为DOM树的遍历是从上的下，从左到右的，在这个过程中，当前元素不会影响其前面已经遍历过的元素例如在body最前面插入一个元素，会导致整个文档的重新渲染，而在其后插入一个元素，则不会影响到前面的元素（3）获取某些属性当获取一些属性时，浏览器为取得正确的值也会触发重排，这些属性包括： offsetTop、offsetLeft、 offsetWidth、offsetHeight scrollTop、scrollLeft、scrollWidth、scrollHeight clientTop、clientLeft、clientWidth、clientHeight getComputedStyle() 如何减小重绘重排的性能代价？（1）将多次改变样式的操作合并成一次

//bad

var test = document.getElementById('test');
test.style.color = '#000';
test.style.background = '#111'; 

//good

.test {
background: #111;
color: #000;
} 

document.getElementById('test').className = 'test';

（2）适当使用绝对定位在页面逻辑允许的情况下，可以把position属性设为absolute或fixed 这样此元素就脱离了文档流，它的变化不会影响到其他元素例如淘宝网首页的轮播广告就使用了绝对定位，轮播需要不断修改节点，就会引起大量重排，使用绝对定位可以提高很多性能（3）把多次对节点的操作合并为一次操作

//bad

for(var i=0; i<10; i++){
$("#test").append('hi'); 
}

//good

var frag = document.createDocumentFragment();

var str = '';
for(var i=0; i<10; i++){
str += 'hi'; 
}

$("#test").appendChild(frag);

（4）临时使用display:none 把要频繁操作的节点先置为隐藏，再对其操作，操作完成后，再显示出来对隐藏节点的操作是对页面没有任何影响的，只是隐藏和显示这两个动作触发重排（5）缓存属性值

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

//bad
var a = document.body.scrollTop + 1;
var b = document.body.scrollTop + 2;
//good
var top = document.body.scrollTop;
var a = top + 1;
var b = top + 2;