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

前言

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