高性能JavaScript DOM編程以及重排與重繪
我們知道，DOM是用于操作XML 和HTML文檔的應(yīng)用程序接口，用腳本進(jìn)行DOM操作的代價(jià)很昂貴。有個(gè)貼切的比喻，把DOM和JavaScript（這里指ECMScript）各自想 象為一個(gè)島嶼，它們之間用收費(fèi)橋梁連接，ECMAScript每次訪問(wèn)DOM，都要途徑這座橋，并交納“過(guò)橋費(fèi)”,訪問(wèn)DOM的次數(shù)越多，費(fèi)用也就越高。 因此，推薦的做法是盡量減少過(guò)橋的次數(shù)，努力待在ECMAScript島上。我們不可能不用DOM的接口，那么，怎樣才能提高程序的效率？
1、DOM訪問(wèn)與修改
訪問(wèn)DOM元素是有代價(jià)的（“過(guò)橋費(fèi)”你懂的），修改元素代價(jià)更是昂貴，因?yàn)樗鼤?huì)導(dǎo)致瀏覽器重新計(jì)算頁(yè)面的幾何變化（重排和重繪）。
當(dāng)然最壞的情況是在循環(huán)中訪問(wè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);
結(jié)果***次運(yùn)行的時(shí)間居然是第二次的千倍！(chrome 版本 44.0.2403.130 m)
1: 2846.700ms
2: 1.046ms
***段代碼的問(wèn)題在于，每次循環(huán)迭代，該元素都會(huì)被訪問(wèn)兩次：一次讀取innerHTML的值，另一次重寫(xiě)它，也就是說(shuō)，每次循環(huán)都在過(guò)橋（重排和重繪將在下一篇講解）！結(jié)果充分表明，訪問(wèn)DOM的次數(shù)越多，代碼的運(yùn)行速度越慢。因此，能減少DOM訪問(wèn)的次數(shù)則盡量減少，盡量留在ECMAScript這端處理。
2、HTML集合 & 遍歷DOM
操作DOM另一個(gè)耗能點(diǎn)就是遍歷DOM，一般我們會(huì)收集一個(gè)HTML集合，比如用getElementsByTagName()，或者用document.links等，我想大家對(duì)此都不陌生。收集的結(jié)果是一個(gè)類似數(shù)組的集合，它處于一種“實(shí)時(shí)狀態(tài)”實(shí)時(shí)存在，這意味著當(dāng)?shù)讓游臋n對(duì)象更新時(shí)，它也會(huì)自動(dòng)更新。怎么講？很簡(jiǎn)單舉個(gè)栗子：
<body>
<ul id='fruit'>
<li> apple </li>
<li> orange </li>
<li> banana </li>
</ul>
</body>
<script type="text/javascript"> var lis = document.getElementsByTagName('li'); var peach = document.createElement('li'); peach.innerHTML = 'peach'; document.getElementById('fruit').appendChild(peach); console.log(lis.length); // 4 </script>
而這正是低效之源！很簡(jiǎn)單，跟數(shù)組的優(yōu)化操作一樣，緩存?zhèn)€length變量就ok了（讀取一個(gè)集合的length比讀取一個(gè)普通數(shù)組的lengh要慢很多，因?yàn)槊看味家樵儯?/p>
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
當(dāng)集合的長(zhǎng)度大的時(shí)候（demo是1000），性能提升還是很明顯的。
而《高性能JavaScript》提出了另一個(gè)優(yōu)化策略，它指出，“由于遍歷數(shù)組比遍歷集合快，因此如果先將集合元素拷貝到數(shù)組中，那么訪問(wèn)它的屬性會(huì)更快”，經(jīng)過(guò)測(cè)試，并沒(méi)有很好地發(fā)現(xiàn)這個(gè)規(guī)律，所以還是不要多此一舉了，測(cè)試代碼如下：（有疑義歡迎與我交流探討）
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é)的***介紹兩個(gè)原生DOM方法，querySelector()和querySelectorAll()，相信大家都不陌生，前者返回一個(gè)數(shù)組（注意，它們的返回值不像HTML集合一樣會(huì)動(dòng)態(tài)變化），后者返回匹配的***個(gè)元素。好吧，其實(shí)并不是所有時(shí)候它的性能都優(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
但是因?yàn)樗穷愃艭SS的選擇方法，所以在做組合選擇的時(shí)候，效率會(huì)提升，又方便。比如做如下的組合查詢：
var elements = document.querySelectorAll('#menu a');
var elements = document.querySelectorAll('div.warning, div.notice');
#p#
先回顧下前文高性能JavaScript DOM編程，主要提了兩點(diǎn)優(yōu)化，一是盡量減少DOM的訪問(wèn)，而把運(yùn)算放在ECMAScript這一端，二是盡量緩存局部變量，比如length等等，***介紹了兩個(gè)新的API querySelector()以及querySelectorAll()，在做組合選擇的時(shí)候可以大膽使用。而本文主要講的是DOM編程可能最耗時(shí)的地方，重排和重繪。
1、什么是重排和重繪
瀏覽器下載完頁(yè)面中的所有組件——HTML標(biāo)記、JavaScript、CSS、圖片之后會(huì)解析生成兩個(gè)內(nèi)部數(shù)據(jù)結(jié)構(gòu)——DOM樹(shù)和渲染樹(shù)。
DOM樹(shù)表示頁(yè)面結(jié)構(gòu)，渲染樹(shù)表示DOM節(jié)點(diǎn)如何顯示。DOM樹(shù)中的每一個(gè)需要顯示的節(jié)點(diǎn)在渲染樹(shù)種至少存在一個(gè)對(duì)應(yīng)的節(jié)點(diǎn)（隱藏的DOM元素 disply值為none 在渲染樹(shù)中沒(méi)有對(duì)應(yīng)的節(jié)點(diǎn)）。渲染樹(shù)中的節(jié)點(diǎn)被稱為“幀”或“盒",符合CSS模型的定義，理解頁(yè)面元素為一個(gè)具有填充，邊距，邊框和位置的盒子。一旦 DOM和渲染樹(shù)構(gòu)建完成，瀏覽器就開(kāi)始顯示（繪制）頁(yè)面元素。
當(dāng)DOM的變化影響了元素的幾何屬性（寬或高），瀏覽器需要重新計(jì)算元素的幾何屬性，同樣其他元素的幾何屬性和位置也會(huì)因此受到影響。瀏覽器會(huì)使渲染樹(shù)中受到影響的部分失效，并重新構(gòu)造渲染樹(shù)。這個(gè)過(guò)程稱為重排。完成重排后，瀏覽器會(huì)重新繪制受影響的部分到屏幕，該過(guò)程稱為重繪。由于瀏覽器的流布局，對(duì)渲染樹(shù)的計(jì)算通常只需要遍歷一次就可以完成。但table及其內(nèi)部元素除外，它可能需要多次計(jì)算才能確定好其在渲染樹(shù)中節(jié)點(diǎn)的屬性，通常要花3倍于同等元素的時(shí)間。這也是為什么我們要避免使用table做布局的一個(gè)原因。
并不是所有的DOM變化都會(huì)影響幾何屬性，比如改變一個(gè)元素的背景色并不會(huì)影響元素的寬和高，這種情況下只會(huì)發(fā)生重繪。
2、重排和重繪的代價(jià)究竟多大
重排和重繪的代價(jià)有多大？我們?cè)倩氐?a >前文那個(gè)過(guò)橋的例子上，細(xì)心的你可能會(huì)發(fā)現(xiàn)了，千倍的時(shí)間差并不是由于“過(guò)橋”一手造成的，每次“過(guò)橋”其實(shí)都伴隨著重排和重繪，而耗能的絕大部分也正是在這里!
var times = 15000;
// code1 每次過(guò)橋+重排+重繪
console.time(1);
for(var i = 0; i < times; i++) {
document.getElementById('myDiv1').innerHTML += 'a';
}
console.timeEnd(1);
// code2 只過(guò)橋
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
數(shù)據(jù)是不會(huì)撒謊的，看到了吧，多次訪問(wèn)DOM對(duì)于重排和重繪來(lái)說(shuō)，耗時(shí)簡(jiǎn)直不值一提了。
3、重排何時(shí)發(fā)生
很顯然，每次重排，必然會(huì)導(dǎo)致重繪，那么，重排會(huì)在哪些情況下發(fā)生？
-
添加或者刪除可見(jiàn)的DOM元素
-
元素位置改變
-
元素尺寸改變
-
元素內(nèi)容改變（例如：一個(gè)文本被另一個(gè)不同尺寸的圖片替代）
-
頁(yè)面渲染初始化（這個(gè)無(wú)法避免）
-
瀏覽器窗口尺寸改變
這些都是顯而易見(jiàn)的，或許你已經(jīng)有過(guò)這樣的體會(huì)，不間斷地改變?yōu)g覽器窗口大小，導(dǎo)致UI反應(yīng)遲鈍（某些低版本IE下甚至直接掛掉），現(xiàn)在你可能恍然大悟，沒(méi)錯(cuò)，正是一次次的重排重繪導(dǎo)致的！
4、渲染樹(shù)變化的排隊(duì)和刷新
思考下面代碼：
var ele = document.getElementById('myDiv');
ele.style.borderLeft = '1px';
ele.style.borderRight = '2px';
ele.style.padding = '5px';
乍一想，元素的樣式改變了三次，每次改變都會(huì)引起重排和重繪，所以總共有三次重排重繪過(guò)程，但是瀏覽器并不會(huì)這么笨，它會(huì)把三次修改“保存”起來(lái) （大多數(shù)瀏覽器通過(guò)隊(duì)列化修改并批量執(zhí)行來(lái)優(yōu)化重排過(guò)程），一次完成！但是，有些時(shí)候你可能會(huì)（經(jīng)常是不知不覺(jué)）強(qiáng)制刷新隊(duì)列并要求計(jì)劃任務(wù)立即執(zhí)行。獲 取布局信息的操作會(huì)導(dǎo)致隊(duì)列刷新，比如：
-
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';
因?yàn)閛ffsetHeight屬性需要返回***的布局信息，因此瀏覽器不得不執(zhí)行渲染隊(duì)列中的“待處理變化”并觸發(fā)重排以返回正確的值（即使隊(duì)列中 改變的樣式屬性和想要獲取的屬性值并沒(méi)有什么關(guān)系），所以上面的代碼，前兩次的操作會(huì)緩存在渲染隊(duì)列中待處理，但是一旦offsetHeight屬性被請(qǐng) 求了，隊(duì)列就會(huì)立即執(zhí)行，所以總共有兩次重排與重繪。所以盡量不要在布局信息改變時(shí)做查詢。
5、最小化重排和重繪
我們還是看上面的這段代碼：
var ele = document.getElementById('myDiv');
ele.style.borderLeft = '1px';
ele.style.borderRight = '2px';
ele.style.padding = '5px';
三個(gè)樣式屬性被改變，每一個(gè)都會(huì)影響元素的幾何結(jié)構(gòu)，雖然大部分現(xiàn)代瀏覽器都做了優(yōu)化，只會(huì)引起一次重排，但是像上文一樣，如果一個(gè)及時(shí)的屬性被請(qǐng)求，那么就會(huì)強(qiáng)制刷新隊(duì)列，而且這段代碼四次訪問(wèn)DOM，一個(gè)很顯然的優(yōu)化策略就是把它們的操作合成一次，這樣只會(huì)修改DOM一次：
var ele = document.getElementById('myDiv');
// 1. 重寫(xiě)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元素的應(yīng)用
看如下代碼，考慮一個(gè)問(wèn)題：
<ul id='fruit'>
<li> apple </li>
<li> orange </li>
</ul>
如果代碼中要添加內(nèi)容為peach、watermelon兩個(gè)選項(xiàng)，你會(huì)怎么做？
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);
很容易想到如上代碼，但是很顯然，重排了兩次，怎么破？前面我們說(shuō)了，隱藏的元素不在渲染樹(shù)中，太棒了，我們可以先把id為fruit的ul元素隱藏（display=none)，然后添加li元素，***再顯示，但是實(shí)際操作中可能會(huì)出現(xiàn)閃動(dòng)，原因這也很容易理解。這時(shí)，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);
文檔片段是個(gè)輕量級(jí)的document對(duì)象，它的設(shè)計(jì)初衷就是為了完成這類任務(wù)——更新和移動(dòng)節(jié)點(diǎn)。文檔片段的一個(gè)便利的語(yǔ)法特性是當(dāng)你附加一個(gè)片斷到節(jié)點(diǎn)時(shí)，實(shí)際上被添加的是該片斷的子節(jié)點(diǎn)，而不是片斷本身。只觸發(fā)了一次重排，而且只訪問(wèn)了一次實(shí)時(shí)的DOM。
7、讓元素脫離動(dòng)畫(huà)流
用展開(kāi)/折疊的方式來(lái)顯示和隱藏部分頁(yè)面是一種常見(jiàn)的交互模式。它通常包括展開(kāi)區(qū)域的幾何動(dòng)畫(huà)，并將頁(yè)面其他部分推向下方。
一般來(lái)說(shuō)，重排只影響渲染樹(shù)中的一小部分，但也可能影響很大的部分，甚至整個(gè)渲染樹(shù)。瀏覽器所需要重排的次數(shù)越少，應(yīng)用程序的響應(yīng)速度就越快。因此 當(dāng)頁(yè)面頂部的一個(gè)動(dòng)畫(huà)推移頁(yè)面整個(gè)余下的部分時(shí)，會(huì)導(dǎo)致一次代價(jià)昂貴的大規(guī)模重排，讓用戶感到頁(yè)面一頓一頓的。渲染樹(shù)中需要重新計(jì)算的節(jié)點(diǎn)越多，情況就會(huì) 越糟。
使用以下步驟可以避免頁(yè)面中的大部分重排：
-
使用絕對(duì)位置定位頁(yè)面上的動(dòng)畫(huà)元素，將其脫離文檔流
-
讓元素動(dòng)起來(lái)。當(dāng)它擴(kuò)大時(shí)，會(huì)臨時(shí)覆蓋部分頁(yè)面。但這只是頁(yè)面一個(gè)小區(qū)域的重繪過(guò)程，不會(huì)產(chǎn)生重排并重繪頁(yè)面的大部分內(nèi)容。
-
當(dāng)動(dòng)畫(huà)結(jié)束時(shí)恢復(fù)定位，從而只會(huì)下移一次文檔的其他元素
8、總結(jié)
重排和重繪是DOM編程中耗能的主要原因之一，平時(shí)涉及DOM編程時(shí)可以參考以下幾點(diǎn)：
-
盡量不要在布局信息改變時(shí)做查詢（會(huì)導(dǎo)致渲染隊(duì)列強(qiáng)制刷新）
-
同一個(gè)DOM的多個(gè)屬性改變可以寫(xiě)在一起（減少DOM訪問(wèn)，同時(shí)把強(qiáng)制渲染隊(duì)列刷新的風(fēng)險(xiǎn)降為0）
-
如果要批量添加DOM，可以先讓元素脫離文檔流，操作完后再帶入文檔流，這樣只會(huì)觸發(fā)一次重排（fragment元素的應(yīng)用）
-
將需要多次重排的元素，position屬性設(shè)為absolute或fixed，這樣此元素就脫離了文檔流，它的變化不會(huì)影響到其他元素。例如有動(dòng)畫(huà)效果的元素就***設(shè)置為絕對(duì)定位。
