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

安徽新華電腦學(xué)校專業(yè)職業(yè)規(guī)劃師為你提供更多幫助【在線咨詢】