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

look_w

测量性能当谈到测量 web 应用程序的性能，有一系列的工具可用于在 web 浏览器内部分析应用程序的速度和加载时间。这些工具一般是预先设置一段 JavaScript 代码来计算执行时间。还提供了分析页面加载产生的网络流量的方法，其中有产生的 HPPT 请求数量、加载的静态资源（图像、外部样式表、JavaScript 文件）的大小，等等。            
这一章中，您将了解各种工具，可根据具体情况预先设置并分析 JavaScript 应用程序中的网络活动。            
FirebugFirebug 是 Mozilla® Firefox® 的浏览器扩展，它为 web 开发人员提供了大量功能。这些功能包括 JavaScript 控制端、DOM 操作和选择、脚本调试、DOM 源浏览、分析、网络分析，等等。            
要执行 Firebug 中的 JavaScript 分析，导航到 Console 选项卡，单击 Profile 按钮。现在可以与页面中各种启用 JavaScript/Ajax 的特性交互，Firebug 将计时。Firebug 还提供控制端 API 与分析器交互。 显示的是 Firebug 分析器生成的报告样例屏幕截图。            
图 1. Firebug 分析器报告样例要使用 Firebug 的网络分析工具，只要单击 Net 选项卡。将会显示所有生成的 HTTP 请求、响应代码和接收的消息、接收来源域、文件大小、发送时间点。还可以深入这些请求，查看发送的 HTTP 头部、接收到的响应、所用文件相关缓存信息。 显示的是 Firebug 关于网络流量输出报告的样例。            
图 2. Firebug Net 面板报告样例Safari Web Inspector 和 Chrome Developer ToolsSafari® Web Inspector 和 Chrome® Developer Tools 提供了与 Firebug 相似的功能，他们看上去更漂亮。在 Safari 中，进入工具栏的 Develop 菜单（需要在 Safari 参数中启用）并选择 Show Web Inspector，打开 Web Inspector。单击检查器窗口顶部的 Profile 选项卡，点击底部左侧的圆形记录图标来启动分析。再次单击图标，以停止分析并生成报告。 显示了报告样例。            
图 3. Safari Web Inspector 分析器报告样例要分析应用程序的加载时间和 HTTP 请求，单击 Inspector 窗口顶部的 Resources 按钮。然后您可以选择查看所使用的网络资源的时间和大小的图片。 中显示的是漂亮的输出结果样例。            
图 4. Safari Web Inspector 资源报告样例Google Chrome 的 Developer Tools 与 Safari 一样（都是基于浏览器的 WebKit），可以在在 Developer 菜单中看到 Developer Tools。