高性能JavaScript 重排與重繪

先回顧下前文高性能JavaScript DOM編程，主要提了兩點優化，一是儘可能減小DOM的訪問，而把運算放在ECMAScript這一端，二是儘可能緩存局部變量，好比length等等，最後介紹了兩個新的API querySelector()以及querySelectorAll()，在作組合選擇的時候能夠大膽使用。而本文主要講的是DOM編程可能最耗時的地方，重排和重繪。

一、什麼是重排和重繪

---

瀏覽器下載完頁面中的全部組件——HTML標記、JavaScript、CSS、圖片以後會解析生成兩個內部數據結構——DOM樹和渲染樹。

DOM樹表示頁面結構，渲染樹表示DOM節點如何顯示。DOM樹中的每個須要顯示的節點在渲染樹中至少存在一個對應的節點（隱藏的DOM元素disply值爲none 在渲染樹中沒有對應的節點）。渲染樹中的節點被稱爲「幀」或「盒",符合CSS模型的定義，理解頁面元素爲一個具備填充，邊距，邊框和位置的盒子。一旦DOM和渲染樹構建完成，瀏覽器就開始顯示（繪製）頁面元素。

當DOM的變化影響了元素的幾何屬性（寬或高），瀏覽器須要從新計算元素的幾何屬性，一樣其餘元素的幾何屬性和位置也會所以受到影響。瀏覽器會使渲染樹中受到影響的部分失效，並從新構造渲染樹。這個過程稱爲重排。完成重排後，瀏覽器會從新繪製受影響的部分到屏幕，該過程稱爲重繪。因爲瀏覽器的流佈局，對渲染樹的計算一般只須要遍歷一次就能夠完成。但table及其內部元素除外，它可能須要屢次計算才能肯定好其在渲染樹中節點的屬性，一般要花3倍於同等元素的時間。這也是爲何咱們要避免使用table作佈局的一個緣由。

並非全部的DOM變化都會影響幾何屬性，好比改變一個元素的背景色並不會影響元素的寬和高，這種狀況下只會發生重繪。

二、重排和重繪的代價究竟多大

---

重排和重繪的代價有多大？咱們再回到前文那個過橋的例子上，細心的你可能會發現了，千倍的時間差並非因爲「過橋」一手形成的，每次「過橋」其實都伴隨着重排和重繪，而耗能的絕大部分也正是在這裏!

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對於重排和重繪來講，耗時簡直不值一提了。

三、重排什麼時候發生

---

很顯然，每次重排，必然會致使重繪，那麼，重排會在哪些狀況下發生？

1. 添加或者刪除可見的DOM元素
2. 元素位置改變
3. 元素尺寸改變
4. 元素內容改變（例如：一個文本被另外一個不一樣尺寸的圖片替代）
5. 頁面渲染初始化（這個沒法避免）
6. 瀏覽器窗口尺寸改變

這些都是顯而易見的，或許你已經有過這樣的體會，不間斷地改變瀏覽器窗口大小，致使UI反應遲鈍（某些低版本IE下甚至直接掛掉），如今你可能恍然大悟，沒錯，正是一次次的重排重繪致使的！

四、渲染樹變化的排隊和刷新

---

思考下面代碼：

var ele = document.getElementById('myDiv');
ele.style.borderLeft = '1px';
ele.style.borderRight = '2px';
ele.style.padding = '5px';

乍一想，元素的樣式改變了三次，每次改變都會引發重排和重繪，因此總共有三次重排重繪過程，可是瀏覽器並不會這麼笨，它會把三次修改「保存」起來（大多數瀏覽器經過隊列化修改並批量執行來優化重排過程），一次完成！可是，有些時候你可能會（常常是不知不覺）強制刷新隊列並要求計劃任務當即執行。獲取佈局信息的操做會致使隊列刷新，好比：

1. offsetTop, offsetLeft, offsetWidth, offsetHeight
2. scrollTop, scrollLeft, scrollWidth, scrollHeight
3. clientTop, clientLeft, clientWidth, clientHeight
4. 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屬性被請求了，隊列就會當即執行，因此總共有兩次重排與重繪。因此儘可能不要在佈局信息改變時作查詢。

五、最小化重排和重繪

---

咱們仍是看上面的這段代碼：

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';

六、fragment元素的應用

---

看以下代碼，考慮一個問題：

<ul id='fruit'>
  <li> apple </li>
  <li> orange </li>
</ul>

若是代碼中要添加內容爲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。

七、讓元素脫離動畫流

---

用展開/摺疊的方式來顯示和隱藏部分頁面是一種常見的交互模式。它一般包括展開區域的幾何動畫，並將頁面其餘部分推向下方。

通常來講，重排隻影響渲染樹中的一小部分，但也可能影響很大的部分，甚至整個渲染樹。瀏覽器所須要重排的次數越少，應用程序的響應速度就越快。所以當頁面頂部的一個動畫推移頁面整個餘下的部分時，會致使一次代價昂貴的大規模重排，讓用戶感到頁面一頓一頓的。渲染樹中須要從新計算的節點越多，狀況就會越糟。

使用如下步驟能夠避免頁面中的大部分重排：

1. 使用絕對位置定位頁面上的動畫元素，將其脫離文檔流
2. 讓元素動起來。當它擴大時，會臨時覆蓋部分頁面。但這只是頁面一個小區域的重繪過程，不會產生重排並重繪頁面的大部份內容。
3. 當動畫結束時恢復定位，從而只會下移一次文檔的其餘元素

八、總結

---

重排和重繪是DOM編程中耗能的主要緣由之一，平時涉及DOM編程時能夠參考如下幾點：

1. 儘可能不要在佈局信息改變時作查詢（會致使渲染隊列強制刷新）
2. 同一個DOM的多個屬性改變能夠寫在一塊兒（減小DOM訪問，同時把強制渲染隊列刷新的風險降爲0）
3. 若是要批量添加DOM，能夠先讓元素脫離文檔流，操做完後再帶入文檔流，這樣只會觸發一次重排（fragment元素的應用）
4. 將須要屢次重排的元素，position屬性設爲absolute或fixed，這樣此元素就脫離了文檔流，它的變化不會影響到其餘元素。例若有動畫效果的元素就最好設置爲絕對定位。