RIA 小部件性能主流 RIA Ajax 框架，如 ExtJS、YUI、Dojo 及其他，都提供一些精巧的小部件库，以增强用户体验。与其他框架相比，Dojo 在企业开发领域更强大，这是由于：
- Object-oriented programming (OOP) 编码
- 跨平台
- 本地数据存储的 Dojo 离线 API 支持
- DataGrid、2D 和 3D 图形（图表组件提供了在浏览器展示报表更简单的方法）
Dojo 在很多网站广泛使用。我们将使用 Dojo 举例，分析 RIA 小部件的性能。可根据具体情况使用 Dojo 小部件调整工具，有 Page Speed、Rock Star Optimizer 及 Jiffy。我们强烈建议使用 YSlow 和 Firebug。
YSlowYSlow 根据一组高性能 web 页面准则，通过检查页面上所有组件，包括由 JavaScript 创建的，来分析 web 页面性能。YSlow 是一个集成了 Firebug web 开发工具的 Firefox 插件；它可提供提升页面性能的建议、总结组件性能、显示页面统计数据并提供用于性能分析的工具。
显示的是 YSlow Grade 选项卡上的信息。
图 3. YSlow Grade 选项卡  YSlow 的 web 页面建立在 22 条可测试的规则基础上，这些规则在下方按重要性和效果排列。研究显示，按照以下规则，web 页面响应时间可提升 25% 到 50%：
- 尽量减少 HTTP 请求数。
- 使用内容发布网络（CDN）。
- 添加 Expires 或 Cache-Control 头部。
- 用 Gzip 压缩内容。
- 将样式表放在顶部。
- 将脚本放在底部。
- 避免使用 CSS 表达式。
- 将 JavaScript 和 CSS 放在外部。.
- 减少 DNS 搜索。
- 精简 JavaScript 和 CSS。
- 避免使用重定向。
- 删除重复的脚本。
- 配置 ETags。
- 使 Ajax 可缓存。
- 使用 GET 进行 Ajax 请求。
- 减少 DOM 元素数。
- 消除 404 错误。
- 减小 cookie 大小。
- 对组件使用无 cookie 的域。
- 避免使用过滤器。
- 不在 HTML 中测量图片大小。
- 使 favicon.ico 尽可能小，可缓存。
中的 YSlow Statistics，对空缓存的访问用户和之前访问过页面的用户的页面大小做了对比。
图 4. YSlow Statistics 选项卡 Components 选项卡显示了每个组件及相关的性能信息。例如，如果组件被 gzip 压缩，或 ETag 有内容（如果的话），您都能看到。组件大小和超期时间也显示在 Components 选项卡中，如 所示。
Figure 5. YSlow Components 选项卡 FirebugFirebug 与 Mozilla Firefox 集成，使您在浏览网站时有大量开发工具随手可用。可以即时编辑、调试、监控 web 页面中的 CSS、HTML 和 JavaScript。
可以使用 Firebug Net 面板，如 所示，监控 web 页面产生的 HTTP 流量。它向用户展示了所有收集到的和计算出的信息。每个条目表示页面的一个请求/响应来回。
图 6. Firebug Net  Firebug Console 面板，如 所示，提供了两种监控代码性能的方法。
图 7. Firebug Console 面板 Profile对于某个特定的函数，使用 Profiler。JavaScript Profiler 是能用来测量每个 JavaScript 代码执行时间的 Firebug 特性。使用 JavaScript Profiler 来提升代码的性能，或是查看为什么某个函数运行时间过长。它与 console.time() ；类似，但 JavaScript Profiler 能提供更多代码内部过程细节。 console.time()对于特定代码段，使用 console.time()。控制台会显示您输入到命令行的命令的结果。可以使用 console.time(timeName) 函数测量某个特定代码或函数执行多长时间。该特性对于提升 JavaScript 代码的性能非常有用。 显示了一个样例。 清单 9. console.time() 样例1
2
3
4
5
| var timeName = 'measuringTime';
console.time(timeName); //start of the timer
for(var i=0;i<1000;i++){
//do something
console.timeEnd(timeName); //end of the timer
|
measuringTime:xxms 将显示在控制台。 |
