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