提高HTML頁面性能的技巧<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />
Michael Wallent
微軟公司
http://msdn.microsoft.com/library/en-us/dndude/html/dude100499.asp?frame=true
微軟的開發週期中很重要的一塊是調整產品的性能。性能調整也是開發者應當留心的關鍵部分之一。 經過多年發展,業界對於如何優化Win32程序性能已經有非常多的瞭解。
現在開發者遇到的問題之一是不太清楚是什麼導致DTHML和HTML頁面運行快或者慢。當然,有一些很簡單的方法——比如不要使用2MB大的圖片。我們曾經使用過另外一些有趣的技巧提高了DHTML頁面的性能,希望它們能幫助你改善自己的頁面性能。
這裏我使用了一個建立Table的程序例子。其中用document.createElement()和element.insertBefore()方法創建了1000行(Row)的表(Table)。每行有一列(Cell)。Cell中包含的內容稱爲"Text"。這段代碼能有多糟呢?這麼小的程序又能有多大調整餘地呢?請看介紹。
一開始我寫了一段自認爲會很快的程序,我儘量避免一些低級問題----像沒有顯式定義變量、或者在一個頁面中同時使用VBScript和Javascript。程序如下:
我在PII233/64MB內存/NT4.0/IE5.0的機器上運行這段程序。頁面從本機上裝載。從開始裝載頁面到頁面完全安靜下來(所有的事件均已經運行,屏幕顯示完成)的時間爲2328毫秒,這也是本次測試的基線(我稱之爲Test1)。
這個頁面中,一個很耗時的操作是頻繁引用全局對象,如“document”、“body”、“window”等。引用所有這些類似的全局變量遠比引用一個本地變量代價高昂。
因此我作了第一次改進嘗試:緩存(Cache)document.body 到本地變量“theBody”中:
增加了如下代碼:
然後修改這一行:
將之改爲:
這次修改並沒有太大影響到整體時間,它只縮短了3 ms。但它已經表明,如果在循環中也有document.body對象而對其引用做出修改,帶來的好處將是可觀的。
隨後,我緩存了document對象----在我們這個測試中,document對象共被引用了3002次。修改後代碼如下:
此次運行時間只有2100ms,節約了大約10%的時間。使用本地變量而不是直接引用document對象平均每次節約了0.4毫秒。
一個常用的優化性能的方法是:當腳本不需要立即運行時,在<SCRIPT>標籤中設置“defer”屬性。 (立即腳本沒有被包含在一個function塊中,因此會在加載過程中執行。) 設置“defer”屬性後,IE就不必等待該腳本裝載和執行完畢。這樣頁面加載會更快。一般來說,這也表明立即腳本最好放在function塊中,並在document或者body對象的onload 句柄中處理該函數。在有一些腳本需要依賴用戶操作而執行時----例如點擊按鈕,或者移動鼠標到某個區域----使用該屬性非常有用。但當有一些腳本需要在頁面加載過程中或加載完成後執行,使用defer屬性得到的好處就不太大。
下面是使用了defer屬性修改後的代碼版本:
這次測試的時間爲2043 ms。相對基線測試提高了12%,比上次測試提高了2.5%。
下面我們談到的一個改進方法非常有用,當然也稍微麻煩一點。當需要創建元素然後將其插入樹狀的結構中時,將其直接插入到主幹中效率更高----而不是首先將其插入大的子樹,然後再將大的子樹插入主幹。例如,如果你創建一個每行有一列、列中有一些文字的表,你可以這樣做:
1. 創建<TR>
2. 創建<TD>
3. 創建TextNode節點
4. 將TextNode 插入<TD>
5. 將<TD> 插入到 <TR>
6. 將<TR>插入到TBODY
當它要比下面的方法慢一些:
1. 創建<TR>
2. 創建<TD>
3. 創建TextNode
4. 將<TR> 插入到TBODY
5. 將<TD> 插入到<TR>
6. 將TextNode插入到<TD>
上面的四次測試使用的都是前一種方法。我們用後一種方法進行第5次測試。代碼如下:
Test5只需1649ms。這比上次測試提高了25%,比基線快了幾乎30%。
隨後的修改是使用了預製的樣式表。使用了預製樣式表的表格列寬或者是通過<COL>標籤設置,沒有<COL>標籤時,每列的寬度均勻分佈。因爲不需要對每一列重新計算大小等,使用樣式表實際上提高了性能,尤其當表格中的列數很多時。
增加樣式表(CSS)的代碼非常簡單,如下:
因爲我們測試中的表格只有一列,這種改變只提高了頁面1.6%的性能。如果有更多的列,性能增加會更多。
最後兩次測試改變了將文字插入到表格中的方法。前面的測試中,我們都先創建一個TextNode ,然後將其插入到TD中。在Test7中, 取而代之,我們通過innerText 指定包含的文字。修改的代碼是:
令人驚奇的是,這次修改產生的差異很大----比上次提高了9%的性能,比最初總共提高了36%的性能。時間從最初的2323ms到最後的1473ms。
現在,幾乎人人都知道使用element.innerHTML 非常慢. 爲了看看究竟它如何慢,我做了最後一次測試:使用 innerHTML替代innerText插入文字。這大大降低了性能。時間達到3375ms,比上次測試慢了80%,比基線測試慢了45%。顯然,innerHTML是非常耗時的。
下表總結了各次測試及其結果:http://msdn.microsoft.com/library/en-us/dndude/html/results2.asp
調整HTML頁面性能類似於調整Win32應用程序性能;需要知道什麼慢,什麼快。希望這些方法能幫你提高頁面性能。