1、EventLoop

1. JavaScript 是單線程的語(yǔ)言

JavaScript 是一門(mén)單線程執(zhí)行的編程語(yǔ)言。

也就是說(shuō)，同一時(shí)間只能做一件事情。

單線程執(zhí)行任務(wù)隊(duì)列的問(wèn)題：

如果前一個(gè)任務(wù)非常耗時(shí)，則后續(xù)的任務(wù)就不得不一直等待，從而導(dǎo)致程序假死的問(wèn)題。

2. 同步任務(wù)和異步任務(wù)

為了防止某個(gè)耗時(shí)任務(wù)導(dǎo)致程序假死的問(wèn)題，JavaScript 把待執(zhí)行的任務(wù)分為了兩類(lèi)：

①  同步任務(wù)（synchronous）

又叫做非耗時(shí)任務(wù)，指的是在主線程上排隊(duì)執(zhí)行的那些任務(wù)只有前一個(gè)任務(wù)執(zhí)行完畢， 才能執(zhí)行后一個(gè)任務(wù)

②  異步任務(wù)（asynchronous）

又叫做耗時(shí)任務(wù)，異步任務(wù)由 JavaScript 委托給 宿主環(huán)境進(jìn)行執(zhí)行當(dāng)異步任務(wù)執(zhí)行完成后，會(huì)通知 JavaScript 主線程執(zhí)行異步任務(wù)的回調(diào)函 數(shù)  

3. 同步任務(wù)和異步任務(wù)的執(zhí)行過(guò)程

① 同步任務(wù)由 JavaScript 主線程次序執(zhí)行

② 異步任務(wù)委托給宿主環(huán)境執(zhí)行

③ 已完成的異步任務(wù)對(duì)應(yīng)的回調(diào)函數(shù)，會(huì)被加入到任務(wù)隊(duì)列中等待執(zhí)行

④ JavaScript 主線程的執(zhí)行棧被清空后，會(huì) 讀取任務(wù)隊(duì)列中的回調(diào)函數(shù)，次序執(zhí)行

⑤ JavaScript 主線程不斷重復(fù)上面的第 4 步

 4. EventLoop 的基本概念

JavaScript 主線程從“任務(wù)隊(duì)列”中讀取異步

任務(wù)的回調(diào)函數(shù)，放到執(zhí)行棧中依次執(zhí)行。這 個(gè)過(guò)程是循環(huán)不斷的，所以整個(gè)的這種運(yùn)行機(jī) 制又稱(chēng)為EventLoop（事件循環(huán)）。

 5. 結(jié)合 EventLoop 分析輸出的順序

正確的輸出結(jié)果：ADCB。

其中：

A和D屬于同步任務(wù) 。

會(huì)根據(jù)代碼的先后順序依次被執(zhí)行C和B屬于異步任務(wù)。

它們的回調(diào)函數(shù)會(huì)被加入到任務(wù)隊(duì)列中，等待主線程空閑時(shí)再執(zhí)行

2、宏任務(wù)和微任務(wù) 

1.什么是宏任務(wù)和微任務(wù)

JavaScript 把異步任務(wù)又做了進(jìn)一步的劃分，異步任務(wù)又分為兩類(lèi)，分別是：

① 宏任務(wù)（macrotask）

異 步 Ajax 請(qǐng)求、 setTimeout 、 setInterval 、 文件操作 其它宏任務(wù)

② 微任務(wù)（microtask）

Promise.then 、 .catch 和 .finally process.nextTick 其它微任務(wù)

2. 宏任務(wù)和微任務(wù)的執(zhí)行順序

每一個(gè)宏任務(wù)執(zhí)行完之后，都會(huì)檢查是否存在待執(zhí)行的微任務(wù)，

如果有，則執(zhí)行完所有微任務(wù)之后，再繼續(xù)執(zhí)行下一個(gè)宏任務(wù)。

3. 去銀行辦業(yè)務(wù)的場(chǎng)景(舉例)

① 小云和小騰去銀行辦業(yè)務(wù)。首先，需要取號(hào)之后進(jìn)行排隊(duì)

宏任務(wù)隊(duì)列

② 假設(shè)當(dāng)前銀行網(wǎng)點(diǎn)只有一個(gè)柜員，小云在辦理存款業(yè)務(wù)時(shí)，小騰只能等待

單線 程 ，宏任 務(wù) 按次 序 執(zhí)行

③ 小云辦完存款業(yè)務(wù)后，柜員詢(xún)問(wèn)他是否還想辦理其它業(yè)務(wù)？

當(dāng)前宏任務(wù)執(zhí)行完 ， 檢 查是 否 有微 任 務(wù)

④ 小云告訴柜員：想要買(mǎi)理財(cái)產(chǎn)品、再辦個(gè)信用卡、最后再兌換點(diǎn)馬年紀(jì)念幣？

執(zhí)行微任務(wù)，后 續(xù) 宏 任 務(wù)被 推 遲

⑤ 小云離開(kāi)柜臺(tái)后，柜員開(kāi)始為小騰辦理業(yè)務(wù)

所有微任務(wù)執(zhí)行完 畢 ， 開(kāi) 始 執(zhí) 行下 一 個(gè) 宏 任務(wù)  

4. 分析以下代碼輸出的順序

正確的輸出順序是：2431

分析：

① 先執(zhí)行所有的同步任務(wù)

執(zhí)行第 6 行、第 12 行代碼

② 再執(zhí)行微任務(wù)

執(zhí)行第 9 行代碼

③ 再執(zhí)行下一個(gè)宏任務(wù)

執(zhí)行 第 2 行代碼

5. 經(jīng)典面試題

請(qǐng)分析以下代碼輸出的順序（代碼較長(zhǎng)，截取成了左中右 3 個(gè)部分） ：

正確的輸出順序是：156234789 

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論