一、概述

js引擎執(zhí)行過(guò)程主要分為三個(gè)階段，分別是語(yǔ)法分析，預(yù)編譯和執(zhí)行階段，上篇文章我們介紹了語(yǔ)法分析和預(yù)編譯階段，那么我們先做個(gè)簡(jiǎn)單概括，如下：

1、語(yǔ)法分析： 分別對(duì)加載完成的代碼塊進(jìn)行語(yǔ)法檢驗(yàn)，語(yǔ)法正確則進(jìn)入預(yù)編譯階段；不正確則停止該代碼塊的執(zhí)行，查找下一個(gè)代碼塊并進(jìn)行加載，加載完成再次進(jìn)入該代碼塊的語(yǔ)法分析階段。

2、預(yù)編譯：通過(guò)語(yǔ)法分析階段后，進(jìn)入預(yù)編譯階段，則創(chuàng)建變量對(duì)象（創(chuàng)建arguments對(duì)象（函數(shù)運(yùn)行環(huán)境下），函數(shù)聲明提前解析，變量聲明提升），確定作用域鏈以及this指向。

如果對(duì)語(yǔ)法分析和預(yù)編譯，還有疑問(wèn)：javascript引擎執(zhí)行的過(guò)程的理解--語(yǔ)法分析和預(yù)編譯階段。

同步更新sau交流學(xué)習(xí)社區(qū)（nodeJSBlog）：javascript引擎執(zhí)行的過(guò)程的理解--執(zhí)行階段（https://www.mwcxs.top/page/56...）

本文主要分析js引擎執(zhí)行的第三個(gè)階段–執(zhí)行階段，在分析之前我們先思考以下兩個(gè)問(wèn)題：

1、js是單線程的，為了避免代碼解析阻塞使用了異步執(zhí)行，那么它的異步執(zhí)行機(jī)制是怎么樣的？

答：通過(guò)事件循環(huán)（Event Loop），理解了事件循環(huán)的原理就理解了js的異步執(zhí)行機(jī)制，本文主要介紹。

2、js是單線程的，那么是否代表參與js執(zhí)行過(guò)程的線程就只有一個(gè)？

答：不是的，會(huì)有四個(gè)線程參與該過(guò)程，但是永遠(yuǎn)只有JS引擎線程在執(zhí)行JS腳本程序，其他的三個(gè)線程只協(xié)助，不參與代碼解析與執(zhí)行。參與js執(zhí)行過(guò)程的線程分別是：

（1）JS引擎線程： 也稱為JS內(nèi)核，負(fù)責(zé)解析執(zhí)行Javascript腳本程序的主線程（例如V8引擎）。

（2）事件觸發(fā)線程： 歸屬于瀏覽器內(nèi)核進(jìn)程，不受JS引擎線程控制。主要用于控制事件（例如鼠標(biāo)，鍵盤(pán)等事件），當(dāng)該事件被觸發(fā)時(shí)候，事件觸發(fā)線程就會(huì)把該事件的處理函數(shù)推進(jìn)事件隊(duì)列，等待JS引擎線程執(zhí)行。

（3）定時(shí)器觸發(fā)線程：主要控制計(jì)時(shí)器setInterval和延時(shí)器setTimeout，用于定時(shí)器的計(jì)時(shí)，計(jì)時(shí)完畢，滿足定時(shí)器的觸發(fā)條件，則將定時(shí)器的處理函數(shù)推進(jìn)事件隊(duì)列中，等待JS引擎線程執(zhí)行。

注：W3C在HTML標(biāo)準(zhǔn)中規(guī)定setTimeout低于4ms的時(shí)間間隔算為4ms。

（4）HTTP異步請(qǐng)求線程：通過(guò)XMLHttpRequest連接后，通過(guò)瀏覽器新開(kāi)的一個(gè)線程，監(jiān)控readyState狀態(tài)變更時(shí)，如果設(shè)置了該狀態(tài)的回調(diào)函數(shù)，則將該狀態(tài)的處理函數(shù)推進(jìn)事件隊(duì)列中，等待JS引擎線程執(zhí)行。

注：瀏覽器對(duì)同一域名請(qǐng)求的并發(fā)連接數(shù)是有限制的，Chrome和Firefox限制數(shù)為6個(gè)，ie8則為10個(gè)。

總結(jié)：永遠(yuǎn)只有JS引擎線程在執(zhí)行JS腳本程序，其他三個(gè)線程只負(fù)責(zé)將滿足觸發(fā)條件的處理函數(shù)推進(jìn)事件隊(duì)列，等待JS引擎線程執(zhí)行。

二、執(zhí)行階段

先分析一個(gè)典型的例子（來(lái)自Tasks, microtasks, queues and schedules，建議英文基礎(chǔ)好的閱讀，非常不錯(cuò)的文章）：

console.log('script start');

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

Promise.resolve().then(function() {
console.log('promise1');
}).then(function() {
console.log('promise2');
});

console.log('script end');
直接劃分例子的代碼結(jié)構(gòu)，簡(jiǎn)單描述分析執(zhí)行過(guò)程；

暫不解釋該過(guò)程中的概念和原理，概念和原理將會(huì)在下面具體講解如下：

1、宏任務(wù)（macro-task）

宏任務(wù)（macro-task），宏任務(wù)又按執(zhí)行順序分為同步任務(wù)和異步任務(wù)

（1）同步任務(wù)

console.log('script start');
console.log('script end');
（2）異步任務(wù)

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

2、微任務(wù)（micro-task）

Promise.resolve().then(function() {
console.log('promise1');
}).then(function() {
console.log('promise2');
});

在JS引擎執(zhí)行過(guò)程中，進(jìn)入執(zhí)行階段后，代碼的執(zhí)行順序如下：

宏任務(wù)(同步任務(wù)) --> 微任務(wù) --> 宏任務(wù)(異步任務(wù))

輸出結(jié)果：

script start
script end
promise1
promise2
setTimeout

進(jìn)入ES6或Node環(huán)境中，JS的任務(wù)分為兩種，分別是宏任務(wù)（macro-task）和微任務(wù)（micro-task），在最新的ECMAScript中，微任務(wù)稱為jobs，宏任務(wù)稱為task，他們的執(zhí)行順序如上?？赡芎芏嗳藢?duì)上面的分析并不理解，那么我們接下來(lái)繼續(xù)對(duì)上面例子進(jìn)行詳細(xì)分析。

2.1宏任務(wù)

宏任務(wù)（macro-task）可分為同步任務(wù)和異步任務(wù)：

1、同步任務(wù)指的是在JS引擎主線程上按順序執(zhí)行的任務(wù)，只有前一個(gè)任務(wù)執(zhí)行完畢后，才能執(zhí)行后一個(gè)任務(wù)，形成一個(gè)執(zhí)行棧（函數(shù)調(diào)用棧）。

2、異步任務(wù)指的是不直接進(jìn)入JS引擎主線程，而是滿足觸發(fā)條件時(shí)，相關(guān)的線程將該異步任務(wù)推進(jìn)任務(wù)隊(duì)列(task queue)，等待JS引擎主線程上的任務(wù)執(zhí)行完畢，空閑時(shí)讀取執(zhí)行的任務(wù)，例如異步Ajax，DOM事件，setTimeout等。

理解宏任務(wù)中同步任務(wù)和異步任務(wù)的執(zhí)行順序，那么就相當(dāng)于理解了JS異步執(zhí)行機(jī)制–事件循環(huán)（Event Loop）。

2.1.1事件循環(huán)

事件循環(huán)可以理解成由三部分組成，分別是：

1、主線程執(zhí)行棧

2、異步任務(wù)等待觸發(fā)

3、任務(wù)隊(duì)列

任務(wù)隊(duì)列(task queue)就是以隊(duì)列的數(shù)據(jù)結(jié)構(gòu)對(duì)事件任務(wù)進(jìn)行管理，特點(diǎn)是先進(jìn)先出，后進(jìn)后出。

這里直接引用一張著名的圖片(參考自Philip Roberts的演講《Help, I’m stuck in an event-loop》)，幫助我們理解，如下：

在JS引擎主線程執(zhí)行過(guò)程中：

1、首先執(zhí)行宏任務(wù)的同步任務(wù)，在主線程上形成一個(gè)執(zhí)行棧，可理解為函數(shù)調(diào)用棧。

2、當(dāng)執(zhí)行棧中的函數(shù)調(diào)用到一些異步執(zhí)行的API（例如異步Ajax，DOM事件，setTimeout等API），則會(huì)開(kāi)啟對(duì)應(yīng)的線程（Http異步請(qǐng)求線程，事件觸發(fā)線程和定時(shí)器觸發(fā)線程）進(jìn)行監(jiān)控和控制。

3、當(dāng)異步任務(wù)的事件滿足觸發(fā)條件時(shí)，對(duì)應(yīng)的線程則會(huì)把該事件的處理函數(shù)推進(jìn)任務(wù)隊(duì)列(task queue)中，等待主線程讀取執(zhí)行。

4、當(dāng)JS引擎主線程上的任務(wù)執(zhí)行完畢，則會(huì)讀取任務(wù)隊(duì)列中的事件，將任務(wù)隊(duì)列中的事件任務(wù)推進(jìn)主線程中，按任務(wù)隊(duì)列順序執(zhí)行

5、當(dāng)JS引擎主線程上的任務(wù)執(zhí)行完畢后，則會(huì)再次讀取任務(wù)隊(duì)列中的事件任務(wù)，如此循環(huán)，這就是事件循環(huán)（Event Loop）的過(guò)程。

如果還是不能理解，那么我們?cè)俅文蒙厦娴睦舆M(jìn)行詳細(xì)分析，該例子中宏任務(wù)的代碼部分是：

console.log('script start');

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

console.log('script end');
代碼執(zhí)行過(guò)程如下：

1、JS引擎主線程按代碼順序執(zhí)行，當(dāng)執(zhí)行到console.log('script start');，JS引擎主線程認(rèn)為該任務(wù)是同步任務(wù)，所以立刻執(zhí)行輸出script start，然后繼續(xù)向下執(zhí)行。

2、JS引擎主線程執(zhí)行到setTimeout(function() { console.log('setTimeout'); }, 0);，JS引擎主線程認(rèn)為setTimeout是異步任務(wù)API，則向?yàn)g覽器內(nèi)核進(jìn)程申請(qǐng)開(kāi)啟定時(shí)器線程進(jìn)行計(jì)時(shí)和控制該setTimeout任務(wù)。由于W3C在HTML標(biāo)準(zhǔn)中規(guī)定setTimeout低于4ms的時(shí)間間隔算為4ms，那么當(dāng)計(jì)時(shí)到4ms時(shí)，定時(shí)器線程就把該回調(diào)處理函數(shù)推進(jìn)任務(wù)隊(duì)列中等待主線程執(zhí)行，然后JS引擎主線程繼續(xù)向下執(zhí)行。

3、JS引擎主線程執(zhí)行到console.log('script end');，JS引擎主線程認(rèn)為該任務(wù)是同步任務(wù)，所以立刻執(zhí)行輸出script end。

4、JS引擎主線程上的任務(wù)執(zhí)行完畢（輸出script start和script end）后，主線程空閑，則開(kāi)始讀取任務(wù)隊(duì)列中的事件任務(wù)，將該任務(wù)隊(duì)里的事件任務(wù)推進(jìn)主線程中，按任務(wù)隊(duì)列順序執(zhí)行，最終輸出setTimeout，所以輸出的結(jié)果順序?yàn)閟cript start script end setTimeout。

以上便是JS引擎執(zhí)行宏任務(wù)的整個(gè)過(guò)程。

理解該過(guò)程后，我們做一些拓展性的思考：

我們都知道setTimeout和setInterval是異步任務(wù)的定時(shí)器，需要添加到任務(wù)隊(duì)列等待主線程執(zhí)行，那么使用setTimeout模擬實(shí)現(xiàn)setInterval，會(huì)有區(qū)別嗎？

答案是有區(qū)別的，我們不妨思考一下：

1、setTimeout實(shí)現(xiàn)setInterval只能通過(guò)遞歸調(diào)用。

2、setTimeout是在到了指定時(shí)間的時(shí)候就把事件推到任務(wù)隊(duì)列中，只有當(dāng)在任務(wù)隊(duì)列中的setTimeout事件被主線程執(zhí)行后，才會(huì)繼續(xù)再次在到了指定時(shí)間的時(shí)候把事件推到任務(wù)隊(duì)列，那么setTimeout的事件執(zhí)行肯定比指定的時(shí)間要久，具體相差多少跟代碼執(zhí)行時(shí)間有關(guān)。

3、setInterval則是每次都精確的隔一段時(shí)間就向任務(wù)隊(duì)列推入一個(gè)事件，無(wú)論上一個(gè)setInterval事件是否已經(jīng)執(zhí)行，所以有可能存在setInterval的事件任務(wù)累積，導(dǎo)致setInterval的代碼重復(fù)連續(xù)執(zhí)行多次，影響頁(yè)面性能。

綜合以上的分析，使用setTimeout實(shí)現(xiàn)計(jì)時(shí)功能是比setInterval性能更好的。當(dāng)然如果不需要兼容低版本的IE瀏覽器，使用requestAnimationFrame是更好的選擇。

我們繼續(xù)再做進(jìn)一步的思考，如下：

高頻率觸發(fā)的事件（例如滾動(dòng)事件）觸發(fā)頻率過(guò)高會(huì)影響頁(yè)面性能，甚至造成頁(yè)面卡頓，我們是否可以利用計(jì)時(shí)器的原理進(jìn)行優(yōu)化呢？

是可以的，我們可以利用setTimeout實(shí)現(xiàn)計(jì)時(shí)器的原理，對(duì)高頻觸發(fā)的事件進(jìn)行優(yōu)化，實(shí)現(xiàn)點(diǎn)在于將多個(gè)觸發(fā)事件合并成一個(gè)，這就是防抖和節(jié)流，本文先不做具體講解，大家可以自行研究，有機(jī)會(huì)我再另開(kāi)文章分析。

2.2微任務(wù)

微任務(wù)是在es6和node環(huán)境中出現(xiàn)的一個(gè)任務(wù)類型，如果不考慮es6和node環(huán)境的話，我們只需要理解宏任務(wù)事件循環(huán)的執(zhí)行過(guò)程就已經(jīng)足夠了，但是到了es6和node環(huán)境，我們就需要理解微任務(wù)的執(zhí)行順序了。微任務(wù)（micro-task）的API主要有:Promise， process.nextTick

這里我們直接引用一張流程圖幫助我們理解，如下：

在宏任務(wù)中執(zhí)行的任務(wù)有兩種，分別是同步任務(wù)和異步任務(wù)，因?yàn)楫惒饺蝿?wù)會(huì)在滿足觸發(fā)條件時(shí)才會(huì)推進(jìn)任務(wù)隊(duì)列（task queue），然后等待主線程上的任務(wù)執(zhí)行完畢，再讀取任務(wù)隊(duì)列中的任務(wù)事件，最后推進(jìn)主線程執(zhí)行，所以這里將異步任務(wù)即任務(wù)隊(duì)列看作是新的宏任務(wù)。執(zhí)行的過(guò)程如上圖所示：

1、執(zhí)行宏任務(wù)中同步任務(wù)，執(zhí)行結(jié)束。

2、檢查是否存在可執(zhí)行的微任務(wù)，有的話執(zhí)行所有微任務(wù)，然后讀取任務(wù)隊(duì)列的任務(wù)事件，推進(jìn)主線程形成新的宏任務(wù)；沒(méi)有的話則讀取任務(wù)隊(duì)列的任務(wù)事件，推進(jìn)主線程形成新的宏任務(wù)。

3、執(zhí)行新宏任務(wù)的事件任務(wù)，再檢查是否存在可執(zhí)行的微任務(wù)，如此不斷的重復(fù)循環(huán)。

這就是加入微任務(wù)后的詳細(xì)事件循環(huán)，如果還沒(méi)有理解，那么們對(duì)一開(kāi)始的例子做一個(gè)全面的分析，如下：

console.log('script start');

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

Promise.resolve().then(function() {
console.log('promise1');
}).then(function() {
console.log('promise2');
});

console.log('script end');
執(zhí)行過(guò)程如下：

1、代碼塊通過(guò)語(yǔ)法分析和預(yù)編譯后，進(jìn)入執(zhí)行階段，當(dāng)JS引擎主線程執(zhí)行到console.log('script start');，JS引擎主線程認(rèn)為該任務(wù)是同步任務(wù)，所以立刻執(zhí)行輸出script start，然后繼續(xù)向下執(zhí)行。

2、JS引擎主線程執(zhí)行到setTimeout(function() { console.log('setTimeout'); }, 0);，JS引擎主線程認(rèn)為setTimeout是異步任務(wù)API，則向?yàn)g覽器內(nèi)核進(jìn)程申請(qǐng)開(kāi)啟定時(shí)器線程進(jìn)行計(jì)時(shí)和控制該setTimeout任務(wù)。由于W3C在HTML標(biāo)準(zhǔn)中規(guī)定setTimeout低于4ms的時(shí)間間隔算為4ms，那么當(dāng)計(jì)時(shí)到4ms時(shí)，定時(shí)器線程就把該回調(diào)處理函數(shù)推進(jìn)任務(wù)隊(duì)列中等待主線程執(zhí)行，然后JS引擎主線程繼續(xù)向下執(zhí)行。

3、JS引擎主線程執(zhí)行到Promise.resolve().then(function() { console.log('promise1'); }).then(function() { console.log('promise2'); });，JS引擎主線程認(rèn)為Promise是一個(gè)微任務(wù)，這把該任務(wù)劃分為微任務(wù)，等待執(zhí)行。

4、JS引擎主線程執(zhí)行到console.log('script end');，JS引擎主線程認(rèn)為該任務(wù)是同步任務(wù)，所以立刻執(zhí)行輸出script end。

5、主線程上的宏任務(wù)執(zhí)行完畢，則開(kāi)始檢測(cè)是否存在可執(zhí)行的微任務(wù)，檢測(cè)到一個(gè)Promise微任務(wù)，那么立刻執(zhí)行，輸出promise1和promise2

6、微任務(wù)執(zhí)行完畢，主線程開(kāi)始讀取任務(wù)隊(duì)列中的事件任務(wù)setTimeout，推入主線程形成新宏任務(wù)，然后在主線程中執(zhí)行，輸出setTimeout

最后輸出結(jié)果：

script start
script end
promise1
promise2
setTimeout

三、總結(jié)

以上便是JS引擎執(zhí)行的全部過(guò)程，JS引擎的執(zhí)行過(guò)程其實(shí)并不復(fù)雜，只要多思考多研究就可以理解，理解該過(guò)程后可以在一定程度上提高對(duì)JS的認(rèn)識(shí)。

四、參考文獻(xiàn)

Tasks, microtasks, queues and schedules

總結(jié)

以上是生活随笔為你收集整理的javascript引擎执行的过程的理解--执行阶段的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。