如何减少这个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

如果您无法对实际代码进行优化，则可以在循环迭代的执行过程中进行扩展，以保持浏览器响应。根据罗伯特·米勒的论文的说法，你能保持一个UI并且仍然让它对用户有反应的最大时间是100毫秒。有关如何使用setTimeout实现此操作的技术，请参阅UI响应性和javascript。

Answer 3

一种可能是OuterFunc执行时间比重复间隔更长。

换句话说，OutherFunc执行时间超过20毫秒，每20秒被调用一次，这将产生一个堆栈过流异常，因为函数在无限循环中完成执行之前正在被调用。

如果您使用setInterval每20毫秒执行一次OuterFunc函数，可以通过使用setTimeout调用来模拟setInterval函数来解决这个问题：

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

只有当setInterval是导致浏览器冻结的原因时，这才可能对您有所帮助。

如果这对您没有帮助，如果您不太关心旧浏览器，也许您可以使用网络工作者实现一种“线程”。这样，您的代码将在不同的线程中执行，这肯定会加快您的应用程序(即拜浏览器冻结)。

希望这能有所帮助！