最大限度利用 JavaScript 和 Ajax 性能(4)

　　这段代码效率很低，因为每次循环迭代时都要计算 myArray 数组的长度。这对小数组无关痛痒，但对大数组影响巨大。提高循环性能的方法很简单，甚至不需多加一行代码(见 )。

　　清单 9. 用 for 循环遍历数组(高效)

for(var i=0, arrayLength=myArray.length; i < arrayLength; i++) { 
    //do something 
}

　　清单 9 中，我们把对 myArray.length 的引用移到了语句的初始化部分，将其赋给了一个变量。这样，它只在循环第一个迭代时执行，从而在以后每次迭代时节省了宝贵的时间。

　　使用 DOM

　　完全遍历和操作 DOM 会给 web 应用程序造成很大性能负担。问题是，与 DOM 的交互必不可少，能给应用程序带来快速响应和丰富接口。DOM 操作的一个特别问题是浏览器需要在屏幕上回流和重绘(主要是重新呈现)元素。因此，减少代码中回流和重绘的次数就尤为重要。

　　再看看前面中的例子，我们用一个 ID 为 myField 的元素，对其应用三个不同的样式属性。这将导致三次独立的回流(re-flow)和重绘(re-paint)，效率很低，因此我们可以做些小更改。这些语句效率低下，可以考虑将这些操作合并成一句。显示的是效率更高的样例。

　　清单 10. 通过合并修改内容来提高 DOM 操作的性能

var myField = document.getElementById("myField"); 
myField.style.cssText = "background-color: #CCC; color: #FF0000; font-weight: bold";

　　通过将样式修改合并起来，结果是只有一次回流和重绘，而且，响应速度和性能也得到提升。

　　本章包含了可在应用程序中发挥最佳性能的 JavaScript 和 Ajax 开发最佳实践。遗漏在所难免。请查阅，其中提供了重点介绍高性能 JavaScript 最佳实践的优秀文章、教程、书籍的链接。

　　测量性能

　　当谈到测量 web 应用程序的性能，有一系列的工具可用于在 web 浏览器内部分析应用程序的速度和加载时间。这些工具一般是预先设置一段 JavaScript 代码来计算执行时间。还提供了分析页面加载产生的网络流量的方法，其中有产生的 HPPT 请求数量、加载的静态资源(图像、外部样式表、JavaScript 文件)的大小，等等。

　　这一章中，您将了解各种工具，可根据具体情况预先设置并分析 JavaScript 应用程序中的网络活动。

　　Firebug

　　Firebug 是 Mozilla® Firefox® 的浏览器扩展，它为 web 开发人员提供了大量功能。这些功能包括 JavaScript 控制端、DOM 操作和选择、脚本调试、DOM 源浏览、分析、网络分析，等等。

　　要执行 Firebug 中的 JavaScript 分析，导航到 Console 选项卡，单击 Profile 按钮。现在可以与页面中各种启用 JavaScript/Ajax 的特性交互，Firebug 将计时。Firebug 还提供控制端 API 与分析器交互。图 1 显示的是 Firebug 分析器生成的报告样例屏幕截图。

　　图 1. Firebug 分析器报告样例

　　要使用 Firebug 的网络分析工具，只要单击 Net 选项卡。将会显示所有生成的 HTTP 请求、响应代码和接收的消息、接收来源域、文件大小、发送时间点。还可以深入这些请求，查看发送的 HTTP 头部、接收到的响应、所用文件相关缓存信息。图 2 显示的是 Firebug 关于网络流量输出报告的样例。

　　图 2. Firebug Net 面板报告样例

　　Safari Web Inspector 和 Chrome Developer Tools

　　Safari® Web Inspector 和 Chrome® Developer Tools 提供了与 Firebug 相似的功能，他们看上去更漂亮。在 Safari 中，进入工具栏的 Develop 菜单(需要在 Safari 参数中启用)并选择 Show Web Inspector，打开 Web Inspector。单击检查器窗口顶部的Profile 选项卡，点击底部左侧的圆形记录图标来启动分析。再次单击图标，以停止分析并生成报告。图 3 显示了报告样例。

　　图 3. Safari Web Inspector 分析器报告样例