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

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

Node的事件循環(huán)是一個我們編寫的JavaScript代碼和系統(tǒng)調用（file system、network等）之間的一個橋梁, 橋梁之間他們通過回調函數進行溝通的。

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

1.1. 進程和線程

線程和進程是操作系統(tǒng)中的兩個概念：

進程（process）：計算機已經運行的程序；
線程（thread）：操作系統(tǒng)能夠運行運算調度的最小單位；

聽起來很抽象，我們直觀一點解釋：

進程：我們可以認為，啟動一個應用程序，就會默認啟動一個進程（也可能是多個進程）；
線程：每一個進程中，都會啟動一個線程用來執(zhí)行程序中的代碼，這個線程被稱之為主線程；
所以我們也可以說進程是線程的容器；

再用一個形象的例子解釋：

操作系統(tǒng)類似于一個工廠；
工廠中里有很多車間，這個車間就是進程；
每個車間可能有一個以上的工人在工廠，這個工人就是線程；

image.png

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

這是因為CPU的運算速度非常快，它可以快速的在多個進程之間迅速的切換；
當我們的進程中的線程獲取獲取到時間片時，就可以快速執(zhí)行我們編寫的代碼；
對于用于來說是感受不到這種快速的切換的；

你可以在Mac的活動監(jiān)視器或者Windows的資源管理器中查看到很多進程。

1.2. 瀏覽器和JavaScript

我們經常會說JavaScript是單線程的，但是JavaScript的線程應該有自己的容器進程：瀏覽器或者Node。

瀏覽器是一個進程嗎，它里面只有一個線程嗎？

目前多數的瀏覽器其實都是多進程的，當我們打開一個tab頁面時就會開啟一個新的進程，這是為了防止一個頁面卡死而造成所有頁面無法響應，整個瀏覽器需要強制退出；
每個進程中又有很多的線程，其中包括執(zhí)行JavaScript代碼的線程；

但是JavaScript的代碼執(zhí)行是在一個單獨的線程中執(zhí)行的：

這就意味著JavaScript的代碼，在同一個時刻只能做一件事；
如果這件事是非常耗時的，就意味著當前的線程就會被阻塞；

分析下面代碼的執(zhí)行過程：

定義變量name；
執(zhí)行l(wèi)og函數，函數會被放入到調用棧中執(zhí)行；
調用bar()函數，被壓入到調用棧中，但是執(zhí)行未結束；
bar因為調用了sum，sum函數被壓入到調用棧中，獲取到結果后出棧；
bar獲取到結果后出棧，獲取到結果result；
將log函數壓入到調用棧，log被執(zhí)行，并且出棧；

const name = "coderwhy";

// 1.將該函數放入到調用棧中被執(zhí)行
console.log(name);

// 2. 調用棧
function sum(num1, num2) {
  return num1 + num2;
}

function bar() {
  return sum(20, 30);
}

console.log(bar());

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

如果在執(zhí)行JavaScript代碼的過程中，有異步操作呢？

中間我們插入了一個setTimeout的函數調用；
這個函數被放到入調用棧中，執(zhí)行會立即結束，并不會阻塞后續(xù)代碼的執(zhí)行；

const name = "coderwhy";

// 1.將該函數放入到調用棧中被執(zhí)行
console.log(name);

// 2.調用棧
function sum(num1, num2) {
  return num1 + num2;
}

function bar() {
  return sum(20, 30);
}

setTimeout(() => {
  console.log("settimeout");
}, 1000);

const result = bar();

console.log(result);

那么，傳入的一個函數（比如我們稱之為timer函數），會在什么時候被執(zhí)行呢？

事實上，setTimeout是調用了web api，在合適的時機，會將timer函數加入到一個事件隊列中；
事件隊列中的函數，會被放入到調用棧中，在調用棧中被執(zhí)行；

image.png

1.4. 宏任務和微任務

但是事件循環(huán)中并非只維護著一個隊列，事實上是有兩個隊列：

宏任務隊列（macrotask queue）：ajax、setTimeout、setInterval、DOM監(jiān)聽、UI Rendering等
微任務隊列（microtask queue）：Promise的then回調、 Mutation Observer API、queueMicrotask()等

那么事件循環(huán)對于兩個隊列的優(yōu)先級是怎么樣的呢？

1.main script中的代碼優(yōu)先執(zhí)行（編寫的頂層script代碼）；
2.在執(zhí)行任何一個宏任務之前（不是隊列，是一個宏任務），都會先查看微任務隊列中是否有任務需要執(zhí)行
- 也就是宏任務執(zhí)行之前，必須保證微任務隊列是空的；
- 如果不為空，那么就優(yōu)先執(zhí)行微任務隊列中的任務（回調）；

我們來看一個面試題：執(zhí)行結果如何？

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í)行結果：

pr1
2
then1
queueMicrotask1
then3
set1
then2
then4
set2

async、await是Promise的一個語法糖：

我們可以將await關鍵字后面執(zhí)行的代碼，看做是包裹在(resolve, reject) => {函數執(zhí)行}中的代碼；
await的下一條語句，可以看做是then(res => {函數執(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í)行結果如下：

script start
async1 start
async2
promise1
script end
async1 end
promise2
setTimeout

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

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

瀏覽器中的EventLoop是根據HTML5定義的規(guī)范來實現(xiàn)的，不同的瀏覽器可能會有不同的實現(xiàn)，而Node中是由libuv實現(xiàn)的。

我們來看在很早就給大家展示的Node架構圖：

我們會發(fā)現(xiàn)libuv中主要維護了一個EventLoop和worker threads（線程池）；
EventLoop負責調用系統(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是一個多平臺的專注于異步IO的庫，它最初是為Node開發(fā)的，但是現(xiàn)在也被使用到Luvit、Julia、pyuv等其他地方；

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

我們以文件操作為例，來講解一下它內部的結構；

2.2. 阻塞IO和非阻塞IO

如果我們希望在程序中對一個文件進行操作，那么我們就需要打開這個文件：通過文件描述符。

我們思考：JavaScript可以直接對一個文件進行操作嗎？
看起來是可以的，但是事實上我們任何程序中的文件操作都是需要進行系統(tǒng)調用（操作系統(tǒng)封裝了文件系統(tǒng)）；
事實上對文件的操作，是一個操作系統(tǒng)的IO操作（輸入、輸出）；

操作系統(tǒng)為我們提供了阻塞式調用和非阻塞式調用：

阻塞式調用：調用結果返回之前，當前線程處于阻塞態(tài)（阻塞態(tài)CPU是不會分配時間片的），調用線程只- 有在得到調用結果之后才會繼續(xù)執(zhí)行。
非阻塞式調用：調用執(zhí)行之后，當前線程不會停止執(zhí)行，只需要過一段時間來檢查一下有沒有結果返回即可。

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

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

但是非阻塞IO也會存在一定的問題：我們并沒有獲取到需要讀?。ㄎ覀円宰x取為例）的結果

那么就意味著為了可以知道是否讀取到了完整的數據，我們需要頻繁的去確定讀取到的數據是否是完整的；
這個過程我們稱之為輪訓操作；

那么這個輪訓的工作由誰來完成呢？

如果我們的主線程頻繁的去進行輪訓的工作，那么必然會大大降低性能；
并且開發(fā)中我們可能不只是一個文件的讀寫，可能是多個文件；
而且可能是多個功能：網絡的IO、數據庫的IO、子進程調用；

libuv提供了一個線程池（Thread Pool）：

線程池會負責所有相關的操作，并且會通過輪訓等方式等待結果；
當獲取到結果時，就可以將對應的回調放到事件循環(huán)（某一個事件隊列）中；
事件循環(huán)就可以負責接管后續(xù)的回調工作，告知JavaScript應用程序執(zhí)行對應的回調函數；

image.png

阻塞和非阻塞，同步和異步有什么區(qū)別？

阻塞和非阻塞是對于被調用者來說的；
- 在我們這里就是系統(tǒng)調用，操作系統(tǒng)為我們提供了阻塞調用和非阻塞調用；
同步和異步是對于調用者來說的；
- 在我們這里就是自己的程序；
- 如果我們在發(fā)起調用之后，不會進行其他任何的操作，只是等待結果，這個過程就稱之為同步調用；
  -如果我們再發(fā)起調用之后，并不會等待結果，繼續(xù)完成其他的工作，等到有回調時再去執(zhí)行，這個過程就是異步調用；

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

我們最前面就強調過，事件循環(huán)像是一個橋梁，是連接著應用程序的JavaScript和系統(tǒng)調用之間的通道：

無論是我們的文件IO、數據庫、網絡IO、定時器、子進程，在完成對應的操作后，都會將對應的結果和回調函數放到事件循環(huán)（任務隊列）中；
事件循環(huán)會不斷的從任務隊列中取出對應的事件（回調函數）來執(zhí)行；

但是一次完整的事件循環(huán)Tick分成很多個階段：

定時器（Timers）：本階段執(zhí)行已經被 setTimeout() 和 setInterval() 的調度回調函數。
待定回調（Pending Callback）：對某些系統(tǒng)操作（如TCP錯誤類型）執(zhí)行回調，比如TCP連接時接收到ECONNREFUSED。
idle, prepare：僅系統(tǒng)內部使用。
輪詢（Poll）：檢索新的 I/O 事件；執(zhí)行與 I/O 相關的回調；
檢測：setImmediate() 回調函數在這里執(zhí)行。
關閉的回調函數：一些關閉的回調函數，如：socket.on('close', ...)。

image.png

我們會發(fā)現(xiàn)從一次事件循環(huán)的Tick來說，Node的事件循環(huán)更復雜，它也分為微任務和宏任務：

宏任務（macrotask）：setTimeout、setInterval、IO事件、setImmediate、close事件；
微任務（microtask）：Promise的then回調、process.nextTick、queueMicrotask；

但是，Node中的事件循環(huán)不只是微任務隊列和宏任務隊列：

微任務隊列：
- next tick queue：process.nextTick；
- other queue：Promise的then回調、queueMicrotask；
宏任務隊列：
- timer queue：setTimeout、setInterval；
- poll queue：IO事件；
- check queue：setImmediate；
- close queue：close事件；

所以，在每一次事件循環(huán)的tick中，會按照如下順序來執(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í)行結果如下：

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í)行結果：

情況一：
setTimeout
setImmediate

情況二：
setImmediate
setTimeout

為什么會出現(xiàn)不同的情況呢？

在Node源碼的deps/uv/src/timer.c中141行，有一個 uv__next_timeout的函數；
這個函數決定了，poll階段要不要阻塞在這里；
阻塞在這里的目的是當有異步IO被處理時，盡可能快的讓代碼被執(zhí)行；

int uv__next_timeout(const uv_loop_t* loop) {
  const struct heap_node* heap_node;
  const uv_timer_t* handle;
  uint64_t diff;

  // 計算距離當前時間節(jié)點最小的計時器
  heap_node = heap_min(timer_heap(loop));
  // 如果為空, 那么返回-1,表示為阻塞狀態(tài)
  if (heap_node == NULL)
    return -1; /* block indefinitely */

  // 如果計時器的時間小于當前l(fā)oop的開始時間, 那么返回0
  // 繼續(xù)執(zhí)行后續(xù)階段, 并且開啟下一次tick
  handle = container_of(heap_node, uv_timer_t, heap_node);
  if (handle->timeout <= loop->time)
    return 0;

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

  return (int) diff;
}

和上面有什么關系呢？

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

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

JavaScript事件循環(huán)

JavaScript事件循環(huán)

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

1.1. 進程和線程

1.2. 瀏覽器和JavaScript

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

1.4. 宏任務和微任務

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

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

2.2. 阻塞IO和非阻塞IO

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

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

相關閱讀更多精彩內容

友情鏈接更多精彩內容

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

JavaScript事件循環(huán)

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

1.1. 進程和線程

1.2. 瀏覽器和JavaScript

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

1.4. 宏任務和微任務

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

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

2.2. 阻塞IO和非阻塞IO

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

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

相關閱讀更多精彩內容

友情鏈接更多精彩內容

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