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

摘要:
为了分析不同网站对浏览器子系统的各种性能影响和权重,IE性能团队选取了两种类型的网站进行实验。由于Networking子系统的性能与客户的环境息息相关,所以不将其权重纳入评估结果中。JasonWeber最后指出,分析IE浏览器子系统性能权重的目的在于确保让IE9或者更新版本在现实世界中运行速度更快。

来源于InfoQ

微软IE开发团队性能主管Jason Weber在一篇博 文中介绍了IE浏览器的各个子系统,并通过实验数据展示了不同网站对浏览器子系统的性能影响和权重,InfoQ中文站对相关内容做了整理,希望对 浏览器开发人员和Web应用开发人员有所帮助。

Jason Weber指出,所有现代浏览器从概念上讲都是类似的。以IE为例,它由11个核心子系统组成:

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

图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张

图 2. IE 8子系统针对5大新闻网站的性能结果

由图2可以看出,虽然同为新闻网站,但是由于Web开发人员对网站性能的关注和优化程度不同,IE 8子系统对5个首页的性能反馈都不一样。1号网站的主要性能消耗在JavaScript子系统上,2号网站的重头戏则是Marshaling子系统。3号 网站显然遵循了性能最佳实践经验,所以消耗时间最短;而4号网站则是反面典型,加载时间达到了3.7秒。

如果把这5大新闻网站对IE 8子系统的影响权重综合在一起,就可以得到针对新闻网站的子系统性能影响权重,如图3所示:

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

图 3. 新闻类网站对IE 8子系统的性能影响权重

上面这张图对于Web开发人员特别是新闻类网站工程师很有参考价值,排在前三位的子系统分别是JavaScript (29%)、Marshalling(18%)和Rendering (17%)。

AJAX网站

采用IE 8访问全球AJAX用户体验最丰富的25家网站(包括Facebook、Gmail和Hotmail等),性能结果如图4所示:

剖析IE浏览器子系统的性能权重第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开发人员清楚其应用对浏览器的性能压力,采取合适的优化调整。

免责声明:文章转载自《剖析IE浏览器子系统的性能权重》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇WPF 饼状图,柱形图,折线图 (2 折线图)C#图片动画效果(旋转360度)异步下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

javascript书籍集合

对于前端书籍的搜集,我是有强迫症的,就一个态度:我全都要! 下面是干货,关注公众号:撩撩前端,回复相应消息码,就可以获取对应电子书。 JavaScript.DOM高级程序设计 关注公众号"撩撩前端",回复消息:026557,获取电子书籍 JavaScript网页特效范例宝典 关注公众号"撩撩前端",回复消息:408289,获取电子书籍 JavaScript...

js调试工具Console命令详解——转

一、显示信息的命令 <!DOCTYPE html> <html> <head> <title>常用console命令</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> &...

C#: 通过html调用WinForm 。。。。。

完整测试代码:Form1.cs 代码 using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using System.Drawing;using System.Text;using System.Windows.Forms;n...

前端优化网站性能的14条规则

规则1:减少HTTP请求 性能黄金法则:只有10%~20%的响应时间花在对HTML文档的请求上,剩下80%~90%时间花在HTML文档所引用的所有组件(包括图片、脚本、样式表、flash等)的HTTP请求上。 因此,减少组件的数量并由此减少HTTP请求的数量 是改善响应时间最简单的途径。 图片地图将多个URL链接使用map方法关联到同一个图片上,从而...

百度地图实现鼠标绘制多边形并获取所有点坐标

百度地图开放平台http://lbsyun.baidu.com/ 这里使用的是Javascript API http://lbsyun.baidu.com/index.php?title=jspopular 实现鼠标绘制多边形主要用到百度地图JavaScript开源库鼠标绘制工具条库(http://lbsyun.baidu.com/index.php?ti...

浏览器工作原理和实践(三)——页面

《浏览器工作原理与实践》是极客时间上的一个浏览器学习系列,在学习之后特在此做记录和总结。 一、事件循环 消息队列是一种数据结构,可以存放要执行的任务。它符合队列“先进先出”的特点,也就是说要添加任务的话,添加到队列的尾部;要取出任务的话,从队列头部去取。 从上图可以看出,改造可以分为下面三个步骤: (1)添加一个消息队列; (2)IO 线程中产生的新任务...