浏览器如何异步执行Javascript并渲染

这是jsfiddle上的代码

<script>
  function updateSync1() {
    for (var i = 0; i < 1000; i++) {
      document.getElementById('output').innerHTML = i;
    }
  }

  function updateSync2() {
    for (var i = 0; i < 1000; i++) {
      setTimeout(document.getElementById('output').innerHTML = i, 0);
    }
  }

  function updateAsync() {
    var i = 0;

    function updateLater() {
      document.getElementById('output').innerHTML = (i++);
      if (i < 1000) {
        setTimeout(updateLater, 0);
      }
    }

    updateLater();
  }
</script>

<div class="row btn_area">
  <button class="btn btn-info" onclick="updateSync1()">Run Sync 1</button>
  <button class="btn btn-info" onclick="updateSync2()">Run Sync 2</button>
  <button class="btn btn-info" onclick="updateAsync()">Run Async</button>
  <span class="label label-info pull-right" style="display:block;" id="output"></span>
</div>

http://jsfiddle.net/himaneasy/y1534ths/ http://jsfiddle.net/himaneasy/y1534ths/

当我点击“Run Sync 1”时，代码将直接运行到999。

当我点击“Run Sync 2”时，代码将直接运行到999。

当我单击“运行异步”时，页面将一页一页地呈现。

谁能帮助解释 Run Sync1 和 Run Sync2 之间的区别？ 为什么Run Sync 2中的setTimeout不能使其一一渲染？

JavaScript 执行是单线程 https://stackoverflow.com/questions/21718774/how-is-javascript-single-threaded。它使用任务队列和堆栈来执行东西。

这段代码：

for (var i=0;i<length;i++) {
     setTimeout(drawChartFunc,0);
}

将添加[长度]setTimeouts调用任务队列并随后执行所有任务（0 毫秒超时）。只有最后一个操作才会更新屏幕，因为所有超时任务都首先入栈（循环后，任务队列包含 [length]setTimeout来电）。每次超时执行drawChartFunc. Now drawChartFunc确实将屏幕更新函数放入任务队列中，但剩余的超时时间先到，因此首先执行下一个超时 - 只能执行屏幕更新函数after长度]setTimeout调用已完成（从任务队列/堆栈中获取）。这也是随后完成的，但速度非常快。如果您的眼睛经过训练可以看到纳秒转换，您可能已经在输出中发现了后续数字；）

Now

function updateLater() {
     drawChartFunc();
     i++;
     if (i < length) { 
         setTimeout(updateLater, 0);
     }
 }

将首先运行drawChartFunc将屏幕更新放入任务队列，然后放入增量i在任务队列上 - 如果适用 - 之后添加一个新的setTimeout到任务队列。换句话说，drawChartFunc被放入堆栈，即把屏幕更新放入堆栈，两者都被执行，随后超时被放入堆栈中，放入drawChartFunc在堆栈上...等等

关于 javascript 任务队列/堆栈：这个视频 http://vimeo.com/96425312对我来说真的很有用。

这是你的jsFiddle http://jsfiddle.net/KooiInc/k47rw5o4/，重写了一下。它向您显示了两种方法的排队过程。