在Web開發(fā)中，JavaScript的一個(gè)很重要的作用就是對DOM進(jìn)行操作，可你知道么？對DOM的操作是非常昂貴的，因?yàn)檫@會導(dǎo)致瀏 覽器執(zhí)行回流操作，而執(zhí)行了過多的回流操作，你就會發(fā)現(xiàn)自己的網(wǎng)站變得越來越慢了，我們應(yīng)該盡可能的減少DOM操作。本文是這個(gè)系列的最后一篇，給出了一 些指導(dǎo)性原則，比如在什么時(shí)候應(yīng)該對DOM可以進(jìn)行什么樣的操作等。

【原文】 Nicholas C. Zakas - Speed up your JavaScript, Part 4
【譯文】 明達(dá) - 如何提升JavaScript的運(yùn)行速度（DOM篇）

以下是對原文的翻譯：

在 過去的幾周中，我為大家介紹了幾種可以加快JavaScript腳本運(yùn)行速度的技術(shù)。第一節(jié) 介紹了如何優(yōu)化循環(huán)。第二節(jié)的重點(diǎn)放在優(yōu)化函數(shù)內(nèi)部代碼上，還介紹了隊(duì)列（queuing）和記憶化（memoization）兩種技術(shù)，來減輕函數(shù)的工 作負(fù)擔(dān)。第三節(jié)就如何將遞歸轉(zhuǎn)換為迭代循環(huán)或者記憶化方式的話題，展開了討論。第四節(jié)是這個(gè)系列的最后一篇，也就是本文，將重點(diǎn)闡述過多的DOM操作所帶 來的影響。

我們都知道，DOM操作的效率是很低的，而且不是一般的慢，而且這也是引發(fā)性能問題的常見問題之一。為什么會慢呢？因?yàn)閷?DOM的修改為影響網(wǎng)頁的用戶界面，重繪頁面是一項(xiàng)昂貴的操作。太多的DOM操作會導(dǎo)致一系列的重繪操作，為了確保執(zhí)行結(jié)果的準(zhǔn)確性，所有的修改操作是按 順序同步執(zhí)行的。我們稱這個(gè)過程叫做回流（reflow），同時(shí)這也是最昂貴的瀏覽器操作之一。回流操作主要會發(fā)生在幾種情況下：

* 當(dāng)對DOM節(jié)點(diǎn)執(zhí)行新增或者刪除操作時(shí)。
* 動態(tài)設(shè)置一個(gè)樣式時(shí)（比如element.style.width="10px"）。
* 當(dāng)獲取一個(gè)必須經(jīng)過計(jì)算的尺寸值時(shí)，比如訪問offsetWidth、clientHeight或者其他需要經(jīng)過計(jì)算的CSS值（在兼容DOM的瀏覽器中，可以通過getComputedStyle函數(shù)獲??；在IE中，可以通過currentStyle屬性獲取）。

解 決問題的關(guān)鍵，就是限制通過DOM操作所引發(fā)回流的次數(shù)。大部分瀏覽器都不會在JavaScript的執(zhí)行過程中更新DOM。相應(yīng)的，這些瀏覽器將對對 DOM的操作放進(jìn)一個(gè)隊(duì)列，并在JavaScript腳本執(zhí)行完畢以后按順序一次執(zhí)行完畢。也就是說，在JavaScript執(zhí)行的過程中，用戶不能和瀏 覽器進(jìn)行互動，直到一個(gè)回流操作被執(zhí)行。（ 失控腳本對話框會觸發(fā)回流操作，因?yàn)樗麍?zhí)行了一個(gè)中止JavaScript執(zhí)行的操作，此時(shí)會對用戶界面進(jìn)行更新）

如果要減少由于DOM修改帶來的回流操作，有兩個(gè)基本的方法。第一個(gè)就是在對當(dāng)前DOM進(jìn)行操作之前，盡可能多的做一些準(zhǔn)備工作。一個(gè)經(jīng)典的例子就是向document對象中添加很多DOM節(jié)點(diǎn)：

程序代碼

for (var i=0; i < items.length; i++){
var item = document.createElement("li");
item.appendChild(document.createTextNode("Option " + i);
list.appendChild(item);
}

這段代碼的效率是很低的，因?yàn)樗诿看窝h(huán)中都會修改當(dāng)前DOM結(jié)構(gòu)。為了提高性能，我們需要將這個(gè)次數(shù)降到最低，對于這個(gè)案例來說，最好 的辦法是建立一個(gè)文檔碎片（document fragment），作為那些已創(chuàng)建元素元素的臨時(shí)容器，最后一次將容器的內(nèi)容直接添加到父節(jié)點(diǎn)中：

程序代碼

var fragment = document.createDocumentFragment();
for (var i=0; i < items.length; i++){
var item = document.createElement("li");
item.appendChild(document.createTextNode("Option " + i);
fragment.appendChild(item);
}
list.appendChild(fragment);

經(jīng)過調(diào)整的代碼，只會修改一次當(dāng)前DOM的結(jié)構(gòu)，就在最后一行，而在這之前，我們用文檔碎片來保存那些中間結(jié)果。因?yàn)槲臋n碎片沒有任何可見 內(nèi)容，所以這類修改不會觸發(fā)回流操作。實(shí)際上，文檔碎片也不能被添加到DOM中，我們需要將它作為參數(shù)傳給appendChild函數(shù)，而實(shí)際上添加的不 是文檔碎片本身，而是它下面的所有子元素。

避免不必要回流操作的另外一種方法，就是在對DOM操作之前，把要操作的元素，先從當(dāng)前DOM結(jié)構(gòu)中刪除。對于刪除一個(gè)元素，基本有兩種方法：

1.通過removeChild()或者replaceChild()實(shí)現(xiàn)真正意義上的刪除。
2.設(shè)置該元素的display樣式為“none”。

而一旦修改操作完成，上面這個(gè)過程就需要反轉(zhuǎn)過來，將刪除的元素重新添加到當(dāng)前的DOM結(jié)構(gòu)中，我們還是拿上面的例子來做說明：

程序代碼

list.style.display = "none";
for (var i=0; i < items.length; i++){
var item = document.createElement("li");
item.appendChild(document.createTextNode("Option " + i);
list.appendChild(item);
}
list.style.display = "";

將list的display樣式設(shè)置為“none”后，就將這個(gè)元素從當(dāng)前的DOM結(jié)構(gòu)中刪除了，因?yàn)檫@個(gè)節(jié)點(diǎn)不再可視。在將display屬性設(shè)置回之前的默認(rèn)值之前，向其下添加子元素是不會觸發(fā)回流操作的。

另外一個(gè)經(jīng)常引起回流操作的情況是通過style屬性對元素的外觀進(jìn)行修改。比如下面這個(gè)例子：

程序代碼

element.style.backgroundColor = "blue";
element.style.color = "red";
element.style.fontSize = "12em";

這段代碼修改了三個(gè)樣式，同時(shí)也就觸發(fā)了三次回流操作。每次修改元素的style屬性，都肯定會觸發(fā)回流操作。如果你要同時(shí)修改一個(gè)元素的 很多樣式，最好的辦法是將這些樣式放到一個(gè)class下，然后直接修改元素的class，這可比單獨(dú)修改元素的樣式要強(qiáng)得多。比如下面這個(gè)例子：

程序代碼

.newStyle {
background-color: blue;
color: red;
font-size: 12em;
}

這樣我們在JavaScript代碼中，只需下面這行代碼就可以修改樣式：

程序代碼

/*element.className = "newStyle";*/

修改元素的class屬性，會一次將所有的樣式應(yīng)用在目標(biāo)元素上，而且只會觸發(fā)一次回流操作。這樣做不止更加有效，而且還更容易維護(hù)。

既然DOM幾乎在所有情況下都很慢，就很有必要將獲取的DOM數(shù)據(jù)緩存起來。這種方法，不僅對獲取那些會觸發(fā)回流操作的屬性（比如offsetWidth等）尤為重要，就算對于一般情況，也同樣適用。下面介紹一個(gè)效率低的夸張的例子：

程序代碼

document.getElementById("myDiv").style.left = document.getElementById("myDiv").offsetLeft +
document.getElementById("myDiv").offsetWidth + "px";

這里對getElementById()調(diào)用了三次，是一個(gè)很大的問題，訪問DOM是很昂貴的，而這三個(gè)調(diào)用恰恰訪問的是同一個(gè)元素，也許我們像下面這樣寫，會更好一些：

程序代碼

var myDiv = document.getElementById("myDiv");
myDiv.style.left = myDiv.offsetLeft + myDiv.offsetWidth + "px";

我們?nèi)サ袅艘恍┤哂嗖僮?，現(xiàn)在對DOM操作的次數(shù)已經(jīng)被減小了。對于那些使用次數(shù)超過一次的DOM值，我們都應(yīng)該緩沖起來，這樣可以避免無謂的性能消耗。

也 許，拖慢屬性訪問速度的罪魁禍?zhǔn)拙褪荋TMLCollection對象。這些對象是object類型的，只要DOM需要返回一組節(jié)點(diǎn)時(shí)就會使用這個(gè)對象， 也就是說childNodes屬性和getElementsByTagName()的返回值都屬于這種情況。我們可能經(jīng)常會將 HTMLCollection當(dāng)作數(shù)組來使用，但實(shí)際上他是一個(gè)根據(jù)DOM結(jié)構(gòu)自動變化的實(shí)體對象。每次你訪問一個(gè)HTMLCollection對象的屬 性，他都會對DOM內(nèi)所有的節(jié)點(diǎn)進(jìn)行一次完整匹配，這意味著下面的代碼將導(dǎo)致一個(gè)死循環(huán)：

程序代碼

var divs = document.getElementsByTagName("div");
for (var i=0; i < divs.length; i++){//infinite loop
document.body.appendChild(document.createElement("div"));
}

這段代碼為什么會變成死循環(huán)呢？因?yàn)樵诿看窝h(huán)中，將會向document中新增一個(gè)div元素，同時(shí)也會更新divs這個(gè)集合，也就是說 循環(huán)的索引永遠(yuǎn)都不會超過divs.length的值，因?yàn)閐ivs.length的值是伴隨著循環(huán)而遞增的。每次訪問divs.length，就會更新 一次集合對象，這可比訪問一個(gè)普通數(shù)組的length屬性要付出更大的代價(jià)。當(dāng)對HTMLCollection對象進(jìn)行操作時(shí)，應(yīng)該將訪問的次數(shù)盡可能的 降至最低，最簡單的，你可以將length屬性緩存在一個(gè)本地變量中，這樣就能大幅度的提高循環(huán)的效率。

程序代碼

var divs = document.getElementsByTagName("div");
for (var i=0, len=divs.length; i < len; i++){//not an infinite loop
document.body.appendChild(document.createElement("div"));
}

修改后的代碼已經(jīng)不是死循環(huán)了，因?yàn)樵诿看窝h(huán)時(shí)，len的值都是保持固定不變的。將屬性值緩存起來除了更加有效率，還可以保證document不會執(zhí)行多于一次的查詢。

本文是“Speed up your JavaScript”這個(gè)系列的最后一篇文章，我希望你現(xiàn)在已經(jīng)知道如何避免那個(gè)腳本失控的對話框，以及如何讓你的腳本運(yùn)行的更快。我所提到的技巧很多別人已經(jīng)提過了，我只是將它們組織到一起，這樣大家可以更容易的找到這些信息。