标题: 提升 web 应用程序的性能(4) [打印本页]

---

作者: look_w    时间: 2018-9-23 12:16     标题: 提升 web 应用程序的性能(4)

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 将显示在控制台。

---

欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)

Powered by Discuz! 7.0.0