網頁效能管理：重繪和重排

weixin_33976072發表於2017-08-18
網頁

網頁生成的過程

要理解網頁效能為什麼不好，就要了解網頁是怎麼生成的。

網頁的生成過程，大致可以分成五步：
1.HTML程式碼轉化成DOM。
2.CSS程式碼轉化成CSSOM（CSS Object Model）。
3.結合DOM和CSSOM，生成一棵渲染樹（包含每個節點的視覺資訊）。
4.生成佈局（layout），即將所有渲染樹的所有節點進行平面合成。
5.將佈局繪製（paint）在螢幕上。

"生成佈局"（flow）和"繪製"（paint）這兩步，合稱為"渲染"（render）。

重排和重繪

網頁生成的時候，至少會渲染一次。使用者訪問的過程中，還會不斷重新渲染。

重新渲染，就需要重新生成佈局和重新繪製。前者叫做重排（reflow），後者叫做重繪（repaint）。

需要注意的是，重繪不一定需要重排，重排必然導致重繪。

對於效能的影響

提高網頁效能，就是要降低"重排"和"重繪"的頻率和成本，儘量少觸發重新渲染。

DOM變動和樣式變動，都會觸發重新渲染。但是，瀏覽器已經很智慧了，會盡量把所有的變動集中在一起，排成一個佇列，然後一次性執行，儘量避免多次重新渲染。

div.style.color = 'blue';
div.style.marginTop = '30px';

上面程式碼中，div元素有兩個樣式變動，但是瀏覽器只會觸發一次重排和重繪。

如果寫得不好，就會觸發兩次重排和重繪。

div.style.color = 'blue';
var margin = parseInt(div.style.marginTop);
div.style.marginTop = (margin + 10) + 'px';

上面程式碼對div元素設定背景色以後，第二行要求瀏覽器給出該元素的位置，所以瀏覽器不得不立即重排。

一般來說，樣式的寫操作之後，如果有下面這些屬性的讀操作，都會引發瀏覽器立即重新渲染。

offsetTop/offsetLeft/offsetWidth/offsetHeight
scrollTop/scrollLeft/scrollWidth/scrollHeight
clientTop/clientLeft/clientWidth/clientHeight
getComputedStyle()

所以，從效能角度考慮，儘量不要把讀操作和寫操作，放在一個語句裡面。

// bad
div.style.left = div.offsetLeft + 10 + "px";
div.style.top = div.offsetTop + 10 + "px";

// good
var left = div.offsetLeft;
var top  = div.offsetTop;
div.style.left = left + 10 + "px";
div.style.top = top + 10 + "px";

一般的規則是：

  • 樣式表越簡單，重排和重繪就越快。
  • 重排和重繪的DOM元素層級越高，成本就越高。
  • table元素的重排和重繪成本，要高於div元素。

重排何時發生

  • 新增或者刪除可見的DOM元素。
  • 元素位置改變。
  • 元素尺寸改變。
  • 元素內容改變（例如：一個文字被另一個不同尺寸的圖片替代）。
  • 頁面渲染初始化（這個無法避免）。
  • 瀏覽器視窗尺寸改變。

最小化重繪和重排

  • DOM的多個讀操作（或多個寫操作），應該放在一起。不要兩個讀操作之間，加入一個寫操作。

  • 如果某個樣式是通過重排得到的，那麼最好快取結果。避免下一次用到的時候，瀏覽器又要重排。

  • 不要一條條地改變樣式，而要通過改變class，或者csstext屬性，一次性地改變樣式。

// bad
var left = 10;
var top = 10;
el.style.left = left + "px";
el.style.top  = top  + "px";

// good 
el.className += " theclassname";

// good
el.style.cssText += "; left: " + left + "px; top: " + top + "px;";
  • 儘量使用離線DOM，而不是真實的網面DOM，來改變元素樣式。比如，操作Document Fragment物件，完成後再把這個物件加入DOM。再比如，使用 cloneNode()方法，在克隆的節點上進行操作，然後再用克隆的節點替換原始節點。
<ul id='fruit'>
    <li> apple </li> 
    <li> orange </li>
</ul>

如果程式碼中要新增內容為peach、watermelon兩個選項，你會怎麼做？

let lis = document.getElementById('fruit');
let li=document.createElement('li');
li.innerHTML='apple';
lis.appendChild(li);

let li = document.createElement('li');
li.innerHTML = 'watermelon';
lis.appendChild(li);

很容易想到如上程式碼，但是很顯然，重排了兩次，怎麼破？
前面我們說了，隱藏的元素不在渲染樹中，太棒了，我們可以先把id為fruit的ul元素隱藏（display=none)，然後新增li元素，最後再顯示，但是實際操作中可能會出現閃動，原因這也很容易理解。

這時，fragment元素就有了用武之地了。

let fragment = document.createDocumentFragment();

let li = document.createElement('li');
li.innerHTML = 'apple';
fragment.appendChild(li);

let li = document.createElement('li');
li.innerHTML = 'watermelon';
fragment.appendChild(li);

document.getElementById('fruit').appendChild(fragment);

文件片段是個輕量級的document物件，它的設計初衷就是為了完成這類任務——更新和移動節點。文件片段的一個便利的語法特性是當你附加一個片斷到節點時，實際上被新增的是該片斷的子節點，而不是片斷本身。只觸發了一次重排，而且只訪問了一次實時的DOM。

  • 先將元素設為display: none（需要1次重排和重繪），然後對這個節點進行100次操作，最後再恢復顯示（需要1次重排和重繪）。這樣一來，你就用兩次重新渲染，取代了可能高達100次的重新渲染。

  • position屬性為absolute或fixed的元素，重排的開銷會比較小，因為不用考慮它對其他元素的影響。

  • 只在必要的時候，才將元素的display屬性為可見，因為不可見的元素不影響重排和重繪。另外，visibility : hidden的元素只對重繪有影響，不影響重排。

  • 使用虛擬DOM的指令碼庫，比如React等。

  • 使用window.requestAnimationFrame()、window.requestIdleCallback()這兩個方法調節重新渲染.

參考文件：
高效能JavaScript 重排與重繪
網頁效能管理詳解

相關文章