天天看點

剖析IE浏覽器子系統的性能權重,網際網路營銷

Jason Weber指出,所有現代浏覽器從概念上講都是類似的。以IE為例,它由11個核心子系統組成:

剖析IE浏覽器子系統的性能權重,網際網路營銷

圖1. IE子系統(來源:IE部落格,下同)

Networking——負責用戶端與伺服器端的所有通信,包括Web内容的本地緩存。它通常受制于使用者網絡環境的性能。 HTML——負責解析HTML文檔并建立HTML結構化資料等。 CSS——負責解析CSS并建立CSS結構化資料。 Collections——存儲和通路HTML文檔中的中繼資料,如文檔頭部的描述資訊等。 JavaScript—— 執行JavaScript代碼,它也是最為人所知的子系統。 Marshaling——因為大多數JavaScript引擎沒有直接內建到浏覽器中,是以浏覽器和JavaScript引擎之間存在一個通信層,這就是marshaling子系統。 Native OM——JavaScript通過DOM API與HTML文檔互動,提供這些API的就是Native OM系統,能夠通路和處理文檔。 Formatting——負責将style應用到文檔中。 Block Building——負責建構顯示給使用者的矩形塊(CSS基于塊布局),包括塊尺寸等。 Layout——負責布局經過Formatting和Block Building子系統處理後的Web内容和塊結構。 Rendering——負責把最終内容渲染給使用者。

為了分析不同網站對浏覽器子系統的各種性能影響和權重,IE性能團隊選取了兩種類型的網站進行實驗。由于Networking子系統的性能與客戶的環境息息相關,是以不将其權重納入評估結果中。

新聞網站

采用IE 8通路全球五大新聞網站的首頁,性能結果如圖2所示:

剖析IE浏覽器子系統的性能權重,網際網路營銷

圖 2. IE 8子系統針對5大新聞網站的性能結果

由圖2可以看出,雖然同為新聞網站,但是由于Web開發人員對網站性能的關注和優化程度不同,IE 8子系統對5個首頁的性能回報都不一樣。1号網站的主要性能消耗在JavaScript子系統上,2号網站的重頭戲則是Marshaling子系統。3号網站顯然遵循了性能最佳實踐經驗,是以消耗時間最短;而4号網站則是反面典型,加載時間達到了3.7秒。

如果把這5大新聞網站對IE 8子系統的影響權重綜合在一起,就可以得到針對新聞網站的子系統性能影響權重,如圖3所示:

剖析IE浏覽器子系統的性能權重,網際網路營銷

圖 3.新聞類網站對IE 8子系統的性能影響權重

上面這張圖對于Web開發人員特别是新聞類網站工程師很有參考價值,排在前三位的子系統分别是JavaScript (29%)、Marshalling(18%)和Rendering (17%)。

AJAX網站

采用IE 8通路全球AJAX使用者體驗最豐富的25家網站(包括Facebook、Gmail和Hotmail等),性能結果如圖4所示:

剖析IE浏覽器子系統的性能權重,網際網路營銷

圖 4. AJAX類網站對IE 8子系統的性能影響權重

與新聞類網站相比,某些子系統如HTML、CSS和JavaScript權重相對較輕,而另外一些子系統如Formatting、Layout、Block Building和Rendering(31%)則比較重要。乍一看,這種結果可能有些意外。不過,Jason Weber分析了原因:

當JavaScript代碼執行時,浏覽器需要利用幾乎全部子系統來配合相應的變化并最終顯示給使用者,而這些過程的性能消耗通常要比執行JavaScript代碼本身要昂貴得多。

對于浏覽器子系統的性能權重分析具有很高的參考價值,一方面可以幫助浏覽器開發人員了解現實世界對自身産品的回報,評估各個子系統的功能優先級;一方面能夠幫助Web開發人員清楚其應用對浏覽器的性能壓力,采取合适的優化調整。

繼續閱讀