Web 2.0应用客户端性能问题十大根源

原文 http://www.infoq.com/cn/news/2010/08/web-performance-root/

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开发人员带来一定的启示。

时间: 2024-08-02 19:45:55

Web 2.0应用客户端性能问题十大根源的相关文章

Web 2.0应用客户端性能问题十大根源《转载》

前言 Web 2.0应用的推广为用户带来了全新的体验,同时也让开发人员更加关注客户端性能问题.最近,资深Web性能诊断专家.知名工具dynatrace的创始人之一Andreas Grabner根据自己的工作经验,总结了Web 2.0应用客户端性能问题十大根源,InfoQ中文站将这十个问题做了概括整理,供Web开发人员借鉴和思考. 1. IE中的CSS选择器(selector)运行缓慢 Web开发人员通常使用JavaScript框架(如jQuery)提供的CSS选择器来实现查找功能,如var el

Android4.0 Design之设计规范的十大革新

在拜读和翻译了Android design设计指导后,对比Android 4.0,4.1,4.4版本与Android2.3及之前版本的app设计指导,总结了Android 4.0版本后设计规范的10大改变之处,在此也感谢博友对我所写文章的支持,之前重要设计理念系列的文章阅读量最近一直在暴涨,也鼓动着我继续写该系列的文章. 一.导航栏 由之前的物理按键导航(返回.菜单.搜索.主页)变成了嵌入屏幕的虚拟按键(返回.主页.最近任务). 把菜单项和搜索项从导航栏去掉,把之前通过长按主页键才出现的历史打开

提高ASP.NET应用程序性能的十大方法

一.返回多个数据集 检查你的访问数据库的代码,看是否存在着要返回多次的请求.每次往返降低了你的应用程序的每秒能够响应请求的次数.通过在单个数据库请求中返回多个结果集,可以减少与数据库通信的时间,使你的系统具有扩展性,也可以减少数据库服务器响应请求的工作量. 如果你是用动态的SQL语句来返回多个数据集,那我建议你用存储过程来替代动态的SQL语句.是否把业务逻辑写到存储过程中,这个有点争议.但是我认为,把业务逻辑写到存储过程里面可以限制返回结果集的大小,减小网络数据的流量,在逻辑层也不用在过滤数据,

jQuery 3.0最终版发布,十大新特性眼前一亮

jQuery 3.0在日前发布了最终的全新版本.从2014年10月,jQuery团队对这个主要大版本进行维护开始,web开发者社区便一直在期待着这一刻的到来,终于在2016年6月他们迎来了这一个最终版www.lampbrother.net. 通过jQuery 3.0的版本更新说明,我们看到了一个保持着向后兼容的更轻便,更快速的jQuery.在本文中,我们将介绍一些令人眼前一亮的jQuery 3.0全新特性. 开始前的说明 如果你想要下载jQuery 3.0进行亲自实验,可以通过该页面进行下载.另

优化Android App性能?十大技巧必知

无论锤子还是茄子手机的不断冒出,Android系统的手机市场占有率目前来说还是最大的,因此基于Android开发的App数量也是很庞大的.那么,如何能开发出更高性能的Android App?相信是软件开发公司以及广大程序员们头疼的一大难题.今天,就给大家提供几个提高Android App性能的技巧. 高效地利用线程 1.在后台取消一些线程中的动作 我们知道App运行过程中所有的操作都默认在主线程(UI线程)中进行的,这样App的响应速度就会受到影响.会导致程序陷入卡顿.死掉甚至会发生系统错误.

优化Android App性能?十大技巧必知!

无论锤子还是茄子手机的不断冒出,Android系统的手机市场占有率目前来说还是最大的,因此基于Android开发的App数量也是很庞大的.那么,如何能开发出更高性能的Android App?相信是软件开发公司以及广大程序员们头疼的一大难题.今天,就给大家提供几个提高Android App性能的技巧. 高效地利用线程 1.在后台取消一些线程中的动作 我们知道App运行过程中所有的操作都默认在主线程(UI线程)中进行的,这样App的响应速度就会受到影响.会导致程序陷入卡顿.死掉甚至会发生系统错误.

前端开发者不得不知的ES6十大特性

前端开发者不得不知的ES6十大特性 转载 作者:AlloyTeam 链接:http://www.alloyteam.com/2016/03/es6-front-end-developers-will-have-to-know-the-top-ten-properties/ ES6(ECMAScript2015)的出现,无疑给前端开发人员带来了新的惊喜,它包含了一些很棒的新特性,可以更加方便的实现很多复杂的操作,提高开发人员的效率. 本文主要针对ES6做一个简要介绍. 主要译自:  http://

将Web应用性能提高十倍的10条建议

导读 提高 web 应用的性能从来没有比现在更重要过.网络经济的比重一直在增长:全球经济超过 5% 的价值是在因特网上产生的(数据参见下面的资料).这个时刻在线的超连接世界意味着用户对其的期望值也处于历史上的最高点.如果你的网站不能及时的响应,或者你的 app 不能无延时的工作,用户会很快的投奔到你的竞争对手那里. 举一个例子,一份亚马逊十年前做过的研究可以证明,甚至在那个时候,网页加载时间每减少100毫秒,收入就会增加1%.另一个最近的研究特别强调一个事实,即超过一半的网站拥有者在调查中承认它

将 Web 应用性能提高十倍的10条建议

提高 web 应用的性能从来没有比现在更重要过.网络经济的比重一直在增长:全球经济超过 5% 的价值是在因特网上产生的(数据参见下面的资料).这个时刻在线的超连接世界意味着用户对其的期望值也处于历史上的最高点.如果你的网站不能及时的响应,或者你的 app 不能无延时的工作,用户会很快的投奔到你的竞争对手那里. 举一个例子,一份亚马逊十年前做过的研究可以证明,甚至在那个时候,网页加载时间每减少100毫秒,收入就会增加1%.另一个最近的研究特别强调一个事实,即超过一半的网站拥有者在调查中承认它们会因