在前一章中,您了解到可以通过缩减 JavaScript 源文件来显著减小其大小。实际上,可以通过使用 gzip 压缩这些文件来进一步减小其大小。最好的方法是让服务器将 JavaScript 文件发送到客户端之前就用 gip 压缩。如果您正使用 Apache 2(包含 mod_deflate)并且 JavaScript 文件存储在同一文件夹下,那就可以在 JavaScript 文件所在位置简单地创建一个 htaccess 文件。该文件的内容很简单:SetOutputFilter DEFLATE。
压缩 JavaScript 文件节约显著。在前一章中,您了解到缩减 jQuery 源代码让文件大小从 155KB 陡降到 70.6KB(减小 55%)。如果对缩减的文件再用 gzip 压缩,文件进一步减小到 24KB。通过缩减和压缩,文件大小总共减少约 85%。结果根据您的代码而不同,但节约是显著的。
缓存 JavaScript 源文件
让 web 浏览器正确缓存内容很重要。例如,如果您正使用 Apache(包含 mod_expires),并且想要客户端将 JavaScript 文件缓存两天,您可以将 清单 11 中的指令添加到 .htaccess 文件中保存 JavaScript 文件的位置(假设有一个文件专门保存 JavaScript 文件;如果没有,就需要在 Apache 配置文件中设置)。
清单 11. 将 JavaScript 文件缓存两天的指令
- ExpiresActive on
- ExpiresDefault "access plus 2 days"
当然,缓存 JavaScript 文件的问题是,如果进行更改,则使用缓存版本的用户在超时期限内再次访问将使用缓存的版本,而非更新后的版本。幸运的是,您可以通过向加载脚本的 <script> 标记中添加带版本号的查询语句来强制用户获取最新版本。该查询语句对 JavaScript 代码没有影响,但对于浏览器而言,这是个完全独立的文件,并会下载新版本。当然,每次更改文件后就增加版本号很重要。在大型应用程序中,应建立自动处理此过程的脚本,以防此类问题发生。
结束语
本文中,您了解到 JavaScript 和 Ajax 性能在现代网站和应用程序中的重要性。首先,您了解好的 JavaScript 编程事件如何对应用程序的响应和加载时间做出巨大改变。然后,您了解到如何通过使用分析和网络分析工具测量现有应用程序的性能。最后,您了解到如何通过使用一些简单但强大的技术减小文件大小和应用程序发出的 HTTP 请求数来加速现有应用程序,而无需修改应用程序源代码。
参考资料
学习
- (Brett McLaughlin,developerWorks,2006 年 1 月):学习如何使用 Ajax 和 XMLHttpRequest 对象创建不让用户等待服务器响应的请求/响应模型。
- (Michael Galpin,developerWorks,2010 年 3 月):学习如何使用 Ajax 创建跨浏览器的智能手机 web 应用程序。
- (Jesse Skinner,developerWorks,2008 年 2 月):学习如何使用 Ajax 改善网站,同时也避免不好的用户体验。
- (Jian Qiao Sun 和 Hua Pin Shen,developerWorks,2009 年 12 月):探索不同浏览器端缓存机制。
- (Kristopher William Zyp,developerWorks,2008 年 4 月):查看能发现并解决包含 Ajax 的应用程序中的性能问题的工具。
- (Joe Lennon,developerWorks,2010 年 2 月):简要了解能大大增强 JavaScript 开发的框架。
- Steve Souders 著(O'Reilly Media,2007 年 12 月):了解能用来加速网站运行的 14 个具体工具。
- Nicholas Zakas 著(O'Reilly Media,2010 年 3 月):学习能帮助您减少开发中瓶颈的技术和策略。
- :这篇来源于 Yahoo! Developer Network 的文章包含 35 项使 web 页面快速运行的最佳实践。
- 访问 ,这是各种开发人员的社区网络,涵盖 Web、 Mobile、Add-ons、Applications 和 Labs。
- 在 一文中学习 JSON 语法。
- 专门提供涵盖各种基于 web 解决方案的文章。
- 要收听面向软件开发人员的有趣访谈和讨论,请查看 。
获得产品和技术
- 是一个小型(只有 1,541 字节)、独立的 JavaScript 库,可用来根据需要轻松加载 JavaScript 和 CSS 文件。
- 获取 web 开发工具。
- 是一个用于 JavaScript 的简单的不可见的代码分析器。
- 根据高性能 web 页面的规则分析 web 页面并给出提升页面性能的建议。
- 是一个记录计算机与 Internet 之间所有 HTTP(S) 流量的 Web Debugging Proxy。
- 用 缩减 JavaScript 代码。
- 使用 改进您的下一个开发项目,这些软件可以通过下载或从 DVD 获得。
讨论
- 现在就创建 ,建立 JavaScript 或 Ajax 的 。与 取得联系,保持联系。
- 找到其他 。
- 分享您所知道的:。
- Roland Barcia 在博客中谈论 。
- 查看 developerWorks 成员的 。
- 快速获取答案:访问 。
- 快速获取答案:访问 。