Ajax 性能工具

2008 年 5 月 26 日

浪费服务器资源会影响 Ajax 应用程序的性能，从而导致过度的HTTP 请求、高内存消耗以及需要进行大量的轮询才能使应用程序工作。developerWorks 的专栏作家 Judith Myerson推荐了一些开源工具和 Firefox 插件，您可以利用它们解决问题并提高 Ajax 应用程序的性能。

简介

在我撰写的 developerWorks 文章 “提高 Ajax 应用程序性能，避开 Web 服务漏洞” 中，我讨论了过度的带宽、频繁的 HTTP 请求和内存泄漏，这些因素促成了网络瓶颈。本文演示了如何消除或减少瓶颈从而提高 Ajax 应用程序的性能。

developerWorks Ajax 资源中心
请访问 Ajax 资源中心，这个一站式中心提供了关于开发 Ajax 应用程序的各种免费工具、代码和信息。由 Ajax 专家 Jack Herrington 主持的活跃 Ajax 社区论坛 为 Ajax 开发人员提供了相互交流和解决问题的平台。

通过本文您将了解一些有用的性能工具，它们能帮助您实现以下目标：

• 减少应用程序发出的 HTTP 请求的数量
• 监视 I/O 磁盘问题
• 分析网络流量
• 发现额外调用
• 降低内存消耗
• 解决其他性能问题

我所介绍的工具可以分为两类：开源工具和 Firefox 插件。

开源工具

本节介绍下列工具：

• Apache Bench：在服务器上模拟一个加载
• Tsung：测试多协议加载
• Bonnie++：监视 I/O 磁盘问题
• Wireshark：分析网络流量
• Comet server application tools：用于实现更长期的连接、更高容量的并发性、更低的延迟和更低的服务器负载

本文假设您已经通过优化 JavaScript 和 HTML 代码去除了额外的调用以及不必要的标记和多余的行。如果您还没有这样做，建议您在利用 Firefox 测试服务器性能之前使用 Dojo Toolkit（一个 Ajax 工具包）去除额外的调用（参见参考资料，提供了关于 Dojo 及本文所介绍的其他工具的链接）。

Apache Bench

如果需要在 Apache 服务器（或其他 Web 服务器）上模拟一个加载，可以使用 Apache Bench（包含在 Apache HTTPd标准发行版里）。这个基准测试工具将连接到您的 Web服务器，然后模拟多个用户。通过以下三个选项获得需要的信息；否则，默认设置将不会提供代表性基准测试结果。

选项说明默认设置-n requests获得服务器每秒能够处理的请求数只执行单个请求-c concurrency获得每个服务器在性能受损之前执行的并发请求数每次执行一个 HTTP 请求；即没有并发性-t timelimit将用于基准测试会话的时间的秒数设置为 50000没有时间限制

其他选项使您可以准确地控制要发送的请求、代理设置、用户身份验证和 cookie。

用 Apache Bench 进行基准测试的同时，可能需要记录客户机请求的日志，用于后面的分析。这可以通过位于 mod_log_config.c 的 Apache Module mod_log_config 来实现。

日志使用可自定义的格式编写，并且可以直接写到一个文件或一个外部程序里。可以有选择地记录日志，从而能够根据请求的特征包含或从日志中删除单个请求。

这个模块能够提供以下指令：

指令说明TransferLog创建日志文件LogFormat设置自定义格式CustomLog定义日志文件

在每个服务器上可以多次使用 TransferLog 和 CustomLog 指令，使每个请求可以被记录到多个文件里。

Tsung

Tsung是一个开源、多协议、分布式的负载测试工具。它的用途是通过模拟用户使开发人员能够测试基于 IP的客户机/服务器应用程序的可伸缩性和性能。您可以利用它进行加载和加强对运行 Ajax 应用程序的 HTTP服务器的测试。它可以分布到几个不同的客户机上，并可以同时在各种场景中模拟数千个虚拟用户。

Bonnie++

Bonnie++ 可以监视磁盘 I/O 问题。这些问题可以导致 Ajax 应用程序的 SQL 查询缓慢，也会影响数据库性能。例如，查询中简单的 EXPLAIN 语句和大量的查询日志分析将使查询变得缓慢。

用 C++ 语言编写的 Bonnie++ 可以在不同版本的 UNIX 上编译，也可以在基于 Windows® 的机器上运行。下面是可以在 UNIX® 机器上运行的 Bonnie++ 命令的示例清单：

清单 1. Bonnie++ 命令

                -u root /-d /mnt/vol-001/test-vol001/testfiles /-s 2016M /-n 10:102400:1024:1024 /-m bonnie /-q > /var/tmp/bonnie_test.csv 2> /var/tmp/bonnie_test.out  

 

下面的列表解释了每个命令的功能：

命令说明-u root作为根运行。-d /mnt/vol-001/test-vol001/testfiles指定创建测试文件的位置。-s 2016M指定为接下来的测试创建的文件的大小。该选项指定的大小为系统内存（1 GB）的 2 倍，从而避免测试缓存。-n 10:102400:1024:1024指定文件的大小、最大文件数和最小文件数，以及要创建的目录数。该选项将文件的大小指定为 100 MB，最大文件数为 102400，最小文件数为 1024，目录的数量为 1024。-m bonnie为输出提供一个 Machine Name。-q使用静默模式，这样可以把输出重定向到文件 —— stdout 是 csv 格式的输出，而 stderr 是人类可读的格式的输出。

您可以更改指定参数。对于每个 Bonnie++ 测试，可以根据自己的意愿运行多次（5 或 10 次），但要确保在两次运行之间留出 60 秒的休眠时间，使工具恢复稳定，从而得出一个平均结果。

Wireshark

Wireshark（以前称为 Ethereal）是一个多平台网络协议分析器。它能够从 Ethereal、Token-Ring、FDDI、serial（PPP andSLIP）、802.11 无线 LAN、ATM 连接以及 Linux® 上任何受 libpcap 接口支持的设备读取实时数据。

您可以检查数百个协议、分析实时和离线捕获以及使用包含 3 个窗格的包浏览器；可以选择转储网络流量、转储和分析网络流量或者交互地转储和分析网络流量；可以从包的 ASCII hexdump 生成捕获文件，然后编辑和合并捕获文件。

Wireshark 发行版包含以下的 man 页面。根据 UNIX / POSIX 系统的提示输入 man 命令查明每个页面的活动，或从 Windows 系统的 Start 菜单查看 HTML 文件。

命令说明capinfos输出关于捕获文件的信息dumpcap转储网络流量editcap编辑和/或转换捕获文件的格式mergecap将两个或多个捕获文件合并为一个text2pcap从包的 ASCII hexdump 生成捕获文件tshark转储和分析网络流量wireshark-filterWireshark 过滤器语法和引用wireshark交互地转储和分析网络流量

Comet Server 实现工具

实时或高度协作的应用程序需要大量的 Ajax 轮询才能工作。浏览器显式地请求用于更新当前页面的大量数据。它定期地轮询服务器，询问是否有新的事件发生（例如，每隔 5 秒钟询问服务器：“有新的事件吗？”）

问题是当轮询重复地询问是否有新事件发生，但没有得到服务器的响应时（例如，“没有新事件，稍后再试”），过高的轮询频率会使服务器因为处理否定响应而浪费资源和带宽。可以实现可预测信息更新的应用程序或支持相对较少更新的应用程序可以使用轮询，同时不会浪费服务器的资源。

您可能需要考虑切换到 Comet 服务器实现，比如 Cometd、Lightstreamer、KnowNow 或 lighttpd。Comet 应用程序在客户机和服务器之间使用长期的 HTTP 连接，允许服务器进行延迟响应，当新数据可用时把它推 到客户机。它们使用两种策略其中之一：流线化 和长期轮询。

在使用流线化 Comet 的应用程序中，针对所有的 Comet事件，浏览器向服务器打开一个单一的持久连接。每当服务器发送一个新的事件，浏览器将对事件进行解释，服务器和浏览器都没有关闭这个连接。对于长期轮询，浏览器向服务器发出一个 Ajax样式的请求。在把新的数据发送到浏览器之前，服务器将保持打开状态。在事件发送完毕后，服务器关闭该连接并马上打开一个新的连接。

除了长期的连接以外，Comet 服务器进行了优化，与典型的服务器相比，它支持更高容量的并发性、更低的延迟和更低的服务器负载。

Javacode:Dojotool 工具包详解

在对 Ajax 应用程序的高负载、额外轮询和/或网络流量瓶颈进行测试之前，仔细研究 JavaScript代码。将代码的一行移动到代码的另一部分会导致性能差异。如果您正在使用的是 Ajax 工具包（如 Dojo），您应该先配置好 Web服务器，使它能够积极地缓存 JavaScript 文件，并迅速发送状态信息。通过利用 CSS，您还可以减少页面中的标记数。例如，去掉原来的 4行标记（参见清单 2）：

清单 2. 4 行标记

                                <table><tr>                <td>Hello Dojo</td>                </tr>                </table>            

 

现在变为：

<div class="script2">Hello Dojo</div>

确保去掉冗余的 CSS 脚本。

在应用程序中进行了其他一些操作之后，您可以获得能够补充 Firebug（Firefox 扩展）的配置代码。您可能会发现这些代码会过多地调用组件，因为它处于循环之中。从循环中去掉这些代码就可以解决这个问题。

 

回页首

Firefox 插件

两个有用的 Firefox 插件是 LiveHTTPHeaders（用于查看常规的 HTTP 流量）和Firebug（用于度量资源的加载时间）。其他相关的扩展包括 RAMBack（用于释放内存时发出通知）、Load TimeAnalyzer（用于度量 Web 页面的加载时间）、YSlow（用于分析 Web 页面）、iMacors for Firefox（用于测试Web 应用程序）以及 ColorBlind Ext（用于帮助患有色盲的人员）。

除了 LiveHTTPHeaders 以外（可直接从 Web 站点下载），通过以下步骤获得其他插件：

1. 打开 Firefox。
2. 先单击 Tools 然后再单击 Add-ons。
3. 在对话框底部的右下角，单击 Get Extensions。
4. 如果您看见一个安全警告，单击 OK。在查看加密页面时，可以选择是否显示警告框。
5. 选择需要下载并安装的插件。
6. 单击 Install，Firefox 将关闭。
7. 重新打开 Firefox。

LiveHTTPHeaders

LiveHTTPHeaders能够实现轻松查看所有常规的 HTTP 流量、XMLHttpRequests 和 Comet流量，包括在浏览器中查看完整的报头。您可以看到远程站点使用什么类型的 Web 服务器与 Ajax应用程序进行通信，甚至能够查看远程站点所发送的 cookie。Header Monitor 和 Header Spy 扩展包含来自LiveHTTPHeaders 的报头，这些报头将显示在状态栏面板上。Header Monitor 显示任何 Web 服务器返回的顶级文档的HTTP 响应报头。Header Spy 使您能够在多达 5 个状态栏面板上查看响应和请求报头。

负载分析工具

Firebug不仅可以查看脚本错误和 XMLHttpRequest 信息，还可以度量各种资源（如脚本和图像文件）的加载时间。Google 的 LoadTime Analyzer 工具能够帮助您测量 Firefox 需要多长时间才能加载 Web 页面并绘制出图表。通过使用基于 Yahoo的高性能 Web 站点规则的标准，YSlow 分析 Web 页面并告诉您页面缓慢的原因。YSlow 通过 Mozilla PublicLicense 获得许可，部分内容由第三方根据其他许可条例获得许可。

响应性能工具

Firefox 的 iMacros 记录并重播所有 Web 活动，并且包含许多 Ajax 元素的支持。它可以对 Web 应用程序进行功能、性能和回归测试。内置的 STOPWATCH 命令能够捕获精确的 Web 页面响应时间。

通过 Fasterfox 可以调优许多网络和呈现设置，例如，同步连接、管道化、缓存、DNS 缓存以及初始绘制延迟（initial paintdelay）。您可以通过独特的预取机制大幅度提高速度，通过静默加载和缓存所浏览页面上的所有链接，这种机制能够重新利用空闲带宽。

RAMBack导致 Firefox 发出一个释放内存的内部通知（否则这些内存将用于提高性能）。这会清空内部 Firefox 缓存。与其他扩展不同（使用Firefox 2.0.11 及之前的版本），这个插件需要使用 Firefox 3.0a8pre-3.0b2。

用户性能工具

通过根据用户的色盲类别处理页面上的图像和文本，ColorBlindExt 能够帮助色盲人士浏览 Web。这里面所包含的色盲检测测试能够提高色盲者的感知能力。

 

回页首

结束语

目前存在大量可用于 Ajax应用程序的性能提升工具，开发团队可以利用这一优势。要提高服务器、客户端任务和网络的性能，必须提前计划创建、测试和部署 Ajax性能改善项目。随时解决发现的任何性能问题，这样会对 Ajax 应用程序的高效开发和最终使用产生巨大影响。