如何減小回流，重繪

1. 直接改變className，若是動態改變樣式，則使用cssText（考慮沒有優化的瀏覽器）

// 很差的寫法
var left = 1;
var top = 1;
el.style.left = left + "px";
el.style.top = top + "px";// 比較好的寫法
el.className += " className1";
 
// 比較好的寫法
el.style.cssText += "; left: " + left + "px; top: " + top + "px;";

　　

2. 讓要操做的元素進行」離線處理」，處理完後一塊兒更新

a) 使用DocumentFragment進行緩存操做,引起一次迴流和重繪；
b) 使用display:none技術，只引起兩次迴流和重繪；
c) 使用cloneNode(true or false) 和 replaceChild 技術，引起一次迴流和重繪

3.不要常常訪問會引發瀏覽器flush隊列的屬性，若是你確實要訪問，利用緩存

// 別這樣寫，大哥
for(循環) {
el.style.left = el.offsetLeft + 5 + "px";
el.style.top = el.offsetTop + 5 + "px";
}
 
// 這樣寫好點
var left = el.offsetLeft,
top = el.offsetTop,
s = el.style; 
for (循環) { 
left += 10; 
top += 10; 
s.left = left + "px"; 
s.top = top + "px"; 
}

4. 讓元素脫離動畫流，減小回流的Render Tree的規模

//推薦
$("#block1").animate({left:50});
//不推薦
$("#block2").animate({marginLeft:50});