加快dhtml的12個技巧

1、加快DHTML的12個技巧動態(tài)HTML（DHTML）在Microsoft？InterExpler4.0中的引入，使Web作者和開發(fā)人員可以使用新的編程模型。此后，Web作者充分利用了這個強(qiáng)大的特性來提供動態(tài)內(nèi)容、樣式和定位，使Web用戶得以體驗(yàn)豐富的交互式功能。DHTML的靈活性使得通常會有多種方式可以實(shí)現(xiàn)您的構(gòu)思。理解InterExpler的HTML分析和顯示組件如何處理請求，可幫助您確定完成工作的最佳方法。本文介紹了某些DHTML功

2、能對性能的重大影響，并提供了一些提高頁面性能的技巧。成批處理DHTML更改在DHTMLWeb頁面上，提高性能的最有效方法是改進(jìn)對頁面上HTML內(nèi)容的更改。有多種方法可以更新Web頁面，了解這一點(diǎn)非常重要。從客戶的反饋來看，Web作者可以應(yīng)用HTML文本塊，也可以通過使用DHTML對象模型（英文）或W3C文檔對象模型（DOM）（英文）來訪問個別HTML元素。無論何時(shí)更改HTML內(nèi)容，InterExpler的HTML分析和顯示組件都必須重新

3、組織該頁面的內(nèi)部表現(xiàn)形式，重新計(jì)算文檔布局和文檔流，并顯示這些變化。雖然實(shí)際性能由Web頁面的內(nèi)容和您所作的更改決定，但是這些操作代價(jià)都比較大。如果您應(yīng)用HTML文本塊，而不是個別訪問元素，則必須調(diào)用HTML分析器，這將導(dǎo)致額外的性能開銷。接受HTML文本的方法和屬性包括AdjacentHTML（英文）和pasteHTML（英文）方法，以及innerHTML（英文）和outerHTML（英文）屬性。技巧1：在一個腳本函數(shù)中對HTML內(nèi)容

4、進(jìn)行更改。如果您的設(shè)計(jì)使用了多個事件處理程序（例如響應(yīng)鼠標(biāo)移動），則應(yīng)集中進(jìn)行更改。HTML分析和顯示組件的另一項(xiàng)重要事實(shí)是：一旦腳本返回控制（例如，當(dāng)腳本事件處理函數(shù)退出時(shí)，或者當(dāng)調(diào)用setTimeout（英文）等方法時(shí)），該組件將重新計(jì)算布局并顯示W(wǎng)eb頁面?，F(xiàn)在您已經(jīng)了解InterExpler如何處理變化，下面將開始提高Web頁面的性能。技巧２：建立一個HTML字符串并對文檔進(jìn)行一次更改，而不是進(jìn)行多次更新。如果HTML內(nèi)容不是必

5、要的，可考慮使用innerText（英文）屬性。調(diào)用innerHTML屬性時(shí)都調(diào)用HTML分析器。要提高性能，可以先建立一個字符串，然后將其分配給innerHTML屬性。慢：divUpdate.innerHTML=““f(vari=0i100i)divUpdate.innerHTML=“這是一個較慢的方法！“快：varstr=““成批處理DHTML更新并調(diào)用一次AdjacentHTML方法可以提高性能，但是有時(shí)直接通過DOM創(chuàng)建元素效率

6、更高。在下面的方案中，您可以嘗試一下這兩種方法并確定哪一種更快。慢：f(vari=0i100i)divUpdate.AdjacentHTML(“befeEnd““使用AdjacentHTML()“)快：varnodef(vari=0i100i)node=document.createElement(“SPAN“)node.innerText=“使用AdjacentElement()“divUpdate.AdjacentElement(“

7、befeEnd“node)擴(kuò)展元素中的選項(xiàng)對于上一條使用HTML文本方法的規(guī)則來說，將大量OPTION（英文）元素添加到（英文）中的情況是一種例外。這時(shí)候，使用innerHTML屬性比調(diào)用createElement方法訪問選項(xiàng)集合效率更高。技巧5：使用innerHTML將大量選項(xiàng)添加到元素中。使用字符串連接操作來建立元素的HTML文本，然后使用此技巧設(shè)置innerHTML屬性。對于數(shù)量特別大的選項(xiàng)，字符串連接操作也會影響性能。在此情況下