如何减少这段 javascript 代码的 cpu 使用率？

Question

现在我正在优化一些js代码。
有一个名为appendXYZ的函数，它与其他函数一起在循环中调用。
它看起来如下所示：

function OuterFunc (){
  for(...){// about 150 times
     ...
     appendXYZ();
     //other dependent functions
     ...
  }
}

现在我很确定appendXYZ会导致CPU使用率很高 - 它可以达到50％，
但如果我删除这个功能，CPU 使用率只有 1%。
当CPU使用率达到50%时，浏览器几乎被冻结，页面缺乏响应能力。
更重要的是，OuterFunc 每 20 秒执行一次，appendXYZ 来自第三方脚本代码，我无法修改它。
那么如何优化这段代码？

现在我正在尝试使用setTimeout，但我不知道它是否有效。

Answer 1

我不知道该函数的作用，但您可以尝试使其调用异步。

它可能工作也可能不工作，并且仍然需要相同数量的 CPU，但它至少应该释放浏览器一点。

function OuterFunc (){
  for( var i = 0; i < 150; i++ ){
     // ...
     setTimeout( appendXYZ, 0 );
     //other dependent functions
     // ...
  }
}

同样，这可能会破坏该功能。如果没有看到更多代码就无法判断。

如果你要传递参数，那么你需要类似的东西：

function invoker( j ) {
   return function() {
       appendXYZ( j );
   };
}

function OuterFunc (){
  for( var i = 0; i < 150; i++ ){
     // ...
     setTimeout( invoker( i ), 0 );
     //other dependent functions
     // ...
  }
}

Answer 2

如果您无法优化实际代码，则可以分散执行循环迭代以保持浏览器响应。根据 Robert Miller 的论文，您可以持有的最长时间建立一个 UI 并且仍然感觉对用户的响应时间是 100 毫秒。有关如何使用 setTimeout 执行此操作的技术，请参阅UI 响应能力和 javascript。

Answer 3

一种可能性是 OuterFunc 执行时间大于其重复间隔。
换句话说，OutherFunc 的执行时间超过 20 毫秒，并且每 20 秒调用一次，它将产生一个 stackoverflow 异常，因为该函数在无限循环中完成执行之前被调用。
如果您使用 setInterval 每 20 毫秒执行一次 OuterFunc 函数，则可以通过使用 setTimeout 调用来模拟 setInterval 来解决此问题 函数：

(function helper(){
    OutherFunc();
    // after the OutherFunc is done executing, trigger it after 20 milliseconds
    setTimeout(helper, 20);
})();

仅当 setInterval 是导致浏览器冻结的原因时，这可能会对您有所帮助。
如果这对您没有帮助，并且您不太关心旧浏览器，也许您可​​以使用 网络工作者。这样你的代码就会在不同的线程中执行，这肯定会加快你的应用程序的速度（又名再见浏览器冻结）。

希望这有帮助！