最近,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开发人员清楚其应用对浏览器的性能压力,采取合适的优化调整。
分享到:
相关推荐
16. 网页与超文本:通过IE浏览器浏览的网页是超文本格式,可以包含文本、图像、链接等多种元素。 17. ISP定义:ISP(Internet Service Provider)是指因特网服务提供商,如中国电信,提供上网服务。 18. 法律法规...
- **浏览器**:如Internet Explorer (IE),用于浏览网页、发送电子邮件等。 - **电子邮件客户端**:如Outlook,用于收发电子邮件。 ### 四、计算机的发展历程 #### 1. 电子数字计算机的发展 - **第一代(1946-1950s...
资源内项目源码是来自个人的毕业设计,代码都测试ok,包含源码、数据集、可视化页面和部署说明,可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源,毕设答辩评审绝对信服的保底85分以上,放心下载使用,拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务,拿来就能用的绝对好资源!!! 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.txt文件,仅供学习参考, 切勿用于商业用途。
《基于YOLOv8的智慧社区独居老人生命体征监测系统》(包含源码、可视化界面、完整数据集、部署教程)简单部署即可运行。功能完善、操作简单,适合毕设或课程设计
Android Studio Meerkat 2024.3.1 Patch 1(android-studio-2024.3.1.14-mac.dmg)适用于macOS Intel系统,文件使用360压缩软件分割成两个压缩包,必须一起下载使用: part1: https://download.csdn.net/download/weixin_43800734/90557060 part2: https://download.csdn.net/download/weixin_43800734/90557056
侧轴承杯加工工艺编制及夹具设计.zip
NASA数据集锂电池容量特征提取(Matlab完整源码和数据) 作者介绍:机器学习之心,博客专家认证,机器学习领域创作者,2023博客之星TOP50,主做机器学习和深度学习时序、回归、分类、聚类和降维等程序设计和案例分析,文章底部有博主联系方式。从事Matlab、Python算法仿真工作8年,更多仿真源码、数据集定制私信。
板料折弯机液压系统设计.zip
C6150车床的设计.zip
机器学习之KNN实现手写数字
python爬虫;智能切换策略,反爬检测机制
mpls-vpn-optionA-all
56tgyhujikolp[
GB 6442-86企业职工伤亡事故调查分析规则.pdf
汽车液压式主动悬架系统的设计().zip
2000-2024年各省专利侵权案件结案数数据 1、时间:2000-2024年 2、来源:国家知识产权J 3、指标:专利侵权案件结案数 4、范围:31省 5、用途:可用于衡量知识产权保护水平
资源内项目源码是来自个人的毕业设计,代码都测试ok,包含源码、数据集、可视化页面和部署说明,可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源,毕设答辩评审绝对信服的保底85分以上,放心下载使用,拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务,拿来就能用的绝对好资源!!! 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.txt文件,仅供学习参考, 切勿用于商业用途。
内容概要:本文档详细复现了金融数学课程作业,涵盖欧式看涨期权定价和投资组合优化两大部分。对于欧式看涨期权定价,分别采用Black-Scholes模型和蒙特卡洛方法进行了计算,并对彩虹期权进行了基于最大值的看涨期权定价。投资组合优化部分则探讨了最小方差组合、给定收益的最小方差组合、最大效用组合以及给定风险的最大收益组合四种情形,还对比了拉格朗日乘数法和二次规划求解器两种方法。文中不仅提供了详细的MATLAB代码,还有详尽的中文解释,确保每一步骤清晰明了。 适合人群:金融工程专业学生、量化分析师、金融数学爱好者。 使用场景及目标:①帮助学生理解和掌握金融衍生品定价的基本原理和方法;②为从事量化分析的专业人士提供实用工具和技术支持;③作为教学材料辅助高校教师讲授相关内容。 其他说明:文档还包括了完整的论文结构建议,从封面页到结论,再到附录,涵盖了所有必要元素,确保提交的作业符合学术规范。此外,还特别强调了数据预处理步骤,确保代码可以顺利运行。
脉冲电解射流加工喷射装置设计(1)
ThinkPad S1 (2nd Generation) 和ThinkPad Yoga 260 用户指南V3.0,包含如何拆机更换硬件