聯盟電腦摘要：本文說明了某些dhtml功能對效能的重大影響，並提供了一些提高dhtml頁面效能的技巧。
目錄 簡介
成批處理dhtml更改
使用innertext
使用dom新增單個元素
擴充套件select元素中的選項
用dom更新表
編寫一次，使用多次
請勿過多使用動態屬性
資料繫結很有效
不要在document物件中設定expando屬性
避免切換類和樣式規則
查詢父項之前，先摺疊文字範圍
其他資料
簡介 動
態html(dhtml)在microsoftinternetexplorer4.0中的引入，使web作者和開發人員可以使用新的程式設計模型。此
後，web作者充分利用了這個強大的特性來提供動態內容、樣式和定位，使web使用者得以體驗豐富的互動式功能。dhtml的靈活性使得通常會有多種方式可
以實現您的構思。理解internetexplorer的html分析和顯示元件如何處理請求，可幫助您確定完成工作的最佳方法。本文介紹了某些
dhtml功能對效能的重大影響，並提供了一些提高頁面效能的技巧。
成批處理dhtml更改
在dhtmlweb頁面上，提高
效能的最有效方法是改進對頁面上html內容的更改。有多種方法可以更新web頁面，了解這一點非常重要。從客戶的反饋來看，web作者可以應用html
文字塊，也可以通過使用dhtml物件模型（英文）或w3c文件物件模型(dom)（英文）來訪問個別html元素。無論何時更改html內
容，internetexplorer的html分析和顯示元件都必須重新組織該頁面的內部表現形式，重新計算文件布局和文件流，並顯示這些變化。雖然實
際效能由web頁面的內容和您所作的更改決定，但是這些操作代價都比較大。如果您應用html文字塊，而不是個別訪問元素，則必須呼叫html分析器，這
將導致額外的效能開銷。接受html文字的方法和屬性包括insertadjacenthtml（英文）和pastehtml（英文）方法，以及
innerhtml（英文）和outerhtml（英文）屬性。
技巧1：在乙個指令碼函式中對html內容進行更改。如果您的設計使用了多個事件處理程式（例如響應滑鼠移動），則應集中進行更改。
html
分析和顯示元件的另一項重要事實是：一旦指令碼返回控制（例如，當指令碼事件處理函式退出時，或者當呼叫settimeout（英文）等方法時），該元件將重
用字串連線操作來建立select元素的html文字，然後使用此技巧設定innerhtml屬性。對於數量特別大的選項，字串連線操作也會影響性
果您的web站點使用指令碼來執行一些常用操作，可以考慮將這些功能放到獨立的檔案中，以便可以由多個web頁面重複使用。這樣做，不僅可以改善**的維護
更好地利用指令碼重用功能，請將常用的指令碼操作放到dhtml附加**或元素行為（英文）中。行為提供了乙個有效的方法，用於重用指令碼和建立從html訪問
的元件，並使您可用自己的物件、方法、屬性和事件來擴充套件dhtml物件模型。對於未使用viewlink（英文）功能的行為，可以考慮使用
internetexplorer5.5中的lightweight（英文）行為特性進行更有效的**封裝。另外，如果您的指令碼**在乙個
script（英文）塊中，會獲得更高的效能。
請勿過多使用動態屬性
動態屬性（英文）為web作者提供了一種將表示式用作屬
性值的方法。表示式在執行時計算，其結果值將應用於屬性。這是乙個強大的特性。此特性可用於減少頁面上的指令碼數量，但是因為必須定時重算表示式，而且該錶
據繫結（英文）是乙個強大的功能，它使您可以將資料庫查詢的結果或xml資料島（英文）的內容，繫結至web頁面上的html元素。您無需返回伺服器提取
資料，就可以提供資料排序和過濾功能，以及不同的資料檢視。設想乙個web頁面可以將公司的資料顯示為折線圖、條形圖或餅圖，還具有將資料按辦公室、產品
或銷售階段排序的按鈕，而且所有這些功能只需要訪問一次伺服器就能實現。
技巧9：使用資料繫結來提供豐富的客戶端資料檢視。
有關資料繫結的詳細資訊，請參見以下文章：
資料繫結概述（英文）
繫結頁面資料（英文）
傾斜的、平均的和事實上的資料繫結（英文）
不要在document物件中設定expando屬性
expando（英
文）屬性可以新增至任何物件。此屬性非常有用，它可以儲存當前wed頁面內的資訊，並提供了另一種擴充套件dhtml物件模型的方法。例如，您可以給
dhtml元素指定乙個clicked屬性，用此屬性提示使用者已經單擊了哪乙個元素。在引發事件時，也可以使用expando屬性，向事件處理函式提供更
多的上下文資訊。無論您如何使用expando屬性，切記不要在document（英文）物件上設定它們。如果您這樣做，則當您訪問該屬性時，文件必須執
行額外的重算操作。
技巧10：在window（英文）物件上設定expando屬性。
請顯示
慢： for(vari=0;i1000;i++)
快： for(vari=0;i1000;i++)
避免切換類和樣式規則
切換類和樣式規則是一種代價非常高的操作，需要重新計算並調整整個文件的布局。如果您的web站點使用樣式表來提供內容的備用檢視，可以考慮直接修改要更改
的元素的style（英文）物件，而不是修改元素的classname（英文）屬性或與類關聯的stylesheet（英文）物件。
技巧11：在更改內容的外觀時，直接修改style物件。
查詢父項之前，先摺疊文字範圍
textrange（英
文）物件表示使用者選定或從html元素中檢索的乙個文字區域，例如body（英文）。通過呼叫parentelement（英文）方法，可以標識文字範圍
的父項。對於複雜的文字範圍，在呼叫parentelement方法之前，先呼叫collapse（英文）方法效率會更高。
技巧12：在訪問parentelement方法之前，先摺疊文字範圍。
提高你的DHTML效能
中文譯文 要快。看 的原始碼是如何建立table的。1.盡量使用同乙個指令碼函式來改變html內容。如果有多個事件觸發，盡量只改變同乙個地方。2.盡量把內容集中起來一次更新。如果不是特別需要有html的內容，盡量使用innertext代替innerhtml slow divupdate.innerh...
提高你的DHTML效能 （轉貼自 藍色理想 ）
1.盡量使用同乙個指令碼函式來改變html內容。如果有多個事件觸發，盡量只改變同乙個地方。2.盡量把內容集中起來一次更新。如果不是特別需要有html的內容，盡量使用innertext代替innerhtml slow divupdate.innerhtml for var i 0 i 100 i fa...
新聞頁面改變字型（DHTML）
新聞頁面改變字型 和 利用dom改變屬性的值 大中 小其實利用3d技術進行醫學上的面部修復，早在去年就已經獲得成功。在當時，oxford performance materials利用3d列印的植入物去替代乙個病人的75 頭骨。這個試驗的成功，為移植其它骨骼奠定了基礎，這也為最近fda批准oxfor...