最大限度利用 JavaScript 和 Ajax 性能（5）

look_w

无需改变代码，提升性能现在您已测量了应用程序的性能，并决定了让性能显著提升，您可能在考虑深入探究并修改程序代码。是的，某些方面需要这么做，不过还有一些方法可以在完全不改变应用程序代码的情况下提升 JavaScript 和 Ajax 性能。            
合并 JavaScript 源文件如果是一个大型的 JavaScript 应用程序，可能会向页面中加载多个外部 JavaScript 源文件，以提供各种功能。也许您正使用像 jQuery 这样的框架，并加入了提供各种额外特性的插件。很可能还有您自己的应用程序底层 JavaScript 代码，这将程序分割成多个文件。            
尽管将 JavaScript 分成几个文件有其优势，但却对性能有严重影响。对于加载到 web 应用程序中的每个外部 JavaScript 文件，都要执行 HTTP 请求，这极大增加了脚本的加载和运行时间。为了减少请求数，强烈建议您尽可能合并 JavaScript 源文件。尤其是，如果一个插件只用于一个页面，就不要将它放在单独文件中。实际上，是否应该将其作为内联脚本，还有争论，这取决与它是否会被其他页面使用。也不能绝对地将所有东西都放入一个文件中，不过应用程序发出的 HTTP 请求数越少，应用程序加载越快。            
缩减 JavaScript 源文件好的编程实践指导原则讲到，编写应用程序代码时，应当遵循一致的风格，这对 JavaScript 和其他任何语言都适用。问题是，加入的所有空格、分行符、注释都增加了脚本文件大小和应用程序的加载时间。            
为了降低 JavaScript 文件大小，强烈建议您在将文件放入产品环境前缩减 文件大小。缩减一般包括取出代码额外内容以获得紧凑和更小的文件。对潜在节约举例说明，单缩减本身就使最新版本从编写时的 155KB 减小到 70.6KB。节省了约 55%。            
当然，建议您缩减源代码是没什么问题，但您会怎么做呢？聪明的人是不会手工缩减代码的，幸运的是，有很多工具能帮您完成这项工作。其中一些流行的工具有 Douglas Crockford 的 JSMIN、Dean Edwards 的 Packer，以及 Dojo 工具中的压缩器。我个人最喜欢的是 Yahoo!® Inc 的 YUI Compressor。关于这些工具的更多信息，见 。            
用 gzip 压缩 JavaScript 源文件在前一章中，您了解到可以通过缩减 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 文件缓存两天，您可以将  中的指令添加到 .htaccess 文件中保存 JavaScript 文件的位置（假设有一个文件专门保存 JavaScript 文件；如果没有，就需要在 Apache 配置文件中设置）。            
清单 11. 将 JavaScript 文件缓存两天的指令

1 2	ExpiresActive on ExpiresDefault "access plus 2 days"

当然，缓存 JavaScript 文件的问题是，如果进行更改，则使用缓存版本的用户在超时期限内再次访问将使用缓存的版本，而非更新后的版本。幸运的是，您可以通过向加载脚本的 <script> 标记中添加带版本号的查询语句来强制用户获取最新版本。该查询语句对 JavaScript 代码没有影响，但对于浏览器而言，这是个完全独立的文件，并会下载新版本。当然，每次更改文件后就增加版本号很重要。在大型应用程序中，应建立自动处理此过程的脚本，以防此类问题发生。