剖析IE浏览器子系统的性能权重

最近，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开发人员清楚其应用对浏览器的性能压力，采取合适的优化调整。