事件循環(huán)是什么吃嘿？事實(shí)上我把事件循環(huán)理解成我們編寫(xiě)的JavaScript和瀏覽器或者Node之間的一個(gè)橋梁最仑。
瀏覽器的事件循環(huán)是一個(gè)我們編寫(xiě)的JavaScript代碼和瀏覽器API調(diào)用(setTimeout/AJAX/監(jiān)聽(tīng)事件等)的一個(gè)橋梁, 橋梁之間他們通過(guò)回調(diào)函數(shù)進(jìn)行溝通。
Node的事件循環(huán)是一個(gè)我們編寫(xiě)的JavaScript代碼和系統(tǒng)調(diào)用（file system赏壹、network等）之間的一個(gè)橋梁, 橋梁之間他們通過(guò)回調(diào)函數(shù)進(jìn)行溝通的鱼炒。
1. 瀏覽器的事件循環(huán)
1.1. 進(jìn)程和線程
線程和進(jìn)程是操作系統(tǒng)中的兩個(gè)概念：
- 進(jìn)程（process）：計(jì)算機(jī)已經(jīng)運(yùn)行的程序；
- 線程（thread）：操作系統(tǒng)能夠運(yùn)行運(yùn)算調(diào)度的最小單位蝌借；
聽(tīng)起來(lái)很抽象昔瞧，我們直觀一點(diǎn)解釋：
- 進(jìn)程：我們可以認(rèn)為，啟動(dòng)一個(gè)應(yīng)用程序骨望，就會(huì)默認(rèn)啟動(dòng)一個(gè)進(jìn)程（也可能是多個(gè)進(jìn)程）硬爆；
- 線程：每一個(gè)進(jìn)程中，都會(huì)啟動(dòng)一個(gè)線程用來(lái)執(zhí)行程序中的代碼擎鸠，這個(gè)線程被稱之為主線程缀磕；
- 所以我們也可以說(shuō)進(jìn)程是線程的容器；
再用一個(gè)形象的例子解釋：
- 操作系統(tǒng)類似于一個(gè)工廠劣光；
- 工廠中里有很多車(chē)間袜蚕，這個(gè)車(chē)間就是進(jìn)程；
- 每個(gè)車(chē)間可能有一個(gè)以上的工人在工廠绢涡，這個(gè)工人就是線程牲剃；
image.png
操作系統(tǒng)是如何做到同時(shí)讓多個(gè)進(jìn)程（邊聽(tīng)歌、邊寫(xiě)代碼雄可、邊查閱資料）同時(shí)工作呢凿傅？
- 這是因?yàn)镃PU的運(yùn)算速度非常快数苫，它可以快速的在多個(gè)進(jìn)程之間迅速的切換聪舒；
- 當(dāng)我們的進(jìn)程中的線程獲取獲取到時(shí)間片時(shí)，就可以快速執(zhí)行我們編寫(xiě)的代碼虐急；
- 對(duì)于用于來(lái)說(shuō)是感受不到這種快速的切換的箱残；
你可以在Mac的活動(dòng)監(jiān)視器或者Windows的資源管理器中查看到很多進(jìn)程。
1.2. 瀏覽器和JavaScript
我們經(jīng)常會(huì)說(shuō)JavaScript是單線程的止吁，但是JavaScript的線程應(yīng)該有自己的容器進(jìn)程：瀏覽器或者Node被辑。
瀏覽器是一個(gè)進(jìn)程嗎，它里面只有一個(gè)線程嗎敬惦？
- 目前多數(shù)的瀏覽器其實(shí)都是多進(jìn)程的盼理，當(dāng)我們打開(kāi)一個(gè)tab頁(yè)面時(shí)就會(huì)開(kāi)啟一個(gè)新的進(jìn)程，這是為了防止一個(gè)頁(yè)面卡死而造成所有頁(yè)面無(wú)法響應(yīng)俄删，整個(gè)瀏覽器需要強(qiáng)制退出榜揖；
- 每個(gè)進(jìn)程中又有很多的線程勾哩，其中包括執(zhí)行JavaScript代碼的線程；
但是JavaScript的代碼執(zhí)行是在一個(gè)單獨(dú)的線程中執(zhí)行的：
- 這就意味著JavaScript的代碼举哟，在同一個(gè)時(shí)刻只能做一件事思劳；
- 如果這件事是非常耗時(shí)的，就意味著當(dāng)前的線程就會(huì)被阻塞妨猩；
分析下面代碼的執(zhí)行過(guò)程：
- 定義變量name潜叛；
- 執(zhí)行l(wèi)og函數(shù)，函數(shù)會(huì)被放入到調(diào)用棧中執(zhí)行壶硅；
- 調(diào)用bar()函數(shù)威兜，被壓入到調(diào)用棧中，但是執(zhí)行未結(jié)束庐椒；
- bar因?yàn)檎{(diào)用了sum椒舵，sum函數(shù)被壓入到調(diào)用棧中，獲取到結(jié)果后出棧约谈；
- bar獲取到結(jié)果后出棧笔宿，獲取到結(jié)果result；
- 將log函數(shù)壓入到調(diào)用棧棱诱，log被執(zhí)行泼橘，并且出棧；
const name = "coderwhy";
// 1.將該函數(shù)放入到調(diào)用棧中被執(zhí)行
console.log(name);
// 2. 調(diào)用棧
function sum(num1, num2) {
return num1 + num2;
}
function bar() {
return sum(20, 30);
}
console.log(bar());
1.3. 瀏覽器的事件循環(huán)
如果在執(zhí)行JavaScript代碼的過(guò)程中迈勋，有異步操作呢炬灭？
- 中間我們插入了一個(gè)setTimeout的函數(shù)調(diào)用；
- 這個(gè)函數(shù)被放到入調(diào)用棧中靡菇，執(zhí)行會(huì)立即結(jié)束重归，并不會(huì)阻塞后續(xù)代碼的執(zhí)行；
const name = "coderwhy";
// 1.將該函數(shù)放入到調(diào)用棧中被執(zhí)行
console.log(name);
// 2.調(diào)用棧
function sum(num1, num2) {
return num1 + num2;
}
function bar() {
return sum(20, 30);
}
setTimeout(() => {
console.log("settimeout");
}, 1000);
const result = bar();
console.log(result);
那么厦凤，傳入的一個(gè)函數(shù)（比如我們稱之為timer函數(shù)）鼻吮，會(huì)在什么時(shí)候被執(zhí)行呢？
- 事實(shí)上泳唠，setTimeout是調(diào)用了web api狈网，在合適的時(shí)機(jī)宙搬，會(huì)將timer函數(shù)加入到一個(gè)事件隊(duì)列中笨腥；
- 事件隊(duì)列中的函數(shù)，會(huì)被放入到調(diào)用棧中勇垛，在調(diào)用棧中被執(zhí)行脖母；
image.png
1.4. 宏任務(wù)和微任務(wù)
但是事件循環(huán)中并非只維護(hù)著一個(gè)隊(duì)列，事實(shí)上是有兩個(gè)隊(duì)列：
- 宏任務(wù)隊(duì)列（macrotask queue）：ajax闲孤、setTimeout谆级、setInterval烤礁、DOM監(jiān)聽(tīng)、UI Rendering等
- 微任務(wù)隊(duì)列（microtask queue）：Promise的then回調(diào)肥照、 Mutation Observer API脚仔、queueMicrotask()等
那么事件循環(huán)對(duì)于兩個(gè)隊(duì)列的優(yōu)先級(jí)是怎么樣的呢？
- 1.main script中的代碼優(yōu)先執(zhí)行（編寫(xiě)的頂層script代碼）舆绎；
- 2.在執(zhí)行任何一個(gè)宏任務(wù)之前（不是隊(duì)列鲤脏，是一個(gè)宏任務(wù)），都會(huì)先查看微任務(wù)隊(duì)列中是否有任務(wù)需要執(zhí)行
- 也就是宏任務(wù)執(zhí)行之前吕朵，必須保證微任務(wù)隊(duì)列是空的猎醇；
- 如果不為空，那么就優(yōu)先執(zhí)行微任務(wù)隊(duì)列中的任務(wù)（回調(diào)）努溃；
我們來(lái)看一個(gè)面試題：執(zhí)行結(jié)果如何硫嘶？
setTimeout(function () {
console.log("set1");
new Promise(function (resolve) {
resolve();
}).then(function () {
new Promise(function (resolve) {
resolve();
}).then(function () {
console.log("then4");
});
console.log("then2");
});
});
new Promise(function (resolve) {
console.log("pr1");
resolve();
}).then(function () {
console.log("then1");
});
setTimeout(function () {
console.log("set2");
});
console.log(2);
queueMicrotask(() => {
console.log("queueMicrotask1")
});
new Promise(function (resolve) {
resolve();
}).then(function () {
console.log("then3");
});
執(zhí)行結(jié)果：
pr1
2
then1
queueMicrotask1
then3
set1
then2
then4
set2
async、await是Promise的一個(gè)語(yǔ)法糖：
- 我們可以將await關(guān)鍵字后面執(zhí)行的代碼梧税，看做是包裹在(resolve, reject) => {函數(shù)執(zhí)行}中的代碼沦疾；
- await的下一條語(yǔ)句，可以看做是then(res => {函數(shù)執(zhí)行})中的代碼贡蓖；
今日頭條的面試題：
async function async1 () {
console.log('async1 start')
await async2();
console.log('async1 end')
}
async function async2 () {
console.log('async2')
}
console.log('script start')
setTimeout(function () {
console.log('setTimeout')
}, 0)
async1();
new Promise (function (resolve) {
console.log('promise1')
resolve();
}).then (function () {
console.log('promise2')
})
console.log('script end')
執(zhí)行結(jié)果如下：
script start
async1 start
async2
promise1
script end
async1 end
promise2
setTimeout
2. Node的事件循環(huán)
2.1. Node的事件循環(huán)
瀏覽器中的EventLoop是根據(jù)HTML5定義的規(guī)范來(lái)實(shí)現(xiàn)的曹鸠，不同的瀏覽器可能會(huì)有不同的實(shí)現(xiàn)，而Node中是由libuv實(shí)現(xiàn)的斥铺。
我們來(lái)看在很早就給大家展示的Node架構(gòu)圖：
- 我們會(huì)發(fā)現(xiàn)libuv中主要維護(hù)了一個(gè)EventLoop和worker threads（線程池）彻桃；
- EventLoop負(fù)責(zé)調(diào)用系統(tǒng)的一些其他操作：文件的IO、Network晾蜘、child-processes等
image.png
libuv到底是什么呢邻眷？
- libuv is a multi-platform support library with a focus on asynchronous I/O. It was primarily developed for use by Node.js, but it's also used by Luvit, Julia, pyuv, and others.
- libuv是一個(gè)多平臺(tái)的專注于異步IO的庫(kù)，它最初是為Node開(kāi)發(fā)的剔交，但是現(xiàn)在也被使用到Luvit肆饶、Julia、pyuv等其他地方岖常；
libuv到底幫助我們做了什么事情呢驯镊？
- 我們以文件操作為例，來(lái)講解一下它內(nèi)部的結(jié)構(gòu)竭鞍；
2.2. 阻塞IO和非阻塞IO
如果我們希望在程序中對(duì)一個(gè)文件進(jìn)行操作板惑，那么我們就需要打開(kāi)這個(gè)文件：通過(guò)文件描述符。
- 我們思考：JavaScript可以直接對(duì)一個(gè)文件進(jìn)行操作嗎偎快？
- 看起來(lái)是可以的冯乘，但是事實(shí)上我們?nèi)魏纬绦蛑械奈募僮鞫际切枰M(jìn)行系統(tǒng)調(diào)用（操作系統(tǒng)封裝了文件系統(tǒng)）；
- 事實(shí)上對(duì)文件的操作晒夹，是一個(gè)操作系統(tǒng)的IO操作（輸入裆馒、輸出）姊氓；
操作系統(tǒng)為我們提供了阻塞式調(diào)用和非阻塞式調(diào)用：
- 阻塞式調(diào)用： 調(diào)用結(jié)果返回之前，當(dāng)前線程處于阻塞態(tài)（阻塞態(tài)CPU是不會(huì)分配時(shí)間片的）喷好，調(diào)用線程只- 有在得到調(diào)用結(jié)果之后才會(huì)繼續(xù)執(zhí)行翔横。
- 非阻塞式調(diào)用： 調(diào)用執(zhí)行之后，當(dāng)前線程不會(huì)停止執(zhí)行梗搅，只需要過(guò)一段時(shí)間來(lái)檢查一下有沒(méi)有結(jié)果返回即可棕孙。
所以我們開(kāi)發(fā)中的很多耗時(shí)操作，都可以基于這樣的 非阻塞式調(diào)用：
- 比如網(wǎng)絡(luò)請(qǐng)求本身使用了Socket通信些膨，而Socket本身提供了select模型蟀俊，可以進(jìn)行非阻塞方式的工作；
- 比如文件讀寫(xiě)的IO操作订雾，我們可以使用操作系統(tǒng)提供的基于事件的回調(diào)機(jī)制肢预；
但是非阻塞IO也會(huì)存在一定的問(wèn)題：我們并沒(méi)有獲取到需要讀取（我們以讀取為例）的結(jié)果
- 那么就意味著為了可以知道是否讀取到了完整的數(shù)據(jù)洼哎，我們需要頻繁的去確定讀取到的數(shù)據(jù)是否是完整的烫映；
- 這個(gè)過(guò)程我們稱之為輪訓(xùn)操作；
那么這個(gè)輪訓(xùn)的工作由誰(shuí)來(lái)完成呢噩峦？
- 如果我們的主線程頻繁的去進(jìn)行輪訓(xùn)的工作锭沟，那么必然會(huì)大大降低性能；
- 并且開(kāi)發(fā)中我們可能不只是一個(gè)文件的讀寫(xiě)识补，可能是多個(gè)文件族淮；
- 而且可能是多個(gè)功能：網(wǎng)絡(luò)的IO、數(shù)據(jù)庫(kù)的IO凭涂、子進(jìn)程調(diào)用祝辣；
libuv提供了一個(gè)線程池（Thread Pool）：
- 線程池會(huì)負(fù)責(zé)所有相關(guān)的操作，并且會(huì)通過(guò)輪訓(xùn)等方式等待結(jié)果切油；
- 當(dāng)獲取到結(jié)果時(shí)蝙斜，就可以將對(duì)應(yīng)的回調(diào)放到事件循環(huán)（某一個(gè)事件隊(duì)列）中；
-
事件循環(huán)就可以負(fù)責(zé)接管后續(xù)的回調(diào)工作澎胡，告知JavaScript應(yīng)用程序執(zhí)行對(duì)應(yīng)的回調(diào)函數(shù)孕荠；
image.png
阻塞和非阻塞，同步和異步有什么區(qū)別攻谁？
- 阻塞和非阻塞是對(duì)于被調(diào)用者來(lái)說(shuō)的稚伍；
- 在我們這里就是系統(tǒng)調(diào)用，操作系統(tǒng)為我們提供了阻塞調(diào)用和非阻塞調(diào)用巢株；
- 同步和異步是對(duì)于調(diào)用者來(lái)說(shuō)的槐瑞；
- 在我們這里就是自己的程序熙涤；
- 如果我們?cè)诎l(fā)起調(diào)用之后阁苞，不會(huì)進(jìn)行其他任何的操作困檩，只是等待結(jié)果，這個(gè)過(guò)程就稱之為同步調(diào)用那槽；
-如果我們?cè)侔l(fā)起調(diào)用之后悼沿，并不會(huì)等待結(jié)果，繼續(xù)完成其他的工作骚灸，等到有回調(diào)時(shí)再去執(zhí)行糟趾，這個(gè)過(guò)程就是異步調(diào)用；
2.3. Node事件循環(huán)的階段
我們最前面就強(qiáng)調(diào)過(guò)甚牲，事件循環(huán)像是一個(gè)橋梁义郑，是連接著應(yīng)用程序的JavaScript和系統(tǒng)調(diào)用之間的通道：
- 無(wú)論是我們的文件IO、數(shù)據(jù)庫(kù)丈钙、網(wǎng)絡(luò)IO非驮、定時(shí)器、子進(jìn)程雏赦，在完成對(duì)應(yīng)的操作后劫笙，都會(huì)將對(duì)應(yīng)的結(jié)果和回調(diào)函數(shù)放到事件循環(huán)（任務(wù)隊(duì)列）中；
- 事件循環(huán)會(huì)不斷的從任務(wù)隊(duì)列中取出對(duì)應(yīng)的事件（回調(diào)函數(shù)）來(lái)執(zhí)行星岗；
但是一次完整的事件循環(huán)Tick分成很多個(gè)階段：
- 定時(shí)器（Timers）：本階段執(zhí)行已經(jīng)被 setTimeout() 和 setInterval() 的調(diào)度回調(diào)函數(shù)填大。
- 待定回調(diào)（Pending Callback）：對(duì)某些系統(tǒng)操作（如TCP錯(cuò)誤類型）執(zhí)行回調(diào)，比如TCP連接時(shí)接收到ECONNREFUSED俏橘。
- idle, prepare：僅系統(tǒng)內(nèi)部使用允华。
- 輪詢（Poll）：檢索新的 I/O 事件；執(zhí)行與 I/O 相關(guān)的回調(diào)寥掐；
- 檢測(cè)：setImmediate() 回調(diào)函數(shù)在這里執(zhí)行例获。
-
關(guān)閉的回調(diào)函數(shù)：一些關(guān)閉的回調(diào)函數(shù)，如：socket.on('close', ...)曹仗。
image.png
我們會(huì)發(fā)現(xiàn)從一次事件循環(huán)的Tick來(lái)說(shuō)榨汤，Node的事件循環(huán)更復(fù)雜，它也分為微任務(wù)和宏任務(wù)：
- 宏任務(wù)（macrotask）：setTimeout怎茫、setInterval收壕、IO事件、setImmediate轨蛤、close事件蜜宪；
- 微任務(wù)（microtask）：Promise的then回調(diào)、process.nextTick祥山、queueMicrotask圃验；
但是，Node中的事件循環(huán)不只是 微任務(wù)隊(duì)列和 宏任務(wù)隊(duì)列：
- 微任務(wù)隊(duì)列：
- next tick queue：process.nextTick缝呕；
- other queue：Promise的then回調(diào)澳窑、queueMicrotask斧散；
- 宏任務(wù)隊(duì)列：
- timer queue：setTimeout、setInterval摊聋；
- poll queue：IO事件鸡捐；
- check queue：setImmediate；
- close queue：close事件麻裁；
所以箍镜，在每一次事件循環(huán)的tick中，會(huì)按照如下順序來(lái)執(zhí)行代碼：
- next tick microtask queue煎源；
- other microtask queue色迂；
- timer queue；
- poll queue手销；
- check queue脚草；
- close queue；
2.4. Node代碼執(zhí)行面試
面試題一：
async function async1() {
console.log('async1 start')
await async2()
console.log('async1 end')
}
async function async2() {
console.log('async2')
}
console.log('script start')
setTimeout(function () {
console.log('setTimeout0')
}, 0)
setTimeout(function () {
console.log('setTimeout2')
}, 300)
setImmediate(() => console.log('setImmediate'));
process.nextTick(() => console.log('nextTick1'));
async1();
process.nextTick(() => console.log('nextTick2'));
new Promise(function (resolve) {
console.log('promise1')
resolve();
console.log('promise2')
}).then(function () {
console.log('promise3')
})
console.log('script end')
執(zhí)行結(jié)果如下：
script start
async1 start
async2
promise1
promise2
script end
nextTick
async1 end
promise3
setTimeout0
setImmediate
setTimeout2
面試題二：
setTimeout(() => {
console.log("setTimeout");
}, 0);
setImmediate(() => {
console.log("setImmediate");
});
執(zhí)行結(jié)果：
情況一：
setTimeout
setImmediate
情況二：
setImmediate
setTimeout
為什么會(huì)出現(xiàn)不同的情況呢原献？
- 在Node源碼的deps/uv/src/timer.c中141行馏慨，有一個(gè) uv__next_timeout的函數(shù)；
- 這個(gè)函數(shù)決定了姑隅，poll階段要不要阻塞在這里写隶；
- 阻塞在這里的目的是當(dāng)有異步IO被處理時(shí)，盡可能快的讓代碼被執(zhí)行讲仰；
int uv__next_timeout(const uv_loop_t* loop) {
const struct heap_node* heap_node;
const uv_timer_t* handle;
uint64_t diff;
// 計(jì)算距離當(dāng)前時(shí)間節(jié)點(diǎn)最小的計(jì)時(shí)器
heap_node = heap_min(timer_heap(loop));
// 如果為空, 那么返回-1,表示為阻塞狀態(tài)
if (heap_node == NULL)
return -1; /* block indefinitely */
// 如果計(jì)時(shí)器的時(shí)間小于當(dāng)前l(fā)oop的開(kāi)始時(shí)間, 那么返回0
// 繼續(xù)執(zhí)行后續(xù)階段, 并且開(kāi)啟下一次tick
handle = container_of(heap_node, uv_timer_t, heap_node);
if (handle->timeout <= loop->time)
return 0;
// 如果不大于loop的開(kāi)始時(shí)間, 那么會(huì)返回時(shí)間差
diff = handle->timeout - loop->time;
if (diff > INT_MAX)
diff = INT_MAX;
return (int) diff;
}
和上面有什么關(guān)系呢慕趴？
- 情況一：如果事件循環(huán)開(kāi)啟的時(shí)間(ms)是小于 setTimeout函數(shù)的執(zhí)行時(shí)間的；
- 也就意味著先開(kāi)啟了event-loop鄙陡，但是這個(gè)時(shí)候執(zhí)行到timer階段冕房，并沒(méi)有定時(shí)器的回調(diào)被放到入 timer queue中；
- 所以沒(méi)有被執(zhí)行趁矾，后續(xù)開(kāi)啟定時(shí)器和檢測(cè)到有setImmediate時(shí)耙册，就會(huì)跳過(guò)poll階段，向后繼續(xù)執(zhí)行毫捣；
- 這個(gè)時(shí)候是先檢測(cè) setImmediate详拙，第二次的tick中執(zhí)行了timer中的 setTimeout；
- 情況二：如果事件循環(huán)開(kāi)啟的時(shí)間(ms)是大于 setTimeout函數(shù)的執(zhí)行時(shí)間的蔓同；
- 這就意味著在第一次 tick中饶辙，已經(jīng)準(zhǔn)備好了timer queue；
- 所以會(huì)直接按照順序執(zhí)行即可斑粱；
