关于 RIA/Ajax 应用性能优化的一些思考

本文以现有理解写成，做为记录和基础。

 

          在做客户端/服务器性能优化的项目里，往往主要的调优对象是服务端，因为在这种分散请求、集中处理的总体架构中，决大部分情况下服务端性能的高低，就决定了客户端体验的好坏，也就是我们比较关心的吞吐量和响应时间的关系。但是，随着接触此类项目的增多，发现在 B/S （B/S/S 也好）中采用 RIA/Ajax 做为客户端时，一些瓶颈明显是存在于客户端。随着这方面的积累，也有了一些思考，在网上也搜索了一下，觉得国内这种ria的客户端性能优化工作做得不多，处于起步阶段，大家都在忙着做服务端，国外这块超前一些，有一些度量工具，也有一些优化工具，不过个人觉得也是属于讨论加尝试、走向成熟的过程中。

 

          我一直在接触传统行业解决方案类软件，不属于纯互连网应用，感觉这方面的问题更加严重。这种软件本质属于MIS系统，业务代码主要做的就是数据处理工作，因此 UI 必然会涉及更多的数据绑定、操作和提交操作。现在在 B/S 架构下，为了客户端更美观、方便等等吧，使用以 Ajax 为代表的 RIA 成份越来越多，而在这种重的数据处理负荷下（往往传输的数据量比较大，表单绑定的项目很多，网格更是很常见），客户端性能下降、乃至瓶颈就在所难免了。

 

          现在的问题是摆在这里了，怎么来解决它。我个人认为问题是层次化的，要逐层解决。

 

1. 首先我想是总体要有三个目标，可度量、诊断、最后才谈得上优化，这和服务端优化是一个道理。在这个层面上现在能够做到的是度量，而且负责的说，这块做得感觉不是很好；还要考虑度量的范围（主机级、网络 IO、浏览器、javascript virtual machine/runtime env 和 javascript 框架/代码）；再就是有哪工具支持，手工恐怕不靠谱。

2. 其次我认为是关注的深度，如环境、配置、架构和代码层面的，实际也可以往大了说成优化方法问题。关注的深度不同，优化的目标和结果也不一样。如关注网络传输方面、HTML/JS/CSS 本身设计、环境配置（浏览器，服务端一些配置等）、架构和策略方面的、代码层面本身的。呵呵，不过往往代码也是最不希望下手的地方，但最有优化效果的也就是这部分了。

 

         对于上面提到的第一点，我觉得还有一个细节要考虑，就是客户端不像服务端，机器的配置是千差万别的，因此所有的工作都要创建个基线，也就是所有的工作是在什么样硬件配置的机器上做得的。这个可以参考容量估算的一些作法和模型，以便让取得的结果更具可比性，提高参考价值。

 

最后列一些有价值的文档，大家一起研究。

1. Client side performance testing has arrived

    客户端性能测试的研究与讨论。

2. 使用 Visual Round Trip Analyzer 加快网页加载速度的 12 个步骤

    以要点的方式给出了诸如客户端环境、网络传输和 HTML 和架构设计等方面的提高客户端性能的建议。并介绍了 VRTA 工具。

3. Razor - Profile and Optimize Web 2.0 Ajax Performance

    一个客户端性能度量、优化工具。

4. Introducing the IE8 Developer Tools JScript Profiler

    Microsoft IE 8 提供开发人员的 javascript 度量工具（当前 bate 版）。

5. Ajax View

    Microsoft Research 开发的一个原型工具，用于度量 Javascript 代码。

6. Emre Kıcıman

    Ajax View 作者的博客。

 

各位看客在这方面有什么看法？期待大家的声音～

 

// 2009.03.07 13:30 添加 ////

作者：lzy.je
出处：http://lzy.iteye.com
本文版权归作者所有，只允许以摘要和完整全文两种形式转载，不允许对文字进行裁剪。未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

 

// 2009.05.01 13:35 添加 ////

 

附件 性能优化.zip 为备份目的所添加，请勿下载使用。

 

// 2009.06.10 17:34 添加 ////

 

很好的一篇 Web 应用前端优化实践文章，分类也比较详细，推荐一读。

Best Practices for Speeding Up Your Web Site

 

评论

1 楼 achun 2008-12-09  

<p>您所关注的.我也一直在探寻</p>
<p>您看看我博客里的内容.</p>
<p><a href='/category/33268' target='_blank'>jCT专题部分</a>,</p>
<p>另外一篇相关的文章在小工具专题里的</p>
<h3><a href='/blog/287908' target='_blank'>我的WEB设计契约--数据库篇</a></h3>
<p>
这些文章所讲的策略/契约和工具组成了我的完整的解决方案.</p>