通过循环优化 JavaScript 程序

前言

对于提高 JavaScript 程序的性能这个问题，最简单同时也是很容易被忽视的方法就是学习如何正确编写高性能循环语句。本文将会帮你解决这个问题。

我们将看到 JavaScript 中主要的循环类型，以及如何针对它们进行高效编码。

现在开始！

循环性能

谈到循环性能，争论的焦点始终会集中到关于应该使用哪种循环，哪个是速度最快、性能最好的？事实上，在 JavaScript 提供的四种循环类型中，只有一种比其他循环慢得多 ——  for-in 循环。 对循环类型的选择应基于你的需求而不是性能问题。

有两个主要因素有助于改善循环性能 —— 每次迭代完成的工作和迭代次数。

在下面的内容中，我们将会看到通过对这两点的优化，可以对循环的整体性能产生积极的影响。

For 循环

在 ECMA-262（定义JavaScript的基本语法和行为的规范）第三版中，定义了四种循环类型。第一个是标准的 for 循环，它与其他类 C 语言的语法相同：

for (var i = 0; i < 10; i++){//循环体}

这可能是最常用的 JavaScript 循环结构。要了解应该怎样对其进行优化，需要先进行一些分析。

解析

for 循环由四部分组成：初始化，预测试条件，循环体和后执行。它的工作方式如下：首先，执行初始化代码（var i = 0;）。然后是预测试条件（i <10;）。如果预测试条件的计算结果为 true，则执行循环体。之后运行后执行代码（i ++）。

优化

要优化循环中的工作量，第一步是最小化对象成员和数组项查找的数量。
还可以通过反转顺序来提高循环的性能。在 JavaScript 中，反转循环对循环的性能提升不大，除非你消除了额外的操作。

// 原始循环for (var i = 0; i < items.length; i++){process(items[i]);}// 最小化属性查找for (var i = 0, len = items.length; i < len; i++){process(items[i]);}// 最小化属性查找并反序for (var i = items.length; i--; ){process(items[i]);}

While 循环

第二种是 while 循环。下面是一个简单的预测试循环，由预测试条件和循环体组成。

var i = 0;while(i < 10){//循环体i++;}

解析

如果预测试条件的计算结果为 true，则执行循环体。如果不是 —— 它就会被跳过。每个 while 循环都可以用 for 替换，反之亦然。

优化

// 原始循环var j = 0;while (j < items.length){process(items[j++]);}// 最小化属性查找var j = 0,count = items.length;while (j < count){process(items[j++]);}// 最小化属性查找和反序var j = items.length;while (j--){process(items[j]);}