提高 js `for` 循环的性能答案

【问题标题】：Improve performance in js `for` loop提高 js `for` 循环的性能
【发布时间】：2013-03-20 05:40:59
【问题描述】：

因此，我正在寻找一些关于在以 360 次迭代结束的循环中切换元素的类（三个一组）的最佳方法的建议。我试图避免嵌套循环，并确保良好的性能。

我有什么：

// jQuery flavour js
// vars
var framesCount = '360'; // total frames
var framesInterval = '5000'; // interval
var statesCount = 3; // number of states
var statesCountSplit = framesInterval/statesCount;
var $scene = $('#scene');
var $counter = $scene.find('.counter');    

// An early brain dump
for (f = 1; f < framesCount; f += 1) {
  $counter.text(f);
  for (i = 1; i < statesCount; i += 1) {
    setTimeout(function() {
        $scene.removeClass().addClass('state-'+i);
      }, statesCountSplit);
    }
}

因此，您会看到，对于 360 个frames 中的每一个，每隔一段时间就会有三个班级切换。虽然我还没有测试过，但一旦frames 的值达到数千（它可能），我担心这里的性能会受到影响。

这个 sn-p 显然有缺陷（非常），请让我知道我能做些什么来使这个 a) 工作，b) 有效工作。谢谢:-)

【问题讨论】：

您可能需要 parseInt 的 framesInterval/statesCount 来最小化每次转换为 int 的次数

标签： javascript animation settimeout setinterval

【解决方案1】：

一些一般性建议：

1) 不要在循环中声明函数

这真的需要在 setTimeout 中完成吗？

for (i = 1; i < statesCount; i += 1) {
    setTimeout(function() {
        $scene.removeClass().addClass('state-'+i);
    }, statesCountSplit);
}

2) DOM 操作代价高昂

这真的有必要吗？这将切换得如此之快，以至于您不会注意到计数器上升。我不明白这里的意图，但似乎没有必要。

$counter.text(f);

3) 不要过早优化

在您的问题中，您表示您尚未分析相关代码。目前，只有大约 1000 次迭代，应该不会那么糟糕。 DOM 操作还不错，只要您不插入/删除元素，而只是修改它们。

此时我真的不担心性能。您还可以应用其他微优化（例如将 for 循环更改为递减的 while 循环以保存比较），但您没有表明性能存在问题。

结束的想法

如果我理解正确的逻辑，你的代码不匹配它。代码当前将增加.counter，只要处理器可以迭代你的循环（应该只需要几毫秒左右），你的每个“类切换”将在几毫秒内触发 360 次。

先修复你的逻辑错误，如果有问题再考虑优化。

【讨论】：

@BIOS - 可能应该是第 1 点，但我想我会尝试至少先回答这个问题......
@tjameson，感谢您的一些好主意。我意识到循环还没有完全存在，您的回答和 slebetman 的回答结合起来为这种情况提供了很多启示。谢谢你们！

【解决方案2】：

不要为此使用 for 循环。这将生成大量已知会减慢浏览器速度的 setTimeout 事件。改为使用单个 setTimeout：

function animate(framesCount, statesCount) {
     $scene.removeClass().addClass('state-'+statesCount);
     if (framesCount) {
         setTimeout(
             function(){
                 animate(framesCount-1,(statesCount%3)+1);
             },
             statesCountSplit
         );
     }
}

animate(360*3,1);

【讨论】：