事件循環(huán)是什么？事實(shí)上我把事件循環(huán)理解成我們編寫的JavaScript和瀏覽器或者Node之間的一個(gè)橋梁。

瀏覽器的事件循環(huán)是一個(gè)我們編寫的JavaScript代碼和瀏覽器API調(diào)用(setTimeout/AJAX/監(jiān)聽事件等)的一個(gè)橋梁, 橋梁之間他們通過(guò)回調(diào)函數(shù)進(jìn)行溝通。

Node的事件循環(huán)是一個(gè)我們編寫的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)度的最小單位；

聽起來(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è)工廠；
工廠中里有很多車間，這個(gè)車間就是進(jìn)程；
每個(gè)車間可能有一個(gè)以上的工人在工廠，這個(gè)工人就是線程；

image.png

操作系統(tǒng)是如何做到同時(shí)讓多個(gè)進(jìn)程（邊聽歌、邊寫代碼、邊查閱資料）同時(shí)工作呢？

這是因?yàn)镃PU的運(yùn)算速度非常快，它可以快速的在多個(gè)進(jìn)程之間迅速的切換；
當(dāng)我們的進(jìn)程中的線程獲取獲取到時(shí)間片時(shí)，就可以快速執(zhí)行我們編寫的代碼；
對(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)我們打開一個(gè)tab頁(yè)面時(shí)就會(huì)開啟一個(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)聽、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í)行（編寫的頂層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開發(fā)的，但是現(xiàn)在也被使用到Luvit、Julia、pyuv等其他地方；

libuv到底幫助我們做了什么事情呢？

我們以文件操作為例，來(lái)講解一下它內(nèi)部的結(jié)構(gòu)；

2.2. 阻塞IO和非阻塞IO

如果我們希望在程序中對(duì)一個(gè)文件進(jìn)行操作，那么我們就需要打開這個(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)檢查一下有沒有結(jié)果返回即可。

所以我們開發(fā)中的很多耗時(shí)操作，都可以基于這樣的 非阻塞式調(diào)用：

比如網(wǎng)絡(luò)請(qǐng)求本身使用了Socket通信，而Socket本身提供了select模型，可以進(jìn)行非阻塞方式的工作；
比如文件讀寫的IO操作，我們可以使用操作系統(tǒng)提供的基于事件的回調(diào)機(jī)制；

但是非阻塞IO也會(huì)存在一定的問(wèn)題：我們并沒有獲取到需要讀取（我們以讀取為例）的結(jié)果

那么就意味著為了可以知道是否讀取到了完整的數(shù)據(jù)，我們需要頻繁的去確定讀取到的數(shù)據(jù)是否是完整的；
這個(gè)過(guò)程我們稱之為輪訓(xùn)操作；

那么這個(gè)輪訓(xùn)的工作由誰(shuí)來(lái)完成呢？

如果我們的主線程頻繁的去進(jìn)行輪訓(xùn)的工作，那么必然會(huì)大大降低性能；
并且開發(fā)中我們可能不只是一個(gè)文件的讀寫，可能是多個(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的開始時(shí)間, 那么返回0
  // 繼續(xù)執(zhí)行后續(xù)階段, 并且開啟下一次tick
  handle = container_of(heap_node, uv_timer_t, heap_node);
  if (handle->timeout <= loop->time)
    return 0;

  // 如果不大于loop的開始時(shí)間, 那么會(huì)返回時(shí)間差
  diff = handle->timeout - loop->time;
  if (diff > INT_MAX)
    diff = INT_MAX;

  return (int) diff;
}

和上面有什么關(guān)系呢？

情況一：如果事件循環(huán)開啟的時(shí)間(ms)是小于 setTimeout函數(shù)的執(zhí)行時(shí)間的；
- 也就意味著先開啟了event-loop，但是這個(gè)時(shí)候執(zhí)行到timer階段，并沒有定時(shí)器的回調(diào)被放到入 timer queue中；
- 所以沒有被執(zhí)行，后續(xù)開啟定時(shí)器和檢測(cè)到有setImmediate時(shí)，就會(huì)跳過(guò)poll階段，向后繼續(xù)執(zhí)行；
- 這個(gè)時(shí)候是先檢測(cè) setImmediate，第二次的tick中執(zhí)行了timer中的 setTimeout；
情況二：如果事件循環(huán)開啟的時(shí)間(ms)是大于 setTimeout函數(shù)的執(zhí)行時(shí)間的；
- 這就意味著在第一次 tick中，已經(jīng)準(zhǔn)備好了timer queue；
- 所以會(huì)直接按照順序執(zhí)行即可；

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

JavaScript事件循環(huán)

JavaScript事件循環(huán)

1. 瀏覽器的事件循環(huán)

1.1. 進(jìn)程和線程

1.2. 瀏覽器和JavaScript

1.3. 瀏覽器的事件循環(huán)

1.4. 宏任務(wù)和微任務(wù)

2. Node的事件循環(huán)

2.1. Node的事件循環(huán)

2.2. 阻塞IO和非阻塞IO

2.3. Node事件循環(huán)的階段

2.4. Node代碼執(zhí)行面試

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

JavaScript事件循環(huán)

1. 瀏覽器的事件循環(huán)

1.1. 進(jìn)程和線程

1.2. 瀏覽器和JavaScript

1.3. 瀏覽器的事件循環(huán)

1.4. 宏任務(wù)和微任務(wù)

2. Node的事件循環(huán)

2.1. Node的事件循環(huán)

2.2. 阻塞IO和非阻塞IO

2.3. Node事件循環(huán)的階段

2.4. Node代碼執(zhí)行面試

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av