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

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

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

仅当setInterval导致浏览器冻结时，这可能会有所帮助如果这对您没有帮助，如果您对旧浏览器不太关心，也许您可以使用web-workers实现一种“线程”。这样你的代码就可以在不同的线程中执行，这肯定会加速你的应用程序（a.k.a再见浏览器冻结）。

希望这有帮助！

Answer 3

如果您无法优化实际代码，则可以围绕循环迭代的执行进行传播，以保持浏览器的响应速度。根据{{3}}，您可以保持UI并且仍然感觉对用户的响应的最长时间是100毫秒。有关如何使用setTimeout执行此操作的技巧，请参阅Robert Miller's paper。

如何减少这个javascript代码的CPU使用率？

3 个答案: