javascript - 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 秒。并且在执行过程中，在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 秒。并且在执行过程中，我可以在Chrome中正常操作。

这是怎么回事？

我知道 setTimeout 会将控制权交给浏览器来完成 UI 工作，这将使页面响应。例如，当我在页面的 mousemove 期间进行一些计算时，我会将执行的计算延迟以防止它阻塞 UI。

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

Answer 1

And during the execution, I can operation in Chrome normally.

不是真的。主 chrome 窗口将与其他情况一样卡住(只是时间较短)。调试工具是一个单独的线程，但不会减慢速度。

But why it reduce the total execution time of the same codes?

如果您在开发工具中运行，它会起作用。如果您在虚拟机可以进行属性优化的情况下实际执行代码，则时间是可比的(将近 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();