回到基础：用循环优化 JavaScript 程序

翻译：疯狂的技术宅 medium.freecodecamp.org/how-to-opti…

对于提升 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]);
}
复制代码

Do-While 循环

do-while 是第三种循环，它是 JavaScript 中惟一的后测试循环。由循环体和后测试条件组成：

var i = 0;
do {
    //循环体
} while (i++ < 10); 复制代码

解析

在这种类型的循环中，循环体老是至少执行一次。而后评估测试后的条件，若是它是true，则执行另外一个循环周期。

优化

// 原始循环
var k = 0;
do {
    process(items[k++]);
} while (k < items.length);
// 最小化属性查找
var k = 0,
    num = items.length;
do {
    process(items[k++]);
} while (k < num);
// 最小化属性查找和反序
var k = items.length - 1;
do {
    process(items[k]);
} while (k--);
复制代码

For-In 循环

最后一种是 for-in 循环。它有一个很是特殊的用途 —— 枚举 JavaScript 对象的命名属性。 它的语法以下：

for (var prop in object){
    //loop body
}
复制代码

解析

它的名称与 for 循环相似。可是工做方式彻底不一样。而这种差别使它比另外三种循环慢得多，后者具备相同的性能特征，因此争论哪一个循环最快是没有用的。

每次循环执行时，变量 prop 会获得 object 的一个属性。它将会不断执行，直到返回全部属性为止。这些是对象自身的以及经过其原型链继承的属性。

注意事项

永远不要用“ for-in ”来迭代数组成员。

这种循环的每次迭代都会在实例或原型上进行属性查找，这使得 for-in 循环比其它循环要慢得多。对于相同次数的迭代，可能会比其它循环慢七倍。

结论

• for ， while 和 do-while 循环都有相似的性能特征，所以没有哪一种类型比其余的更快或更慢。
• 避免使用 for-in 循环，除非你须要对大量未知对象属性进行迭代。
• 提升循环性能的最佳方法是减小每次迭代完成的工做量并减小循环迭代次数。

🔥 但愿这对你有用，感谢阅读！ 🔥

资源

高性能 JavaScript - Nicholas C. Zakas

欢迎关注公众号：前端先锋，获取更多前端干货！