想要理解JavaScript的運(yùn)行機(jī)制锅睛，需要分別深刻理解以下幾個(gè)點(diǎn)：
- JavaScript的單線程機(jī)制
- 任務(wù)隊(duì)列（同步任務(wù)和異步任務(wù)）
- 事件和回調(diào)函數(shù)
- 定時(shí)器
- Event Loop（事件循環(huán)）
JavaScript的單線程機(jī)制
我們都知道谭跨，javascript從誕生之日起就是一門單線程的非阻塞的腳本語(yǔ)言绳矩。這是由其最初的用途來(lái)決定的：與瀏覽器交互甩骏。
單線程意味著倾剿，javascript代碼在執(zhí)行的任何時(shí)候畴嘶，都只有一個(gè)主線程來(lái)處理所有的任務(wù)筋粗。
而非阻塞則是當(dāng)代碼需要進(jìn)行一項(xiàng)異步任務(wù)（無(wú)法立刻返回結(jié)果，需要花一定時(shí)間才能返回的任務(wù)敦间，如I/O事件）的時(shí)候瓶逃，主線程會(huì)掛起（pending）這個(gè)任務(wù)，然后在異步任務(wù)返回結(jié)果的時(shí)候再根據(jù)一定規(guī)則去執(zhí)行相應(yīng)的回調(diào)廓块。
??單線程是必要的厢绝，也是javascript這門語(yǔ)言的基石，原因之一在其最初也是最主要的執(zhí)行環(huán)境——瀏覽器中带猴，我們需要進(jìn)行各種各樣的dom操作昔汉。試想一下 如果javascript是多線程的，那么當(dāng)兩個(gè)線程同時(shí)對(duì)dom進(jìn)行一項(xiàng)操作拴清，例如一個(gè)向其添加事件靶病，而另一個(gè)刪除了這個(gè)dom，此時(shí)該如何處理呢口予？因此娄周，為了保證不會(huì) 發(fā)生類似于這個(gè)例子中的情景，javascript選擇只用一個(gè)主線程來(lái)執(zhí)行代碼沪停，這樣就保證了程序執(zhí)行的一致性煤辨。
??單線程在保證了執(zhí)行順序的同時(shí)也限制了javascript的效率，因此開發(fā)出了web worker技術(shù)。這項(xiàng)技術(shù)號(hào)稱讓javascript成為一門多線程語(yǔ)言掷酗。
??然而调违，使用web worker技術(shù)開的多線程有著諸多限制，例如：所有新線程都受主線程的完全控制泻轰，不能獨(dú)立執(zhí)行技肩。這意味著這些“線程” 實(shí)際上應(yīng)屬于主線程的子線程。另外浮声，這些子線程并沒有執(zhí)行I/O操作的權(quán)限虚婿，只能為主線程分擔(dān)一些諸如計(jì)算等任務(wù)。所以嚴(yán)格來(lái)講這些線程并沒有完整的功能泳挥，也因此這項(xiàng)技術(shù)并非改變了javascript語(yǔ)言的單線程本質(zhì)然痊。
瀏覽器環(huán)境下js引擎的事件循環(huán)機(jī)制
1.執(zhí)行棧與事件隊(duì)列
當(dāng)javascript代碼執(zhí)行的時(shí)候會(huì)將不同的變量存于內(nèi)存中的不同位置：堆（heap）和棧（stack）中來(lái)加以區(qū)分。其中屉符，堆里存放著一些對(duì)象剧浸。而棧中則存放著一些基礎(chǔ)類型變量以及對(duì)象的指針。 但是我們這里說(shuō)的執(zhí)行棧和上面這個(gè)棧的意義卻有些不同矗钟。
我們知道唆香，當(dāng)我們調(diào)用一個(gè)方法的時(shí)候，js會(huì)生成一個(gè)與這個(gè)方法對(duì)應(yīng)的執(zhí)行環(huán)境（context）吨艇，又叫執(zhí)行上下文躬它。這個(gè)執(zhí)行環(huán)境中存在下面幾類：
- 這個(gè)方法的私有作用域
- 上層作用域的指向
- 方法的參數(shù)
- 這個(gè)作用域中定義的變量以及這個(gè)作用域的this對(duì)象
而當(dāng)一系列方法被依次調(diào)用的時(shí)候，因?yàn)閖s是單線程的东涡，同一時(shí)間只能執(zhí)行一個(gè)方法冯吓，于是這些方法被排隊(duì)在一個(gè)單獨(dú)的地方。這個(gè)地方被稱為執(zhí)行棧疮跑。
當(dāng)一個(gè)腳本第一次執(zhí)行的時(shí)候组贺，js引擎會(huì)解析這段代碼，并將其中的同步代碼按照?qǐng)?zhí)行順序加入執(zhí)行棧中祸挪，然后從頭開始執(zhí)行锣披。如果當(dāng)前執(zhí)行的是一個(gè)方法，那么js會(huì)向執(zhí)行棧中添加這個(gè)方法的執(zhí)行環(huán)境贿条，然后進(jìn)入這個(gè)執(zhí)行環(huán)境繼續(xù)執(zhí)行其中的代碼。當(dāng)這個(gè)執(zhí)行環(huán)境中的代碼 執(zhí)行完畢并返回結(jié)果后增热，js會(huì)退出這個(gè)執(zhí)行環(huán)境并把這個(gè)執(zhí)行環(huán)境銷毀整以，回到上一個(gè)方法的執(zhí)行環(huán)境。峻仇。這個(gè)過程反復(fù)進(jìn)行公黑，直到執(zhí)行棧中的代碼全部執(zhí)行完畢。
下面這個(gè)圖片非常直觀的展示了這個(gè)過程，其中的global就是初次運(yùn)行腳本時(shí)向執(zhí)行棧中加入的代碼：
從圖片可知凡蚜，一個(gè)方法執(zhí)行會(huì)向執(zhí)行棧中加入這個(gè)方法的執(zhí)行環(huán)境人断，在這個(gè)執(zhí)行環(huán)境中還可以調(diào)用其他方法，甚至是自己朝蜘，其結(jié)果不過是在執(zhí)行棧中再添加一個(gè)執(zhí)行環(huán)境恶迈。這個(gè)過程可以是無(wú)限進(jìn)行下去的，除非發(fā)生了棧溢出谱醇，即超過了所能使用內(nèi)存的最大值暇仲。
以上的過程說(shuō)的都是同步代碼的執(zhí)行。那么當(dāng)一個(gè)異步代碼（如發(fā)送ajax請(qǐng)求數(shù)據(jù)）執(zhí)行后會(huì)如何呢副渴？前文提過奈附，js的另一大特點(diǎn)是非阻塞，實(shí)現(xiàn)這一點(diǎn)的關(guān)鍵在于下面要說(shuō)的這項(xiàng)機(jī)制——事件隊(duì)列（Task Queue）煮剧。
js引擎遇到一個(gè)異步事件后并不會(huì)一直等待其返回結(jié)果斥滤，而是會(huì)將這個(gè)事件掛起，繼續(xù)執(zhí)行執(zhí)行棧中的其他任務(wù)勉盅。當(dāng)一個(gè)異步事件返回結(jié)果后中跌，js會(huì)將這個(gè)事件加入與當(dāng)前執(zhí)行棧不同的另一個(gè)隊(duì)列，我們稱之為事件隊(duì)列菇篡。被放入事件隊(duì)列不會(huì)立刻執(zhí)行其回調(diào)漩符，而是等待當(dāng)前執(zhí)行棧中的所有任務(wù)都執(zhí)行完畢， 主線程處于閑置狀態(tài)時(shí)驱还，主線程會(huì)去查找事件隊(duì)列是否有任務(wù)嗜暴。如果有，那么主線程會(huì)從中取出排在第一位的事件议蟆，并把這個(gè)事件對(duì)應(yīng)的回調(diào)放入執(zhí)行棧中闷沥，然后執(zhí)行其中的同步代碼...，如此反復(fù)咐容，這樣就形成了一個(gè)無(wú)限的循環(huán)舆逃。這就是這個(gè)過程被稱為“事件循環(huán)（Event Loop）”的原因。
這里還有一張圖來(lái)展示這個(gè)過程：
圖中的stack表示我們所說(shuō)的執(zhí)行棧戳粒，web apis則是代表一些異步事件路狮，而callback queue即事件隊(duì)列。
2.macro task與micro task
以上的事件循環(huán)過程是一個(gè)宏觀的表述蔚约，實(shí)際上因?yàn)楫惒饺蝿?wù)之間并不相同奄妨，因此他們的執(zhí)行優(yōu)先級(jí)也有區(qū)別。不同的異步任務(wù)被分為兩類：微任務(wù)（micro task）和宏任務(wù)（macro task）苹祟。
以下事件屬于宏任務(wù)：
- setInterval()
- setTimeout()
以下事件屬于微任務(wù)
- new Promise()
- new MutaionObserver()
前面我們介紹過砸抛，在一個(gè)事件循環(huán)中评雌，異步事件返回結(jié)果后會(huì)被放到一個(gè)任務(wù)隊(duì)列中。然而直焙，根據(jù)這個(gè)異步事件的類型景东，這個(gè)事件實(shí)際上會(huì)被對(duì)應(yīng)的宏任務(wù)隊(duì)列或者微任務(wù)隊(duì)列中去。并且在當(dāng)前執(zhí)行棧為空的時(shí)候奔誓，主線程會(huì) 查看微任務(wù)隊(duì)列是否有事件存在斤吐。如果不存在，那么再去宏任務(wù)隊(duì)列中取出一個(gè)事件并把對(duì)應(yīng)的回到加入當(dāng)前執(zhí)行棧丝里；如果存在曲初，則會(huì)依次執(zhí)行隊(duì)列中事件對(duì)應(yīng)的回調(diào)，直到微任務(wù)隊(duì)列為空杯聚，然后去宏任務(wù)隊(duì)列中取出最前面的一個(gè)事件臼婆，把對(duì)應(yīng)的回調(diào)加入當(dāng)前執(zhí)行棧...如此反復(fù)，進(jìn)入循環(huán)幌绍。
我們只需記住當(dāng)當(dāng)前執(zhí)行棧執(zhí)行完畢時(shí)會(huì)立刻先處理所有微任務(wù)隊(duì)列中的事件颁褂，然后再去宏任務(wù)隊(duì)列中取出一個(gè)事件。同一次事件循環(huán)中傀广，微任務(wù)永遠(yuǎn)在宏任務(wù)之前執(zhí)行颁独。
這樣就能解釋下面這段代碼的結(jié)果：
setTimeout(function () {
console.log(1);
});
new Promise(function(resolve,reject){
console.log(2)
resolve(3)
}).then(function(val){
console.log(val);
})
結(jié)果為：
2
3
1
下面是一段偽代碼來(lái)加深對(duì)執(zhí)行棧的理解：
//運(yùn)行代碼
sayHello();
function sayHello() {
var message = getMessage();
console.log(message);
}
function getMessage() {
return 'hello';
}
執(zhí)行棧代碼模擬：
//執(zhí)行棧代碼模擬
var exeStack = [];
//先壓如全局執(zhí)行環(huán)境
exeStack.push('globalContext');
//遇到執(zhí)行sayHello函數(shù)，ok伪冰，壓進(jìn)去
exeStack.push('sayHello');
//執(zhí)行sayHello函數(shù)發(fā)現(xiàn)誓酒，還有個(gè)getMessage函數(shù)，ok贮聂，壓進(jìn)棧
exeStack.push('getMessage');
//執(zhí)行完了getMessage函數(shù)靠柑，彈棧
exeStack.pop();
//繼續(xù)執(zhí)行sayHello函數(shù)，又發(fā)現(xiàn)有console.log這個(gè)家伙吓懈，ok歼冰，你進(jìn)棧
exeStack.push('console.log');
//執(zhí)行了console后，輸出hello耻警，console 彈棧
exeStack.pop();
//這時(shí)sayHello執(zhí)行完隔嫡，彈棧
exeStack.pop();
//最后整個(gè)代碼執(zhí)行完，全局環(huán)境彈棧
exeStack.pop();
我們可以用以上概念來(lái)解釋下面這段代碼：
function foo() {
console.log( 'first' );
setTimeout( ( function(){ console.log( 'second' ); } ), 5);
}
for (var i = 0; i < 1000000; i++) {
foo();
}
執(zhí)行結(jié)果會(huì)首先全部輸出first甘穿，然后全部輸出second腮恩；盡管中間的執(zhí)行會(huì)超過5ms。
在上述代碼的事件循環(huán)當(dāng)中扒磁，同步代碼(console)按照?qǐng)?zhí)行順序加入執(zhí)行棧中,異步的代碼會(huì)加入事件隊(duì)列庆揪，被放入事件隊(duì)列不會(huì)立刻執(zhí)行其回調(diào)，而是等待當(dāng)前執(zhí)行棧中的所有任務(wù)都執(zhí)行完畢妨托。
