【转】深切明白JS单线程机制【原文作者：MasterYao】

2019年8月31日 171次阅读 来源: Youngs

原文：http://www.cnblogs.com/Master…

一、为何JavaScript是单线程？

JavaScript言语的一大特性就是单线程，也就是说，统一个时刻只能做一件事。那末，为何JavaScript不能有多个线程呢？如许能进步效力啊。

JavaScript的单线程，与它的用处有关。作为浏览器剧本言语，JavaScript的主要用处是与用户互动，以及操纵DOM。这决议了它只能是单线程，不然会带来很庞杂的同步题目。比方，假定JavaScript同时有两个线程，一个线程在某个DOM节点上增添内容，另一个线程删除了这个节点，这时刻浏览器应该以哪一个线程为准？

所以，为了防止庞杂性，从一降生，JavaScript就是单线程，这已成了这门言语的中心特性，未来也不会转变。

为了应用多核CPU的盘算才，HTML5提出Web Worker规范，许可JavaScript剧本建立多个线程，然则子线程完整受主线程掌握，且不得操纵DOM。所以，这个新规范并没有转变JavaScript单线程的实质。
**

二、使命行列

单线程就意味着，一切使命须要列队，前一个使命终了，才会实行后一个使命。假如前一个使命耗时很长，后一个使命就不能不一向等着。
假如列队是因为盘算量大，CPU忙不过来，倒也算了，然则许多时刻CPU是闲着的，因为IO装备（输入输出装备）很慢（比方Ajax操纵从收集读取数据），不能不等着结果出来，再往下实行。
JavaScript言语的设计者意想到，这时刻主线程完整能够不论IO装备，挂起处于守候中的使命，先运转排在背面的使命。比及IO装备返回了结果，再回过甚，把挂起的使命继承实行下去。
因而，一切使命能够分红两种，一种是同步使命（synchronous），另一种是异步使命（asynchronous）。同步使命指的是，在主线程上列队实行的使命，只需前一个使命实行终了，才实行后一个使命；异步使命指的是，不进入主线程、而进入”使命行列”（task queue）的使命，只需”使命行列”关照主线程，某个异步使命能够实行了，该使命才会进入主线程实行。
具体来说，异步实行的运转机制以下。（同步实行也是云云，因为它能够被视为没有异步使命的异步实行。）

   （1）一切同步使命都在主线程上实行，构成一个实行栈（execution context stack）。
   （2）主线程之外，还存在一个"使命行列"（task queue）。只需异步使命有了运转结果，就在"使命行列"当中安排一个事宜。
   （3）一旦"实行栈"中的一切同步使命实行终了，体系就会读取"使命行列"，看看内里有哪些事宜。那些对应的异步使命，因而终了守候状况，进入实行栈，最先实行。
   （4）主线程不停重复上面的第三步。

下图就是主线程和使命行列的示意图。

《【转】深切明白JS单线程机制【原文作者：MasterYao】》
只需主线程空了，就会去读取”使命行列”，这就是JavaScript的运转机制。这个历程会不停重复。

三、事宜和回调函数

“使命行列”是一个事宜的行列（也能够明白成音讯的行列），IO装备完成一项使命，就在”使命行列”中增添一个事宜，示意相干的异步使命能够进入”实行栈”了。主线程读取”使命行列”，就是读取内里有哪些事宜。

“使命行列”中的事宜，除了IO装备的事宜之外，还包含一些用户发作的事宜（比方鼠标点击、页面转动等等）。只需指定过回调函数，这些事宜发作时就会进入”使命行列”，守候主线程读取。

所谓”回调函数”（callback），就是那些会被主线程挂起来的代码。异步使命必需指定回调函数，当主线程最先实行异步使命，就是实行对应的回调函数。

“使命行列”是一个先进先出的数据结构，排在前面的事宜，优先被主线程读取。主线程的读取历程基本上是自动的，只需实行栈一清空，”使命行列”上第一名的事宜就自动进入主线程。然则，因为存在后文提到的”定时器”功用，主线程首先要搜检一下实行时刻，某些事宜只需到了划定的时刻，才返回主线程。

四、Event Loop

主线程从”使命行列”中读取事宜，这个历程是轮回不停的，所以悉数的这类运转机制又称为Event Loop（事宜轮回）。

为了更好地明白Event Loop，请看下图（转引自Philip Roberts的演讲《Help, I’m stuck in an event-loop》）。

《【转】深切明白JS单线程机制【原文作者：MasterYao】》

上图中，主线程运转的时刻，发作堆（heap）和栈（stack），栈中的代码挪用种种外部API，它们在”使命行列”中到场种种事宜（click，load，done）。只需栈中的代码实行终了，主线程就会去读取”使命行列”，顺次实行那些事宜所对应的回调函数。

实行栈中的代码（同步使命），老是在读取”使命行列”（异步使命）之前实行。请看下面这个例子。

var req = new XMLHttpRequest();
req.open('GET', url);
req.onload = function (){};
req.onerror = function (){};
req.send();

上面代码中的req.send要领是Ajax操纵向服务器发送数据，它是一个异步使命，意味着只需当前剧本的一切代码实行完，体系才会去读取”使命行列”。所以，它与下面的写法等价。

var req = new XMLHttpRequest();
req.open('GET', url);
req.send();
req.onload = function (){};
req.onerror = function (){};

也就是说，指定回调函数的部份（onload和onerror），在send()要领的前面或背面可有可无，因为它们属于实行栈的一部份，体系老是实行完它们，才会去读取”使命行列”。

五、定时器

除了安排异步使命的事宜，”使命行列”还能够安排定时事宜，即指定某些代码在若干时刻今后实行。这叫做”定时器”（timer）功用，也就是定时实行的代码。

定时器功用主要由setTimeout()和setInterval()这两个函数来完成，它们的内部运转机制完整一样，区分在于前者指定的代码是一次性实行，后者则为重复实行。以下主要议论setTimeout()。

setTimeout()接收两个参数，第一个是回调函数，第二个是推延实行的毫秒数。

console.log(1);
setTimeout(function(){console.log(2);},1000);
console.log(3);

上面代码的实行结果是1，3，2，因为setTimeout()将第二行推延到1000毫秒今后实行。

假如将setTimeout()的第二个参数设为0，就示意当前代码实行完（实行栈清空）今后，马上实行（0毫秒距离）指定的回调函数。

setTimeout(function(){console.log(1);}, 0);
console.log(2);

上面代码的实行结果老是2，1，因为只需在实行完第二行今后，体系才会去实行”使命行列”中的回调函数。

总之，setTimeout(fn,0)的寄义是，指定某个使命在主线程最早可得的余暇时刻实行，也就是说，尽量早得实行。它在”使命行列”的尾部增添一个事宜，因而要比及同步使命和”使命行列”现有的事宜都处理完，才会获得实行。

HTML5规范划定了setTimeout()的第二个参数的最小值（最短距离），不得低于4毫秒，假如低于这个值，就会自动增添。在此之前，老版本的浏览器都将最短距离设为10毫秒。别的，关于那些DOM的更改（尤其是触及页面从新衬着的部份），一般不会马上实行，而是每16毫秒实行一次。这时刻运用requestAnimationFrame()的结果要好过setTimeout()。

须要注重的是，setTimeout()只是将事宜插入了”使命行列”，必需比及当前代码（实行栈）实行完，主线程才会去实行它指定的回调函数。如果当前代码耗时很长，有能够要等良久，所以并没有方法保证，回调函数肯定会在setTimeout()指定的时刻实行。

六、Node.js的Event Loop

Node.js也是单线程的Event Loop，然则它的运转机制差别于浏览器环境。

请看下面的示意图（作者@BusyRich）。

《【转】深切明白JS单线程机制【原文作者：MasterYao】》
依据上图，Node.js的运转机制以下:

   （1）V8引擎剖析JavaScript剧本。
   （2）剖析后的代码，挪用Node API。
   （3）libuv库担任Node API的实行。它将差别的使命分配给差别的线程，构成一个Event Loop（事宜轮回），以异步的体式格局将使命的实行结果返回给V8引擎。
   （4）V8引擎再将结果返回给用户。

除了setTimeout和setInterval这两个要领，Node.js还供应了别的两个与”使命行列”有关的要领：process.nextTick和setImmediate。它们能够协助我们加深对”使命行列”的明白。

process.nextTick要领能够在当前”实行栈”的尾部—-下一次Event Loop（主线程读取”使命行列”）之前—-触发还调函数。也就是说，它指定的使命老是发作在一切异步使命之前。setImmediate要领则是在当前”使命行列”的尾部增添事宜，也就是说，它指定的使命老是鄙人一次Event Loop时实行，这与setTimeout(fn, 0)很像。请看下面的例子（via StackOverflow）。

process.nextTick(function A() {
console.log(1);
process.nextTick(function B(){console.log(2);});
});
setTimeout(function timeout() {
console.log('TIMEOUT FIRED');
}, 0)
// 1
// 2
// TIMEOUT FIRED

上面代码中，因为process.nextTick要领指定的回调函数，老是在当前”实行栈”的尾部触发，所以不仅函数A比setTimeout指定的回调函数timeout先实行，而且函数B也比timeout先实行。这说明，假如有多个process.nextTick语句（不论它们是不是嵌套），将悉数在当前”实行栈”实行。

如今，再看setImmediate。

setImmediate(function A() {
console.log(1);
setImmediate(function B(){console.log(2);});
});
setTimeout(function timeout() {
console.log('TIMEOUT FIRED');
}, 0);

上面代码中，setImmediate与setTimeout(fn,0)各自增添了一个回调函数A和timeout，都是鄙人一次Event Loop触发。那末，哪一个回调函数先实行呢？答案是不确定。运转结果多是1--TIMEOUT FIRED--2，也多是TIMEOUT FIRED--1--2。
令人困惑的是，Node.js文档中称，setImmediate指定的回调函数，老是排在setTimeout前面。实际上，这类状况只发作在递归挪用的时刻。

setImmediate(function (){
setImmediate(function A() {
console.log(1);
setImmediate(function B(){console.log(2);});
});
setTimeout(function timeout() {
console.log('TIMEOUT FIRED');
}, 0);
});
// 1
// TIMEOUT FIRED
// 2

上面代码中，setImmediate和setTimeout被封装在一个setImmediate内里，它的运转结果老是1--TIMEOUT FIRED--2，这时刻函数A肯定在timeout前面触发。至于2排在TIMEOUT FIRED的背面（即函数B在timeout背面触发），是因为setImmediate老是将事宜注册到下一轮Event Loop，所以函数A和timeout是在统一轮Loop实行，而函数B鄙人一轮Loop实行。

我们由此获得了process.nextTick和setImmediate的一个主要区分：多个process.nextTick语句老是在当前”实行栈”一次实行完，多个setImmediate能够则须要屡次loop才实行完。事实上，这正是Node.js 10.0版增添setImmediate要领的缘由，不然像下面如许的递归挪用process.nextTick，将会没完没了，主线程基础不会去读取”事宜行列”！

process.nextTick(function foo() {
process.nextTick(foo);
});

事实上，如今如果你写出递归的process.nextTick，Node.js会抛出一个正告，请求你改成setImmediate。

别的，因为process.nextTick指定的回调函数是在本次”事宜轮回”触发，而setImmediate指定的是鄙人次”事宜轮回”触发，所以很显然，前者老是比后者发作得早，而且实行效力也高（因为不必搜检”使命行列”）。

    原文作者：Youngs
    原文地址: https://segmentfault.com/a/1190000008528207
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞