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