這篇文章給大家介紹如何進行高性能JavaScript DOM編程以及重排與重繪，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

創(chuàng)新互聯(lián)公司-專業(yè)網站定制、快速模板網站建設、高性價比順平網站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式順平網站制作公司更省心,省錢,快速模板網站建設找我們，業(yè)務覆蓋順平地區(qū)。費用合理售后完善，10多年實體公司更值得信賴。

我們知道，DOM是用于操作XML 和HTML文檔的應用程序接口，用腳本進行DOM操作的代價很昂貴。有個貼切的比喻，把DOM和JavaScript（這里指ECMScript）各自想 象為一個島嶼，它們之間用收費橋梁連接，ECMAScript每次訪問DOM，都要途徑這座橋，并交納“過橋費”,訪問DOM的次數越多，費用也就越高。 因此，推薦的做法是盡量減少過橋的次數，努力待在ECMAScript島上。我們不可能不用DOM的接口，那么，怎樣才能提高程序的效率？

1、DOM訪問與修改

訪問DOM元素是有代價的（“過橋費”你懂的），修改元素代價更是昂貴，因為它會導致瀏覽器重新計算頁面的幾何變化（重排和重繪）。

當然最壞的情況是在循環(huán)中訪問或者修改元素，看下面兩段代碼：

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++) {
  str += 'a';
}
document.getElementById('myDiv2').innerHTML = str;
console.timeEnd(2);

結果***次運行的時間居然是第二次的千倍！(chrome 版本 44.0.2403.130 m)

1: 2846.700ms
2: 1.046ms

***段代碼的問題在于，每次循環(huán)迭代，該元素都會被訪問兩次：一次讀取innerHTML的值，另一次重寫它，也就是說，每次循環(huán)都在過橋（重排和重繪將在下一篇講解）！結果充分表明，訪問DOM的次數越多，代碼的運行速度越慢。因此，能減少DOM訪問的次數則盡量減少，盡量留在ECMAScript這端處理。

2、HTML集合 & 遍歷DOM

操作DOM另一個耗能點就是遍歷DOM，一般我們會收集一個HTML集合，比如用getElementsByTagName()，或者用document.links等，我想大家對此都不陌生。收集的結果是一個類似數組的集合，它處于一種“實時狀態(tài)”實時存在，這意味著當底層文檔對象更新時，它也會自動更新。怎么講？很簡單舉個栗子：

   
• apple

   
• orange

   
• banana

 

而這正是低效之源！很簡單，跟數組的優(yōu)化操作一樣，緩存?zhèn)€length變量就ok了（讀取一個集合的length比讀取一個普通數組的lengh要慢很多，因為每次都要查詢）：

console.time(0);
var lis0 = document.getElementsByTagName('li');
var str0 = '';
for(var i = 0; i < lis0.length; i++) {
  str0 += lis0[i].innerHTML;
}
console.timeEnd(0);


console.time(1);
var lis1 = document.getElementsByTagName('li');
var str1 = '';
for(var i = 0, len = lis1.length; i < len; i++) {
  str1 += lis1[i].innerHTML;
}
console.timeEnd(1);

我們看看性能提升能有多少？

0: 0.974ms
1: 0.664ms

當集合的長度大的時候（demo是1000），性能提升還是很明顯的。

而《高性能JavaScript》提出了另一個優(yōu)化策略，它指出，“由于遍歷數組比遍歷集合快，因此如果先將集合元素拷貝到數組中，那么訪問它的屬性會更快”，經過測試，并沒有很好地發(fā)現(xiàn)這個規(guī)律，所以還是不要多此一舉了，測試代碼如下：（有疑義歡迎與我交流探討）

console.time(1);
var lis1 = document.getElementsByTagName('li');
var str1 = '';
for(var i = 0, len = lis1.length; i < len; i++) {
  str1 += lis1[i].innerHTML;
}
console.timeEnd(1);


console.time(2);
var lis2 = document.getElementsByTagName('li');
var a = [];
for(var i = 0, len = lis2.length; i < len; i++)
  a[i] = lis2[i];

var str2 = '';
for(var i = 0, len = a.length; i < len; i++) {
  str2 += a[i].innerHTML;
}
console.timeEnd(2);

本節(jié)的***介紹兩個原生DOM方法，querySelector()和querySelectorAll()，相信大家都不陌生，前者返回一個數組（注意，它們的返回值不像HTML集合一樣會動態(tài)變化），后者返回匹配的***個元素。好吧，其實并不是所有時候它的性能都優(yōu)于前者的HTML集合遍歷。

console.time(1);
var lis1 = document.getElementsByTagName('li');
console.timeEnd(1);

console.time(2);
var lis2 = document.querySelectorAll('li');
console.timeEnd(2);

// 1: 0.038ms
// 2: 3.957ms

但是因為它是類似CSS的選擇方法，所以在做組合選擇的時候，效率會提升，又方便。比如做如下的組合查詢：

var elements = document.querySelectorAll('#menu a');
var elements = document.querySelectorAll('div.warning, div.notice');

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

1、什么是重排和重繪

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

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

當DOM的變化影響了元素的幾何屬性（寬或高），瀏覽器需要重新計算元素的幾何屬性，同樣其他元素的幾何屬性和位置也會因此受到影響。瀏覽器會使渲染樹中受到影響的部分失效，并重新構造渲染樹。這個過程稱為重排。完成重排后，瀏覽器會重新繪制受影響的部分到屏幕，該過程稱為重繪。由于瀏覽器的流布局，對渲染樹的計算通常只需要遍歷一次就可以完成。但table及其內部元素除外，它可能需要多次計算才能確定好其在渲染樹中節(jié)點的屬性，通常要花3倍于同等元素的時間。這也是為什么我們要避免使用table做布局的一個原因。

并不是所有的DOM變化都會影響幾何屬性，比如改變一個元素的背景色并不會影響元素的寬和高，這種情況下只會發(fā)生重繪。

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

重排和重繪的代價有多大？我們再回到前文那個過橋的例子上，細心的你可能會發(fā)現(xiàn)了，千倍的時間差并不是由于“過橋”一手造成的，每次“過橋”其實都伴隨著重排和重繪，而耗能的絕大部分也正是在這里!

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、重排何時發(fā)生

很顯然，每次重排，必然會導致重繪，那么，重排會在哪些情況下發(fā)生？

1. 添加或者刪除可見的DOM元素

2. 元素位置改變

3. 元素尺寸改變

4. 元素內容改變（例如：一個文本被另一個不同尺寸的圖片替代）

5. 頁面渲染初始化（這個無法避免）

6. 瀏覽器窗口尺寸改變

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

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

思考下面代碼：

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

乍一想，元素的樣式改變了三次，每次改變都會引起重排和重繪，所以總共有三次重排重繪過程，但是瀏覽器并不會這么笨，它會把三次修改“保存”起來 （大多數瀏覽器通過隊列化修改并批量執(zhí)行來優(yōu)化重排過程），一次完成！但是，有些時候你可能會（經常是不知不覺）強制刷新隊列并要求計劃任務立即執(zhí)行。獲 取布局信息的操作會導致隊列刷新，比如：

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屬性需要返回***的布局信息，因此瀏覽器不得不執(zhí)行渲染隊列中的“待處理變化”并觸發(fā)重排以返回正確的值（即使隊列中 改變的樣式屬性和想要獲取的屬性值并沒有什么關系），所以上面的代碼，前兩次的操作會緩存在渲染隊列中待處理，但是一旦offsetHeight屬性被請 求了，隊列就會立即執(zhí)行，所以總共有兩次重排與重繪。所以盡量不要在布局信息改變時做查詢。

5、最小化重排和重繪

我們還是看上面的這段代碼：

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

三個樣式屬性被改變，每一個都會影響元素的幾何結構，雖然大部分現(xiàn)代瀏覽器都做了優(yōu)化，只會引起一次重排，但是像上文一樣，如果一個及時的屬性被請求，那么就會強制刷新隊列，而且這段代碼四次訪問DOM，一個很顯然的優(yōu)化策略就是把它們的操作合成一次，這樣只會修改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元素，***再顯示，但是實際操作中可能會出現(xiàn)閃動，原因這也很容易理解。這時，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對象，它的設計初衷就是為了完成這類任務——更新和移動節(jié)點。文檔片段的一個便利的語法特性是當你附加一個片斷到節(jié)點時，實際上被添加的是該片斷的子節(jié)點，而不是片斷本身。只觸發(fā)了一次重排，而且只訪問了一次實時的DOM。

7、讓元素脫離動畫流

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

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

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

1. 使用絕對位置定位頁面上的動畫元素，將其脫離文檔流

2. 讓元素動起來。當它擴大時，會臨時覆蓋部分頁面。但這只是頁面一個小區(qū)域的重繪過程，不會產生重排并重繪頁面的大部分內容。

3. 當動畫結束時恢復定位，從而只會下移一次文檔的其他元素

8、總結

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

1. 盡量不要在布局信息改變時做查詢（會導致渲染隊列強制刷新）

2. 同一個DOM的多個屬性改變可以寫在一起（減少DOM訪問，同時把強制渲染隊列刷新的風險降為0）

3. 如果要批量添加DOM，可以先讓元素脫離文檔流，操作完后再帶入文檔流，這樣只會觸發(fā)一次重排（fragment元素的應用）

4. 將需要多次重排的元素，position屬性設為absolute或fixed，這樣此元素就脫離了文檔流，它的變化不會影響到其他元素。例如有動畫效果的元素就設置為絕對定位。

關于如何進行高性能JavaScript DOM編程以及重排與重繪就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。