Web 2.0应用的推广为用户带来了全新的体验,同时也让开发人员更加关注客户端性能问题。最近,资深Web性能诊断专家、知名工具dynatrace的创始人之一Andreas Grabner根据自己的工作经验,总结
了Web 2.0应用客户端性能问题十大根源,InfoQ中文站将这十个问题做了概括整理,供Web开发人员借鉴和思考。
1. IE中的CSS选择器(selector)运行缓慢
Web开发人员通常使用JavaScript框架(如jQuery)提供的CSS选择器来实现查找功能,如var element =
$(“.shoppingcart”),但是IE
6和7没有提供这种查找方法的原生实现。所以,JavaScript框架不得不通过遍历整个DOM树来达到目的。这种方式花费的时间比在其他浏览器中的消
耗要多得多,而且严重依赖于DOM树的规模。IE
8对CSS查找提供了较好的支持,所以Web人员最好升级相应的JavaScript框架版本以利用这些新特性。
2.针对相同对象重复进行CSS查找
正如第一点所说,单个CSS查找代价高昂,在这种情况下,如果还要对相同的对象进行多次重复查找,那性能问题就可想而知了。下图是一个典型的Web页面中CSS查找功能调用统计结果:
(引自dynatrace博客,中间一列为查找函数总执行时间,单位毫秒,最后一列为函数调用次数)
对于这种问题,Andreas Grabner建议将第一次查找的结果保存到变量中,在以后需要的时候重用即可,不必再重复进行查找。
3.XHR调用太多
JavaScript和XmlHttpRequest是AJAX技术的基础,很多JavaScript框架都提供了非常方便的使用方法,Web开发人员会充分利用其异步通信优势来实现诸如分页加载等效果,避免对整个页面的操作。
Andreas
Grabner根据自己的经验指出,他发现这种方式被滥用了——过多的信息通过过多的调用来动态访问。例如,在一个显示10种商品的页面中,开发人员可能
想分别加载每种商品的详细信息。这意味着,你需要和服务器端进行10次交流才能得到全部信息,也会对后台系统产生压力。他建议,在这种情况下,把10次调
用合并成1次来减少通信压力。
4.代价高昂的DOM操作
操作DOM是网页交互性的必要技术。拿添加DOM元素来说,存在多种实现方式,每种方式因为不同的浏览器类型和元素数量大小带来的性能影响也各不相同。建议大家仔细分析比较不同的方法,采用适合自身情况的技术。
5.JavaScript文件过多
Andreas
Grabner说,对于一个典型的网站来说,存在超过40个单独的JavaScript文件并不少见。他指出,JavaScript文件过多带来两个问
题:一是浏览器在加载这些文件时需要通过JavaScript引擎切换上下文运行环境,二是因为下载文件而带来额外的网络通信。解决方法是:减少
JavaScript文件数量!
6.DOM规模庞大
DOM规模对页面性能影响很大,具体表现在:
- 占用的内存
- 从根节点到子节点的style变化所花费的开销
- IE中CSS查找的性能问题
- DOM遍历操作的性能问题
所以,警惕你的DOM树!
7.事件处理函数绑定过多
对于Web开发人员来说,绑定事件处理函数是日常工作之一。Andreas Grabner提醒大家其对性能的影响:
- 绑定操作本身消耗时间(如查找对象、注册事件管理器等)
- 当事件被触发时,事件管理器需要查找注册该事件的元素,并调用正确的事件处理函数。
- 在切花页面时,要记住对事件解绑,避免DOM相关的内存泄露问题。
8.外部服务执行缓慢
很多网页都嵌入了外部内容(如广告栏等)或者调用外部服务,Web开发人员通常需要在页面中包含由第三方提供商发布的JavaScript文件,而通常这些文件中就存在前面所提到的性能问题,我们需要擦亮眼睛,如果有问题要反馈给第三方供应商让其修改优化。
9.滥用视觉效果
很多JavaScript框架都提供了绚丽的视觉特效,如动态弹出表单等,一些方法在示例代码中运行良好,但是在实际的页面中特别是DOM规模
较大时表现不尽人意。Andreas Grabner建议Web开发人员在引入视觉效果时关注其对浏览器CPU、渲染引擎和整个网站性能的负面影响。
10.日志和监控粒度过细
现在存在很多优秀的日志和监控工具,但是如果把粒度设得太细(如记录每次鼠标移动的详情),信息的收集过程会对JavaScript引擎和网络产生额外的负担。
Web 2.0应用客户端性能问题十大根源向大家介绍完了,原文作者Andreas
Grabner不仅是Web性能诊断工具dynatrace的创始人之一,而且参与了许多企业级Web应用的性能优化项目,他总结的这些问题相信会对国内
Web开发人员带来一定的启示,InfoQ中文站也会继续关注业界的最新进展。
原文:http://www.infoq.com/cn/news/2010/08/web-performance-root
分享到:
相关推荐
详细地介绍了web2.0的应用,说明了web2.0应用于教育的特点
什么是web2.0 主要特点 相关技术 Web 2.0特征 Web 2.0七大原则 Web 2.0的设计模式 从Web 2.0到Innovation 2.0 技术 什么是web2.0 主要特点 相关技术 Web 2.0特征 Web 2.0七大原则 Web 2.0的设计模式 从Web...
使用ASP.NET 2.0(C#)技术开发Web2.0的网络应用系统(如RSS、Web Service、BBS、XML、Ajax、WIKI等)。
在中国,虽然在网站运营中普遍推广WEB 2.0概念并以此作为新一轮网站竞争要点主要始于2005年,但关于WEB 2.0中一些相关应用(如博客)的关注从2002年左右就开始了。 在WEB 2.0的发展中,博客概念的推广以及博客网站的...
web2.0色系 web2.0色系web2.0色系web2.0色系web2.0色系
如今我们经常说起Web2.0,那么,什么是 Web2.0?它与Web1.0有什么不同?事实上,Web2.0没有一个确切的概念,相对于Web1.0,它有明显的特征:每个人都是内容生产与获取者、信息个性化定制自由度大、网页技术不同、...
Web2.0技术及其教育应用,尚琼,徐晓雄,本文通过阅读国内外有关web2.0教育应用的文章,对web2.0技术及其教育应用方式进行了总结。首先介绍了什么是Web2.0,从理念和核心技术上
改善Web2.0应用程序的性能[归纳].pdf
2018先知白帽大会web2.0爬虫ppt2018先知白帽大会web2.0爬虫ppt2018先知白帽大会web2.0爬虫ppt2018先知白帽大会web2.0爬虫ppt2018先知白帽大会web2.0爬虫ppt2018先知白帽大会web2.0爬虫ppt
基于AJAX的Web2.0应用程序安全问题分析,黄芳,白颖坚,AJAX的出现,在提升用户体验、减少网络流量、减轻服务器负载的同时,也使Web2.0应用程序的安全问题更加突出。本文在一个小型实验平��
本文内容包括:Web2.0与Dojo介绍解决Dojo性能问题的常见技巧检测性能瓶颈的工具小结参考资料Web2.0应用程序最注重的一个方面就是用户体验,用户希望使用的是一个快速稳定的Web2.0应用。而基于Dojo的Web2.0应用经常...
全面提升Web2.0应用程序的性能3[整理].pdf
WEB 2.0中AJAX应用的详细探讨 WEB 2.0中AJAX应用的详细探讨
Web2.0 是相对Web1.0 的新的一类互联网应用的统称。Web1.0 的主要特点在于用户通过浏览器获取信息。Web2.0 则更注重用户的交互作用,用户既是网站内容的浏览者,也是网站内容的制造者。所谓网站内容的制造者是说...
web2.0技术标准 里面包括了web2.0常用的技术
Web2.0之Ajax 学习笔记与应用实例,Web2.0之Ajax 学习笔记与应用实例
精通Web 2.0 精通Web 2.0精通Web 2.0 精通Web 2.0 精通Web 2.0 精通Web 2.0
Web2.0 渗透年 依托互联网产生的Web2.0正在向其它领域渗透,改变着某些行 业的规则,如媒体、客户端软件、企业级软件,甚至正在对开发技术本身产生反作用力。 <br/> Donews 做的是Web2.0 的媒体...
本文从这些问题着手,重点探讨Web2.0时代的技术特征和应用安全,并通过结合Rational安全解决方案,为大家提供面对新时代、新问题的应用安全应对思路。什么是Web2.0?它包含了哪些技术?这些技术的产生又对网络应用...