javascript中的setTimeout让函数运行得更快

Question

我有一个应用程序,我必须将很多值推送到数组,所以我测试执行时间:

var st = new Date().getTime();
var a = [];
for (var i = 0; i < 20971520; i++) {
  a.push(i);
}
var ed = new Date().getTime();
console.info((ed - st) / 1000);
console.info(a.length);

我直接在Firefox控制台和Chrome控制台中运行代码,而且成本很高37 seconds.在执行过程中,即使鼠标也可以在Chrome中移动,但没有交互式效果.

然后我改变代码:

function push() {
  var st = new Date().getTime();
  var a = [];
  for (var i = 0; i < 20971520; i++) {
    a.push(i);
  }
  var ed = new Date().getTime();
  console.info((ed - st) / 1000);
  console.info(a.length);
}

var tr = setTimeout(push, 50);

简化放码的功能,并使用调用它setTimeout,它的成本0.844 second.在执行期间,我可以正常在Chrome中操作.

这里发生了什么？

我知道setTimeout将把控件放到浏览器上来做UI工作,这将使页面响应.例如,当我在页面的鼠标移动期间进行一些计算时,我会将计算执行延迟以防止它阻止UI.

但为什么它减少相同代码的总执行时间？

Answer 1

在执行期间,我可以正常在Chrome中操作.

不对.主要的镀铬窗口将与其他情况一样冷冻(仅适用于较短的时间).调试工具是一个单独的线程,但不会减慢速度.

但为什么它减少相同代码的总执行时间？

如果您使用开发工具运行它.如果您实际执行代码,VM可以进行属性优化,则时间可比(近1秒).例如

   var st = new Date().getTime();
   var a = [];
   for (var i = 0; i < 20971520; i++) {
       a.push(i);
   }
   var ed = new Date().getTime();
   console.info('normal', (ed - st) / 1000);
   console.info(a.length);

   function push() {
       var st = new Date().getTime();
       var a = [];
       for (var i = 0; i < 20971520; i++) {
           a.push(i);
       }
       var ed = new Date().getTime();
       console.info('timeout', (ed - st) / 1000);
       console.info(a.length);
   }

   var tr = setTimeout(push, 0);

http://jsfiddle.net/gu9Lg52j/你会看到normal执行速度一样快setTimeout.

此外,如果将代码包装在函数中并在控制台中执行,即使没有,因此时间也是可比较的,setTimeout因为VM可以在函数定义和执行之间进行优化:

  function push() {
       var st = new Date().getTime();
       var a = [];
       for (var i = 0; i < 20971520; i++) {
           a.push(i);
       }
       var ed = new Date().getTime();
       console.info('timeout', (ed - st) / 1000);
       console.info(a.length);
   }
   push();