知識星球作者：韓子遲
網址：http://www.cnblogs.com/zichi/p/4720000.html
先回顧下前文高效能JavaScript DOM程式設計，主要提了兩點最佳化，一是儘量減少DOM的訪問，而把運算放在ECMAScript這一端，二是儘量快取區域性變數，比如length等等，最後介紹了兩個新的API querySelector()以及querySelectorAll()，在做組合選擇的時候可以大膽使用。而本文主要講的是DOM程式設計可能最耗時的地方，重排和重繪。
1、什麼是重排和重繪
瀏覽器下載完頁面中的所有元件——HTML標記、JavaScript、CSS、圖片之後會解析生成兩個內部資料結構——DOM樹和渲染樹。
DOM樹表示頁面結構，渲染樹表示DOM節點如何顯示。DOM樹中的每一個需要顯示的節點在渲染樹種至少存在一個對應的節點（隱藏的DOM元素disply值為none 在渲染樹中沒有對應的節點）。渲染樹中的節點被稱為“幀”或“盒”,符合CSS模型的定義，理解頁面元素為一個具有填充，邊距，邊框和位置的盒子。一旦DOM和渲染樹構建完成，瀏覽器就開始顯示（繪製）頁面元素。
當DOM的變化影響了元素的幾何屬性（寬或高），瀏覽器需要重新計算元素的幾何屬性，同樣其他元素的幾何屬性和位置也會因此受到影響。瀏覽器會使渲染樹中受到影響的部分失效，並重新構造渲染樹。這個過程稱為重排。完成重排後，瀏覽器會重新繪製受影響的部分到螢幕，該過程稱為重繪。由於瀏覽器的流佈局，對渲染樹的計算通常只需要遍歷一次就可以完成。但table及其內部元素除外，它可能需要多次計算才能確定好其在渲染樹中節點的屬性，通常要花3倍於同等元素的時間。這也是為什麼我們要避免使用table做佈局的一個原因。
並不是所有的DOM變化都會影響幾何屬性，比如改變一個元素的背景色並不會影響元素的寬和高，這種情況下只會發生重繪。
2、重排和重繪的代價究竟多大
重排和重繪的代價有多大？我們再回到前文那個過橋的例子上，細心的你可能會發現了，千倍的時間差並不是由於“過橋”一手造成的，每次“過橋”其實都伴隨著重排和重繪，而耗能的絕大部分也正是在這裡!
var times = 15000;
// code1 每次過橋+重排+重繪
console.time(1);
for(var i = 0; i < times; i++) {
document.getElementById(‘myDiv1’).innerHTML += ‘a’;
}
console.timeEnd(1);
// code2 只過橋
console.time(2);
var str = ”;
for(var i = 0; i < times; i++) {
var tmp = document.getElementById(‘myDiv2’).innerHTML;
str += ‘a’;
}
document.getElementById(‘myDiv2’).innerHTML = str;
console.timeEnd(2);
// code3
console.time(3);
var _str = ”;
for(var i = 0; i < times; i++) {
_str += ‘a’;
}
document.getElementById(‘myDiv3’).innerHTML = _str;
console.timeEnd(3);
// 1: 2874.619ms
// 2: 11.154ms
// 3: 1.282ms
資料是不會撒謊的，看到了吧，多次訪問DOM對於重排和重繪來說，耗時簡直不值一提了。
3、重排何時發生
很顯然，每次重排，必然會導致重繪，那麼，重排會在哪些情況下發生？
- 新增或者刪除可見的DOM元素
- 元素位置改變
- 元素尺寸改變
- 元素內容改變（例如：一個文字被另一個不同尺寸的圖片替代）
- 頁面渲染初始化（這個無法避免）
- 瀏覽器視窗尺寸改變
這些都是顯而易見的，或許你已經有過這樣的體會，不間斷地改變瀏覽器視窗大小，導致UI反應遲鈍（某些低版本IE下甚至直接掛掉），現在你可能恍然大悟，沒錯，正是一次次的重排重繪導致的！
4、渲染樹變化的排隊和掃清
思考下麵程式碼：
var ele = document.getElementById(‘myDiv’);
ele.style.borderLeft = ‘1px’;
ele.style.borderRight = ‘2px’;
ele.style.padding = ‘5px’;
乍一想，元素的樣式改變了三次，每次改變都會引起重排和重繪，所以總共有三次重排重繪過程，但是瀏覽器並不會這麼笨，它會把三次修改“儲存”起來（大多數瀏覽器透過佇列化修改並批次執行來最佳化重排過程），一次完成！但是，有些時候你可能會（經常是不知不覺）強制掃清佇列並要求計劃任務立即執行。獲取佈局資訊的操作會導致佇列掃清，比如：
- offsetTop, offsetLeft, offsetWidth, offsetHeight
- scrollTop, scrollLeft, scrollWidth, scrollHeight
- clientTop, clientLeft, clientWidth, clientHeight
- getComputedStyle() (currentStyle in IE)
將上面的程式碼稍加修改：
var ele = document.getElementById(‘myDiv’);
ele.style.borderLeft = ‘1px’;
ele.style.borderRight = ‘2px’;
// here use offsetHeight
// …
ele.style.padding = ‘5px’;
因為offsetHeight屬性需要傳回最新的佈局資訊，因此瀏覽器不得不執行渲染佇列中的“待處理變化”並觸發重排以傳回正確的值（即使佇列中改變的樣式屬性和想要獲取的屬性值並沒有什麼關係），所以上面的程式碼，前兩次的操作會快取在渲染佇列中待處理，但是一旦offsetHeight屬性被請求了，佇列就會立即執行，所以總共有兩次重排與重繪。所以儘量不要在佈局資訊改變時做查詢。
5、最小化重排和重繪
我們還是看上面的這段程式碼：
var ele = document.getElementById(‘myDiv’);
ele.style.borderLeft = ‘1px’;
ele.style.borderRight = ‘2px’;
ele.style.padding = ‘5px’;
三個樣式屬性被改變，每一個都會影響元素的幾何結構，雖然大部分現代瀏覽器都做了最佳化，只會引起一次重排，但是像上文一樣，如果一個及時的屬性被請求，那麼就會強制掃清佇列，而且這段程式碼四次訪問DOM，一個很顯然的最佳化策略就是把它們的操作合成一次，這樣只會修改DOM一次：
var ele = document.getElementById(‘myDiv’);
// 1. 重寫style
ele.style.cssText = ‘border-left: 1px; border-right: 2px; padding: 5px;’;
// 2. add style
ele.style.cssText += ‘border-;eft: 1px;’
// 3. use class
ele.className = ‘active’;
6、fragment元素的應用
看如下程式碼，考慮一個問題：
- apple
- orange
如果程式碼中要新增內容為peach、watermelon兩個選項，你會怎麼做？
var lis = document.getElementById(‘fruit’);
var li = document.createElement(‘li’);
li.innerHTML = ‘apple’;
lis.appendChild(li);
var li = document.createElement(‘li’);
li.innerHTML = ‘watermelon’;
lis.appendChild(li);
很容易想到如上程式碼，但是很顯然，重排了兩次，怎麼破？前面我們說了，隱藏的元素不在渲染樹中，太棒了，我們可以先把id為fruit的ul元素隱藏（display=none)，然後新增li元素，最後再顯示，但是實際操作中可能會出現閃動，原因這也很容易理解。這時，fragment元素就有了用武之地了。
var fragment = document.createDocumentFragment();
var li = document.createElement(‘li’);
li.innerHTML = ‘apple’;
fragment.appendChild(li);
var li = document.createElement(‘li’);
li.innerHTML = ‘watermelon’;
fragment.appendChild(li);
document.getElementById(‘fruit’).appendChild(fragment);
檔案片段是個輕量級的document物件，它的設計初衷就是為了完成這類任務——更新和移動節點。檔案片段的一個便利的語法特性是當你附加一個片斷到節點時，實際上被新增的是該片斷的子節點，而不是片斷本身。只觸發了一次重排，而且只訪問了一次實時的DOM。
7、讓元素脫離動畫流
用展開/摺疊的方式來顯示和隱藏部分頁面是一種常見的互動樣式。它通常包括展開區域的幾何動畫，並將頁面其他部分推向下方。
一般來說，重排隻影響渲染樹中的一小部分，但也可能影響很大的部分，甚至整個渲染樹。瀏覽器所需要重排的次數越少，應用程式的響應速度就越快。因此當頁面頂部的一個動畫推移頁面整個餘下的部分時，會導致一次代價昂貴的大規模重排，讓使用者感到頁面一頓一頓的。渲染樹中需要重新計算的節點越多，情況就會越糟。
使用以下步驟可以避免頁面中的大部分重排：
- 使用絕對位置定位頁面上的動畫元素，將其脫離檔案流
- 讓元素動起來。當它擴大時，會臨時改寫部分頁面。但這隻是頁面一個小區域的重繪過程，不會產生重排並重繪頁面的大部分內容。
- 當動畫結束時恢復定位，從而只會下移一次檔案的其他元素
8、總結
重排和重繪是DOM程式設計中耗能的主要原因之一，平時涉及DOM程式設計時可以參考以下幾點：
- 儘量不要在佈局資訊改變時做查詢（會導致渲染佇列強制掃清）
- 同一個DOM的多個屬性改變可以寫在一起（減少DOM訪問，同時把強制渲染佇列掃清的風險降為0）
- 如果要批次新增DOM，可以先讓元素脫離檔案流，操作完後再帶入檔案流，這樣只會觸發一次重排（fragment元素的應用）
- 將需要多次重排的元素，position屬性設為absolute或fixed，這樣此元素就脫離了檔案流，它的變化不會影響到其他元素。例如有動畫效果的元素就最好設定為絕對定位。