最近，InfoQ中文站報道了Web 2.0應用客戶端性能問題十大根源，獲得了讀者朋友的關注。那么，如何從瀏覽器角度剖析性能問題呢？微軟IE開發團隊性能主管Jason Weber在一篇博文中介紹了IE瀏覽器的各個子系統，并通過實驗數據展示了不同網站對瀏覽器子系統的性能影響和權重，InfoQ中文站對相關內容做了整理，希望對瀏覽器開發人員和Web應用開發人員有所幫助。

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

圖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所示：

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

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

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

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

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

AJAX網站

采用IE 8訪問全球AJAX用戶體驗最豐富的25家網站（包括Facebook、Gmail和Hotmail等），性能結果如圖4所示：

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

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

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

Jason Weber最后指出，分析IE瀏覽器子系統性能權重的目的在于確保讓IE 9或者更新版本在現實世界中運行速度更快。在過去幾個月里，IE開發團隊針對上面的性能實驗結果采取了若干子系統的性能改進，包括硬件加速渲染、編譯JavaScript和原生內部集成JavaScript等。

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