歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

高性能JavaScript 重排與重繪

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

高性能JavaScript編程(高清PDF原版)及中英文對照版 PDF  http://www.linuxidc.com/Linux/2015-08/121418.htm

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、重排何時發生


很顯然,每次重排,必然會導致重繪,那麼,重排會在哪些情況下發生?

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

這些都是顯而易見的,或許你已經有過這樣的體會,不間斷地改變浏覽器窗口大小,導致UI反應遲鈍(某些低版本IE下甚至直接掛掉),現在你可能恍然大悟,沒錯,正是一次次的重排重繪導致的!

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


思考下面代碼:

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屬性被請求了,隊列就會立即執行,所以總共有兩次重排與重繪。所以盡量不要在布局信息改變時做查詢

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元素的應用


看如下代碼,考慮一個問題:

<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。

7、讓元素脫離動畫流


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

一般來說,重排只影響渲染樹中的一小部分,但也可能影響很大的部分,甚至整個渲染樹。浏覽器所需要重排的次數越少,應用程序的響應速度就越快。因此當頁面頂部的一個動畫推移頁面整個余下的部分時,會導致一次代價昂貴的大規模重排,讓用戶感到頁面一頓一頓的。渲染樹中需要重新計算的節點越多,情況就會越糟。

使用以下步驟可以避免頁面中的大部分重排:

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

8、總結


重排和重繪是DOM編程中耗能的主要原因之一,平時涉及DOM編程時可以參考以下幾點:

  1. 盡量不要在布局信息改變時做查詢(會導致渲染隊列強制刷新)
  2. 同一個DOM的多個屬性改變可以寫在一起(減少DOM訪問,同時把強制渲染隊列刷新的風險降為0)
  3. 如果要批量添加DOM,可以先讓元素脫離文檔流,操作完後再帶入文檔流,這樣只會觸發一次重排(fragment元素的應用)
  4. 將需要多次重排的元素,position屬性設為absolute或fixed,這樣此元素就脫離了文檔流,它的變化不會影響到其他元素。例如有動畫效果的元素就最好設置為絕對定位。

JavaScript高級程序設計(第3版)高清完整PDF中文+英文+源碼  http://www.linuxidc.com/Linux/2014-09/107426.htm

Copyright © Linux教程網 All Rights Reserved