JavaScript中的线程和CPU的调度

JavaScript中的线程和CPU的调度

几乎所有人前端开发都知道“JavaScript是单线程的”，这句话到底对不对呢？ setTimeout(foo, 100); ...; 一定会在当前语句执行100ms后唤起吗？浏览器打开一个页面，从下载到内容到呈现在屏幕上，经过了那些“手续”呢？如何利用新生代浏览器的GPU加速功能？…………
下面带您一一揭开这些问题的答案：

“重新”认识javascrpt的“线程”

诚如大多数人所言，js执行期是单线程的，但是要真正理解其中的远离，jquery作者John.Resig的这篇《How JavaScript Timers Work》 讲解的非常透彻: 同一个浏览器中所有的JavaScript都只在单一线程中执行，那些异步的事件（比如说鼠标点击，或者timer）只在执行期出现空闲的时候才会运行。这个用图最能表示清楚了，参见下图： 

JavaScript中的线程和CPU的调度

在这个示例中有很多信息可以挖掘，但是完全理解了之后你将会更清楚地认识到异步的JavaScript是怎么执行的。这是个一维的图：竖直方向上的是时间，单位为毫秒。蓝色的框表示正在执行的JavaScript片段。比如，第一块JavaScript执行了约18ms，而鼠标点击则执行了约11ms，以此类推。

由于JavaScript向来都只能在同一时间执行一块代码（这是由它单线程的本质决定的），所以每一个代码块都“阻塞”了其他的异步事件。这意味着当异步事件发生时（比如鼠标点击、timer触发或者是XMLHttpRequest完成），这些事件将进入到一个队列中等待执行（队列的实现方法因浏览器而异，我们在此只讨论一个简化的情况）。

刚开始，在第一个JavaScript块中，有两个timer被初始化了：一个10ms的setTimeout和一个是10ms的setInterval。由于timer（这里的timer指setTimeout中的timer，而下文中的interval则指setInvertal中的timer）开始的时间，实际上它在第一个代码块结束前就已经触发了。然而请注意，它并不会马上执行（事实上由于单线程的存在，它也无法做到马上执行）。相反的，这个被延期执行的函数进入队列中，等待在空闲的时候被执行。

另外，在第一个JavaScript块中，我们看到一个鼠标点击事件也发生了。而与这个异步事件（我们不知道用户什么时候会去执行一个动作，因此将其认为是一个异步动作）相关的JavaScript回调函数也无法立马执行，正如timer一样，它也进行到队列中等待被执行。

当第一个JavaScript块被执行完之后，浏览器问了一个问题：有正在等待被执行的代码吗？在这个例子中，鼠标点击事件和time事件都正在队列中等待。于是浏览器选了一个（鼠标点击事件），然后马上执行它。而timer只能继续等下去。

注意当鼠标点击事件正在执行的时候第一次的interval事件也触发了，与timer一样，它的事件也进入队列等待之后执行。然而，注意，当interval再次触发的时候（这个时候timer的事件正在执行），这一次它的事件被丢弃了。如果你在一个大的JavaScript代码块正在执行的时候把所有的interval回调函数都囤起来的话，其结果就是在JavaScript代码块执行完了之后会有一堆的interval事件被执行，而执行过程中不会有间隔。因此，取代的作法是浏览器情愿先等一等，以确保在一个interval进入队列的时候队列中没有别的interval。

事实上，我们可以在例子中看出：当第三个interval触发的时候这个interval自身正在执行。这告诉我们一个重要的事实：interval是不管当前在执行些什么的，在任何情况下它都会进入到队列中去，即使这样意味着每次回调之间的时间就不准确了。

最后，当第二个interval回调执行完后，我们可以看到队列已经被清空，没有什么需要JavaScript引擎去执行的了。这表明浏览器现在等待一个新的异步事件发生。于是在50ms的时候我们看到interval又触发了。这一样，由于没有什么东西挡住了它的执行，它马上就触发了。

让我们来看一个例子，这个例子更好地阐释了setTimeout和setInveral之间的区别。

1setTimeout(function(){

2/* 一个很长的代码块…… */

3setTimeout(arguments.callee, 10);

4}, 10);

5setInterval(function(){

6/* 一个很长的代码块…… */

7}, 10);

乍看上去，这两段代码在功能上似乎是相同的，可实际上并非如此。setTimeout的代码在前一次的回调执行完后总是至少会有10ms的延时（有可能会更多，但是绝对不会更少）；而setInterval则总是在每10ms的时候尝试执行一次回调，它不管上一次回调是什么时候执行的。

我们在此学到了很多，让我们重述一下：

• JavaScript引擎只有一个线程，这使得异步事件必需列队等待执行。
• setTimeout和setInterval在如何执行代码上有着本质地区别。
• 如果一个timer在将要执行的时候被阻塞，它将会等待下一个时机（比预期的延时要长）。
• 如果interval的执行时间较长（比指定的延时长），那么它们将连续地执行而没有延时。

了解了JavaScript引擎的工作方式，尤其是知道它在有很多异步事件发生的时候是怎么工作的，为我们在写进阶的应用程序代码打下了坚实的基础。

本文出自Tencent Wuhan Blog