動態(tài) HTML （DHTML ）在 Microsoft？ Internet Explorer 4.0中的
引入，使 Web作者和開發(fā)人員可以使用新的編程模型。此后，Web 作者充
分利用了這個強大的特性來提供動態(tài)內(nèi)容、樣式和定位，使 Web用戶得以
體驗豐富的交互式功能。DHTML 的靈活性使得通常會有多種方式可以實現(xiàn)
您的構(gòu)思。理解 Internet Explorer的 HTML 分析和顯示組件如何處理請
求，可幫助您確定完成工作的最佳方法。本文介紹了某些 DHTML功能對性
能的重大影響，并提供了一些提高頁面性能的技巧。
成批處理 DHTML 更改
在 DHTML Web頁面上，提高性能的最有效方法是改進對頁面上 HTML
內(nèi)容的更改。有多種方法可以更新 Web頁面，了解這一點非常重要。從客
戶的反饋來看，Web 作者可以應(yīng)用 HTML 文本塊，也可以通過使用 DHTML
對象模型（英文）或 W3C文檔對象模型（DOM ）（英文）來訪問個別 HTML
元素。無論何時更改 HTML 內(nèi)容，Internet Explorer 的 HTML 分析和顯
示組件都必須重新組織該頁面的內(nèi)部表現(xiàn)形式，重新計算文檔布局和文檔
流，并顯示這些變化。雖然實際性能由 Web頁面的內(nèi)容和您所作的更改決
定，但是這些操作代價都比較大。如果您應(yīng)用 HTML 文本塊，而不是個別
訪問元素，則必須調(diào)用HTML分析器，這將導(dǎo)致額外的性能開銷。接受HTML
文本的方法和屬性包括 insertAdjacentHTML （英文）和 pasteHTML（英
文）方法，以及 innerHTML（英文）和 outerHTML（英文）屬性。
技巧 1：在一個腳本函數(shù)中對 HTML 內(nèi)容進行更改。如果您的設(shè)計使用
了多個事件處理程序（例如響應(yīng)鼠標移動），則應(yīng)集中進行更
改。
HTML分析和顯示組件的另一項重要事實是：一旦腳本返回控制（例如，
當(dāng)腳本事件處理函數(shù)退出時，或者當(dāng)調(diào)用setTimeout（英文）等方法時），
該組件將重新計算布局并顯示W(wǎng)eb頁面。現(xiàn)在您已經(jīng)了解Internet Explorer
如何處理變化，下面將開始提高 Web頁面的性能。
技巧２：建立一個 HTML 字符串并對文檔進行一次更改，而不是進行多
次更新。如果 HTML 內(nèi)容不是必要的，可考慮使用
innerText（英文）屬性。
在以下示例中，速度較慢的方法每次設(shè)置innerHTML屬性時都調(diào)用HTML
分析器。要提高性能，可以先建立一個字符串，然后將其分配給innerHTML
屬性。
慢：
divUpdate.innerHTML = "";
for ( var i=0; i<100; i++ )
{
divUpdate.innerHTML += "這是一個較慢的方法！";
}
快：
var str="";
for ( var i=0; i<100; i++ )
{
str += "因為使用字符串，此方法較快！";
}
divUpdate.innerHTML = str;
使用 innerText
DHTML 對象模型通過 innerText（英文）屬性訪問 HTML 元素的文本
內(nèi)容，而 W3C DOM則提供一個獨立的子文本節(jié)點。直接通過 innerText屬
性更新元素的內(nèi)容，比調(diào)用 DOM createTextNode （英文）方法更快。
技巧 3：使用 innerText 屬性更新文本內(nèi)容。
以下示例顯示了如何使用 innerText 屬性提高性能。
慢：
var node;
for (var i=0; i<100; i++)
{
node = document.createElement( "SPAN" );
node.appendChild( document.createTextNode( "使用 createText
Node() ") );
divUpdate.appendChild( node );
}
快：
var node;
for (var i=0; i<100; i++)
{
node = document.createElement( "SPAN" );
node.innerText = "使用 innerText 屬性";
divUpdate.appendChild( node );
}
使用 DOM 添加單個元素
如前所述，應(yīng)用 HTML 文本的訪問方法將導(dǎo)致調(diào)用 HTML 分析器，從
而會降低性能。因此，使用 createElement（英文）和 insertAdjacent
Element（英文）方法添加元素比調(diào)用一次 insertAdjacentHTML 方法快。
技巧 4：調(diào)用 createElement 和 insertAdjacentElement 方法比調(diào)用
insertAdjacentHTML 方法快。
成批處理 DHTML更新并調(diào)用一次 insertAdjacentHTML 方法可以提高
性能，但是有時直接通過 DOM創(chuàng)建元素效率更高。在下面的方案中，您可
以嘗試一下這兩種方法并確定哪一種更快。
慢：
for (var i=0; i<100; i++)
{
divUpdate.insertAdjacentHTML( "beforeEnd", " 使用 insert
AdjacentHTML() " );
}
快：
var node;
for (var i=0; i<100; i++)
{
node = document.createElement( "SPAN" );
node.innerText = " 使用 insertAdjacentElement() ";
divUpdate.insertAdjacentElement( "beforeEnd", node );
}
擴展 SELECT 元素中的選項
對于上一條使用 HTML 文本方法的規(guī)則來說，將大量OPTION（英文）
元素添加到SELECT（英文）中的情況是一種例外。這時候，使用innerHTML
屬性比調(diào)用createElement方法訪問選項集合效率更高。
技巧 5：使用 innerHTML 將大量選項添加到 SELECT 元素中。
使用字符串連接操作來建立 SELECT 元素的 HTML 文本，然后使用此
技巧設(shè)置 innerHTML屬性。對于數(shù)量特別大的選項，字符串連接操作也會
影響性能。在此情況下，請建立一個數(shù)組并調(diào)用 Microsoft JScript join
（英文）方法來執(zhí)行 OPTION 元素 HTML 文本的最終連接。
慢：
var opt;
divUpdate.innerHTML = "〈SELECT ID=‘selUpdate‘〉";
for (var i=0; i<1000; i++)
{
opt = document.createElement( "OPTION" );
selUpdate.options.add( opt );
opt.innerText = "第 " + i + " 項";
}
快：
var str="〈SELECT ID=‘selUpdate‘〉";
for (var i=0; i<1000; i++)
{
str += "〈OPTION〉第 " + i + " 項〈/OPTION〉";
}
str += "";
divUpdate.innerHTML = str;
更快：
var arr = new Array(1000);
for (var i=0; i<1000; i++)
{
arr[i] = "〈OPTION〉第 " + i + " 項〈/OPTION〉";
}
divUpdate.innerHTML = "〈SELECT ID=‘selUpdate‘〉" + arr.join() + "
";
用 DOM 更新表
使用DOM方法插入表的行和單元格比使用insertRow（英文）和insert
Cell（英文）方法（DHTML table 對象模型的一部分）效率更高。尤其在
創(chuàng)建大的表時，效率上的差別更加明顯。
技巧 6：使用 DOM 方法建立大表。
慢：
var row;
var cell;
for (var i=0; i<100; i++)
{
row = tblUpdate.insertRow();
for (var j=0; j<10; j++)
{
cell = row.insertCell();
cell.innerText = "第 " + i + " 行，第 " + j + " 單元格";
}
}
快：
var row;
var cell;
var tbody = tblUpdate.childNodes[0];
tblUpdate.appendChild( tbody );
for (var i=0; i<100; i++)
{
row = document.createElement( "TR" );
tbody.appendChild( row );
for (var j=0; j<10; j++)
{
cell = document.createElement( "TD" );
row.appendChild( cell );
cell.innerText = "第 " + i + " 行，第 " + j + " 單元格";
}
}
編寫一次，使用多次
如果您的 Web站點使用腳本來執(zhí)行一些常用操作，可以考慮將這些功
能放到獨立的文件中，以便可以由多個 Web頁面重復(fù)使用。這樣做，不僅
可以改善代碼的維護性，而且使該腳本文件保留在瀏覽器的緩存中，從而
只需要在用戶訪問站點時向本地下載一次。將常用的樣式規(guī)則放在獨立的
文件中也可以得到同樣的好處。
技巧 7：通過將常用代碼放到行為或獨立文件中來重用腳本
要更好地利用腳本重用功能，請將常用的腳本操作放到 DHTML附加代
碼或元素行為（英文）中。行為提供了一個有效的方法，用于重用腳本和
建立從 HTML 訪問的組件，并使您可用自己的對象、方法、屬性和事件來
擴展 DHTML對象模型。對于未使用 viewlink （英文）功能的行為，可以
考慮使用 Internet Explorer 5.5中的 lightweight（英文）行為特性進
行更有效的代碼封裝。另外，如果您的腳本代碼在一個 SCRIPT （英文）
塊中，會獲得更高的性能。
請勿過多使用動態(tài)屬性
動態(tài)屬性（英文）為 Web作者提供了一種將表達式用作屬性值的方法。
表達式在運行時計算，其結(jié)果值將應(yīng)用于屬性。這是一個強大的特性。此
特性可用于減少頁面上的腳本數(shù)量，但是因為必須定時重算表達式，而且
該表達式經(jīng)常與其他屬性值相關(guān)，所以它會對性能帶來消極的影響。這種
情況對定位屬性尤其明顯。
技巧 8：限制使用動態(tài)屬性。
數(shù)據(jù)綁定很有效
數(shù)據(jù)綁定（英文）是一個強大的功能，它使您可以將數(shù)據(jù)庫查詢的結(jié)
果或 XML數(shù)據(jù)島（英文）的內(nèi)容，綁定至 Web頁面上的 HTML 元素。您無
需返回服務(wù)器提取數(shù)據(jù)，就可以提供數(shù)據(jù)排序和過濾功能，以及不同的數(shù)
據(jù)視圖。設(shè)想一個 Web頁面可以將公司的數(shù)據(jù)顯示為折線圖、條形圖或餅
圖，還具有將數(shù)據(jù)按辦公室、產(chǎn)品或銷售階段排序的按鈕，而且所有這些
功能只需要訪問一次服務(wù)器就能實現(xiàn)。
技巧 9：使用數(shù)據(jù)綁定來提供豐富的客戶端數(shù)據(jù)視圖。
不要在 document 對象中設(shè)置 expando 屬性
expando （英文）屬性可以添加至任何對象。此屬性非常有用，它可
以存儲當(dāng)前 Wed頁面內(nèi)的信息，并提供了另一種擴展 DHTML對象模型的方
法。例如，您可以給 DHTML元素指定一個 clicked屬性，用此屬性提示用
戶已經(jīng)單擊了哪一個元素。在引發(fā)事件時，也可以使用 expando屬性，向
事件處理函數(shù)提供更多的上下文信息。無論您如何使用 expando屬性，切
記不要在 document （英文）對象上設(shè)置它們。如果您這樣做，則當(dāng)您訪
問該屬性時，文檔必須執(zhí)行額外的重算操作。
技巧 10：在 window（英文）對象上設(shè)置 expando 屬性。
慢：
for (var i=0; i<1000; i++)
{
var tmp;
window.document.myProperty = "第 " + i + " 項";
tmp = window.document.myProperty;
}
快：
for (var i=0; i<1000; i++)
{
var tmp;
window.myProperty = "第 " + i + " 項";
tmp = window.myProperty;
}
避免切換類和樣式規(guī)則
切換類和樣式規(guī)則是一種代價非常高的操作，需要重新計算并調(diào)整整
個文檔的布局。如果您的 Web站點使用樣式表來提供內(nèi)容的備用視圖，可
以考慮直接修改要更改的元素的 style（英文）對象，而不是修改元素的
className （英文）屬性或與類關(guān)聯(lián)的 styleSheet （英文）對象。
技巧 11：在更改內(nèi)容的外觀時，直接修改 style 對象。
查找父項之前，先折疊文本范圍
TextRange （英文）對象表示用戶選定或從 HTML 元素中檢索的一個
文本區(qū)域，例如 BODY （英文）。通過調(diào)用 parentElement（英文）方法，
可以標識文本范圍的父項。對于復(fù)雜的文本范圍，在調(diào)用 parentElement
方法之前，先調(diào)用 collapse （英文）方法效率會更高。
技巧 12：在訪問 parentElement 方法之前，先折疊文本范圍。
本站僅提供存儲服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請
點擊舉報。
