剖析IE浏览器子系统的性能权重,互联网营销

简介: 最近,InfoQ中文站报道了Web 2.0应用客户端性能问题十大根源,获得了读者朋友的关注。那么,如何从浏览器角度剖析性能问题呢?微软IE开发团队性能主管Jason Weber在一篇博文中介绍了IE浏览器的各个子系统,并通过实验数据展示了不同网站对浏览器子系统的性能影响和权重,InfoQ中文站对相关内容做了整理,希望对浏览器开发人员和Web应用开发人员有所帮助。

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

目录
相关文章
|
5月前
|
Web App开发 小程序 前端开发
【产品上新】小程序新内核来了!提升安卓浏览器性能,支持WebRTC
【产品上新】小程序新内核来了!提升安卓浏览器性能,支持WebRTC
103 10
|
10天前
|
Web App开发 JavaScript 前端开发
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
|
4月前
|
Web App开发 XML 开发框架
技术心得记录:在IE浏览器中的奇怪页面表现
技术心得记录:在IE浏览器中的奇怪页面表现
43 0
|
2月前
|
JavaScript
VUE——如何兼容IE9|IE10|IE11浏览器
VUE——如何兼容IE9|IE10|IE11浏览器
56 0
VUE——如何兼容IE9|IE10|IE11浏览器
|
3月前
|
安全 网络安全
用IE浏览器访问网站提示证书错误
当你在Internet Explorer中遇到证书错误提示,通常是因网站SSL/TLS证书问题或浏览器安全设置需调整。解决方法包括: 检查时间设置 调整IE设置 安装证书 调整计算机时间
|
4月前
自适应IT互联网营销企业网站pbootcms模板
一款蓝色自适应IT互联网营销企业网站pbootcms模板,该模板采用响应式设计,可自适应手机端,适合一切网络技术公司、互联网IT行业,源码下载,为您提供了便捷哦。
42 2
|
4月前
|
机器学习/深度学习 人工智能 前端开发
WebAssembly:浏览器中的新语言,引领Web性能革命
【6月更文挑战第12天】WebAssembly,简称Wasm,是浏览器中的新语言,旨在带来近乎原生的性能,引领Web性能革命。它具有高效、可移植、安全和多语言支持的特点,适用于游戏开发、图形处理、计算机视觉等领域。随着浏览器支持增强,Wasm将在跨平台应用、AI、机器学习、云计算和边缘计算中发挥更大作用,推动Web应用的发展。
|
4月前
win10取消ie浏览器自动跳转edge浏览器
win10取消ie浏览器自动跳转edge浏览器
134 4
|
5月前
|
存储 人工智能 应用服务中间件
Web应用是一种通过互联网浏览器和网络技术在互联网上执行任务的计算机程序
【5月更文挑战第30天】Web应用是一种通过互联网浏览器和网络技术在互联网上执行任务的计算机程序
64 2
|
5月前
|
存储 机器人
在阿里云RPA中,你可以通过以下步骤来更改默认唤醒IE浏览器的地址
【2月更文挑战第28天】在阿里云RPA中,你可以通过以下步骤来更改默认唤醒IE浏览器的地址
94 1

热门文章

最新文章

下一篇
无影云桌面