图 4. Safari Web Inspector 资源报告样例
Google Chrome 的 Developer Tools 与 Safari 一样(都是基于浏览器的 WebKit),可以在在 Developer 菜单中看到 Developer Tools。
Internet Explorer Developer Tools
Internet Explorer® 8 也有一组 Developer Tools。单击 F12 启动 Developer Tools 窗口。Internet Explorer 的工具提供一组与 Firebug 相似的特性,而它提供了一个更强大的测试 JavaScript 函数性能的分析器。在 Developer Tools 中,单击 Profiler 选项卡并单击 Start Profiling 按钮开始分析应用程序。让应用程序执行想要测试的函数然后单击 Stop Profiling 生成报告。生成报告应与 图 5类似。
图 5. Internet Explorer Developer Tools 分析器报告样例
不巧的是,Internet Explorer 的 Developer Tools 不包含网络分析器。如果您想要用 Internet Explorer 分析应用程序的网络流量,可以使用 Fiddler 工具。它可用于发出 HTTP 请求的所有应用程序,包括 Internet Explorer。想要了解更多关于 Fiddler 的信息,见 参考资料。
YUI Profiler
YUI Profiler 是用 JavaScript 编写的代码分析器。与包含在 web 浏览器中的分析器工具(或者是像 Firebug 一样的浏览器扩展)不同,YUI 分析器不可见,而且必须包含在 web 页面中。使用它的好处是可以明确定位到应用程序中需要分析的部分(而不只是执行的函数)。YUI Profiler 可以注册要测量的函数、类构造函数和对象。您可以使用分析器生成结果报告,它提供了一个过滤函数,可以精确定位到您希望测量的目标区域。配置文件报告是 JSON 格式的,可以轻松将其导入您自己的应用程序中,然后您可以生成表形和基于图表的数据视图。
YUI Profiler 一个主要优点是它不针对某个特定浏览器。它甚至可在有 A 级浏览器的移动设备上运行,例如 Apple® iPhone®、Android® 设备及 Nokia® N95 上的基于 WebKit 的浏览器。
更多关于 YUI Profiler 的信息,见 参考资料。
YSlow
YSlow 是添加到 Firebug 扩展中的 Firefox 扩展,提供对 web 页面加载和执行的计分功能。它提供对 JavaScript 和 web 页面性能各方面的总体分级和详细分析。在我的测试中,我在发出 91 个 HTTP 请求的页面中运行 YSlow,评级为 C。它给出一个有用的提示,页面有 10 个外部 JavaScript 脚本,建议我将其合并成一个。
评级的其他部分还包括添加超期头部、使用 gzip、将 JavaScript 放在页面底部、减少 JavaScript 和 CSS、删除重复的 JavaScript 和 CSS 代码,等等。图 6 显示的是 YSlow 输出样例。
图 6. YSlow 报告样例
无需改变代码,提升性能
现在您已测量了应用程序的性能,并决定了让性能显著提升,您可能在考虑深入探究并修改程序代码。是的,某些方面需要这么做,不过还有一些方法可以在完全不改变应用程序代码的情况下提升 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 源文件