來源 | https://www.cnblogs.com/echoyya/p/14500768.html

1. JavaScript事件循環(huán)

JavaScript是單線程，JS任務(wù)要一個(gè)一個(gè)順序執(zhí)行。如果一個(gè)任務(wù)耗時(shí)過長，那么后一個(gè)任務(wù)必須等待。會造成阻塞，因此聰明的程序員將任務(wù)分為兩類：

同步任務(wù)
異步任務(wù)

當(dāng)我們打開網(wǎng)站時(shí)，網(wǎng)頁的渲染過程就是一大堆同步任務(wù)，比如頁面骨架和頁面元素的渲染。而像加載圖片音樂之類占用資源大耗時(shí)久的任務(wù)，就是異步任務(wù)。

關(guān)于這部分有嚴(yán)格的文字定義，但本文的目的是用最小的學(xué)習(xí)成本徹底弄懂執(zhí)行機(jī)制，所以我們用導(dǎo)圖來說明：

導(dǎo)圖要表達(dá)的內(nèi)容用文字來表述的話：

首先判斷JS是同步還是異步,同步就進(jìn)入主線程，異步的進(jìn)入Event Table并注冊函數(shù)。
當(dāng)滿足觸發(fā)條件后，Event Table會將這個(gè)函數(shù)移入Event Queue(事件隊(duì)列)。
主線程內(nèi)的任務(wù)執(zhí)行完畢為空，會去Event Queue查看是否有可執(zhí)行的異步任務(wù),如果有就推入主線程中
上述過程會不斷重復(fù)，這就是常說的Event Loop(事件循環(huán))。
事件循環(huán)是JS實(shí)現(xiàn)異步的一種方法，也是JS的執(zhí)行機(jī)制。

那怎么知道主線程執(zhí)行棧為空呢？js引擎存在監(jiān)控進(jìn)程monitoring process，會持續(xù)不斷的檢查主線程執(zhí)行棧是否為空，一旦為空，就會去Event Queue 檢查是否有等待被調(diào)用的函數(shù)。

let data = [];$.ajax({    url:www.javascript.com,    data:data,    success:() => {                console.log('發(fā)送成功!');            }})console.log('代碼執(zhí)行結(jié)束');

ajax進(jìn)入Event Table，注冊回調(diào)函數(shù)success。
執(zhí)行console.log('代碼執(zhí)行結(jié)束')。
ajax事件完成，回調(diào)函數(shù)success進(jìn)入Event Queue。
主線程從Event Queue讀取回調(diào)函數(shù)success并執(zhí)行。

2、setTimeout

大名鼎鼎的setTimeout無需再多言，大家對他的第一印象就是異步可以延時(shí)執(zhí)行，我們經(jīng)常這么實(shí)現(xiàn)延時(shí)3秒執(zhí)行：

setTimeout(() => {    console.log('延時(shí)3秒');},3000)console.log('執(zhí)行console');
//執(zhí)行console//延時(shí)3秒

漸漸的setTimeout用的地方多了，問題也出現(xiàn)了，有時(shí)候明明寫的延時(shí)3秒，實(shí)際卻5，6秒才執(zhí)行函數(shù)，這又咋回事啊？

我們修改一下前面的代碼：

setTimeout(() => {    task()},3000)
sleep(10000000)

乍一看其實(shí)差不多嘛，但我們把這段代碼在chrome執(zhí)行一下，卻發(fā)現(xiàn)控制臺執(zhí)行task()需要的時(shí)間遠(yuǎn)遠(yuǎn)超過3秒，這時(shí)候我們需要重新理解setTimeout的定義。我們先說上述代碼是怎么執(zhí)行的：

task()進(jìn)入Event Table并注冊，計(jì)時(shí)開始。
執(zhí)行sleep函數(shù)，很慢，非常慢，計(jì)時(shí)仍在繼續(xù)。
3秒到了，計(jì)時(shí)事件timeout完成，task()進(jìn)入Event Queue，但是sleep也太慢了吧，還沒執(zhí)行完，只好等著。
sleep終于執(zhí)行完了，task()終于從Event Queue進(jìn)入了主線程執(zhí)行。

上述的流程走完，我們知道setTimeout這個(gè)函數(shù)，是經(jīng)過指定時(shí)間后，把要執(zhí)行的任務(wù)(本例中為task())加入到Event Queue中，又因?yàn)槭菃尉€程任務(wù)要一個(gè)一個(gè)執(zhí)行，如果前面的任務(wù)需要的時(shí)間太久，那么只能等著，導(dǎo)致真正的延遲時(shí)間遠(yuǎn)遠(yuǎn)大于3秒。

我們還經(jīng)常遇到setTimeout(fn,0)這樣的代碼，0秒后執(zhí)行又是什么意思呢？是不是可以立即執(zhí)行呢？

答案是不會的，setTimeout(fn,0)的含義是，指定某個(gè)任務(wù)在主線程最早可得的空閑時(shí)間執(zhí)行，意思就是不用再等多少秒了，（而HTML5標(biāo)準(zhǔn)規(guī)定了setTimeout的最短間隔，不得低于4毫秒，如果低于這個(gè)值，就會自動(dòng)增加，因此即便主線程為空，0毫秒實(shí)際上也是達(dá)不到的），只要主線程執(zhí)行棧內(nèi)的同步任務(wù)全部執(zhí)行完成，棧為空就開始執(zhí)行。

console.log('先執(zhí)行這里');setTimeout(() => {    console.log('執(zhí)行啦')},0);
//先執(zhí)行這里//執(zhí)行啦
//-----------------------------------
console.log('先執(zhí)行這里');setTimeout(() => {    console.log('執(zhí)行啦')},3000);  
//先執(zhí)行這里// ... 3s later// 執(zhí)行啦

3、Promise與process.nextTick(callback)

Promise的定義和功能本文不再贅述，不了解的讀者可以學(xué)習(xí)一下阮一峰老師的Promise。而process.nextTick(callback)（Nodejs獨(dú)有），在事件循環(huán)的下一次循環(huán)中調(diào)用 callback 回調(diào)函數(shù)。

我們進(jìn)入正題，除了廣義的同步任務(wù)和異步任務(wù)，我們對任務(wù)有更精細(xì)的定義：

macro-task(宏任務(wù))：包括整體代碼script，setTimeout，setInterval，事件綁定，ajax，回調(diào)函數(shù)等
micro-task(微任務(wù))：Promise，process.nextTick

不同類型的任務(wù)會進(jìn)入對應(yīng)的Event Queue，事件循環(huán)的順序，決定JS代碼的執(zhí)行順序。

進(jìn)入整體代碼(宏任務(wù))后，開始第一次循環(huán)。接著執(zhí)行所有的微任務(wù)。然后再次從宏任務(wù)開始，找到其中一個(gè)任務(wù)隊(duì)列執(zhí)行完畢，再執(zhí)行所有的微任務(wù)。聽起來有點(diǎn)繞，用一段代碼說明：

setTimeout(function() {    console.log('setTimeout');})
new Promise(function(resolve) {    console.log('promise');}).then(function() {    console.log('then');})
console.log('console');

這段代碼作為宏任務(wù)，進(jìn)入主線程。
先遇到setTimeout，那么將其回調(diào)函數(shù)注冊后分發(fā)到宏任務(wù)Event Queue。(注冊過程與上同，下文不再描述)
接下來遇到new Promise立即執(zhí)行，then函數(shù)分發(fā)到微任務(wù)Event Queue。
遇到console.log()，立即執(zhí)行。
此時(shí)整體代碼script作為第一個(gè)宏任務(wù)執(zhí)行結(jié)束，看看有哪些微任務(wù)？我們發(fā)現(xiàn)了then在微任務(wù)Event Queue里面，執(zhí)行。
ok，第一輪事件循環(huán)結(jié)束了，我們開始第二輪循環(huán)，當(dāng)然要從宏任務(wù)Event Queue開始。我們發(fā)現(xiàn)了宏任務(wù)Event Queue中setTimeout對應(yīng)的回調(diào)函數(shù)，立即執(zhí)行。
結(jié)束。

事件循環(huán)，宏任務(wù)，微任務(wù)的關(guān)系如圖所示：

我們來分析一段較復(fù)雜的代碼，看看你是否真的掌握了JS的執(zhí)行機(jī)制

console.log('1');setTimeout(function() {    console.log('2');    process.nextTick(function() {        console.log('3');    })    new Promise(function(resolve) {        console.log('4');        resolve();    }).then(function() {        console.log('5')    })})process.nextTick(function() {    console.log('6');})new Promise(function(resolve) {    console.log('7');    resolve();}).then(function() {    console.log('8')})
setTimeout(function() {    console.log('9');    process.nextTick(function() {        console.log('10');    })    new Promise(function(resolve) {        console.log('11');        resolve();    }).then(function() {        console.log('12')    })})