瀏覽器與NodeJS的EventLoop異同以及部分機制-js教程-PHP中文網

瀏覽器與NodeJS的EventLoop異同，以及部分機制

首頁

web前端

js教程

瀏覽器與NodeJS的EventLoop異同以及部分機制

不言

Jul 07, 2018 pm 05:23 PM

html5 javascript node.js

這篇文章主要介紹了關於瀏覽器與NodeJS的EventLoop異同以及部分機制，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

瀏覽器與NodeJS的EventLoop異同，以及部分機制

javascript 是一門單線程的腳本語言，雖然是單線程但是有很多異步的API來幫助開發者解決線程的阻塞問題。例如：onClick 註冊的回呼函數、必不可少的ajax等等...但是 javascript 運行環境是如何做到單線程卻又不是一直阻塞線程等待各種非同步操作完成才繼續執行操作的呢？
答案是：event loop

1.event loop 的规范是在HTML5中规定的。
2.event loop 是 javascript 运行环境(手动加粗) 的机制。
3.浏览器实现的event loop 与 NodeJS 实现的event loop 是有异同的。

登入後複製

HTML5 定義event loop 規範連結 https://www.w3.org/TR/html5/w...

#一瀏覽器的event loop

1.簡單了解

event loop 即事件循環，它到底是什麼結構呢？阮一峰老師的部落格有一張圖，雖然很直白、明了但是少了一些東西不能全面的將 event loop 整體循環機制展示出來。先來看圖：
瀏覽器與NodeJS的EventLoop異同以及部分機制

圖片非筆者原創，來自阮一峰博客，在此說明，侵刪。

從圖中我們可以得到資訊是：

1.javascript 引擎執行javascript 是單執行緒的，因為只有一個stack 裡面有各種正在執行、等待執行的事件。
2.有一些 webAPI 將執行時產生的 callback 放入一個隊列，即 “事件隊列”。
3.在event loop 迴圈中不停的將「事件佇列」裡等待執行的事件，並推入 javascript 執行堆疊。

這就是事件循環簡化的機制，為什麼要說簡化呢？因為在循環中還做了很多沒有提及的操作、規則。

我就不舉栗子了，但是我要打個比方。

瀏覽器與NodeJS的EventLoop異同以及部分機制

就說一個老生常談的問題(文章編輯不便，直接一行了，換行黨你倒是來打我啊！)

setTimeout(e=>{ console.log(1) },0);

new Promise((res,rej)=>{ res() }).then(e=>{ console.log(2) });

登入後複製

同樣都是javascript 中提供的非同步API，同樣都是直接執行( 開發者所希望的，雖然會因為阻塞導致延時，防止槓精)，但是不論這倆行程式碼誰上、誰下，輸出都會是2 1。因為這裡涉及 event loop 中 macro task 與 micro task 的執行順序、規則。

2.整體流程
回到剛才說那張流程圖不夠完善的問題上，現在來一張完整的、全面的 event loop 流程圖。
瀏覽器與NodeJS的EventLoop異同以及部分機制

圖片非筆者原創，來secrets of javascript ninja，在此說明，侵刪。

這是一個event loop 完整的流程圖，從圖中我們看到了許多剛才未提及的名詞，從頭到尾的梳理一遍(從上至下)：

1.讀取Macrotask queue 中任務。有兩種情況

任務佇列空，向下執行
任務佇列不為空，將最先進入的一個（手動文章加粗）任務推入javascript 執行棧，向下執行

#2.讀取Microtask queue 中任務。有兩種情況

任務佇列空，向下執行
任務佇列不為空，將最先進入的一個任務推入javascript 執行堆疊，並且再次重複此操作（手動文章加粗），直到Microtask queue 為空。直白的說：將此任務隊列按照先後順序將所有任務推入javascript 執行棧，向下執行

3.根據本次循環耗時（手動文章加粗）判斷是否需要、是否可以更新UI 【後面會提一下這個循環時間問題】

不需要，重複第一步
需要，向下執行

#4.更新UI，UI rendering，同時阻塞javascript 執行。並且繼續重複第一步。

以上便是一整個event loop 流程，從流程中我們可以看到有兩個“任務隊列”，這兩個隊列實例化到javascript 中的API 便是

Macrotask queue --> setTimeout || setInterval || javascript代码

Microtask queue --> Promise.then()

登入後複製

至此一個完整的event loop 流程便完全說完了。

3.实例解析
什么鬼？这么复杂？弄懂？不存在的
瀏覽器與NodeJS的EventLoop異同以及部分機制

现在回到刚才提到的 “老生常谈的问题” 从实例的角度来说明一下问题。我们假设这个 javascript 文件叫做 "main.js"
"main.js"中的代码（+ 为自定义标记）

+1 console.log(1);

+2 setTimeout(e=>{ console.log(2); },0)

+3 setTimeout(e=>{ console.log(3); },0)

+4 new Promise((resolve,reject)=>{ console.log(4); resolve();})
.then(e=>{ console.log(5); })

+5 setTimeout(e=>{ console.log(6);

  +6 new Promise((resolve,reject)=>{ console.log(7); resolve(); })
     .then(e=>{ console.log(8);})
})

登入後複製

那么这个执行顺序是怎样呢？从头带尾梳理一遍（词穷，全文只要是流程统一是“从头到尾梳理一遍”）

macrotask: javascript 代码，所有同步代码执行。输出：1 4。注册 +4 到 microtask。注册+2 +3 +5 到 macrotask。
microtask: 执行 +4 输出：5。

macrotask: 执行 +2。输出 2。
microtask: 无

macrotask: 执行 +3。输出 3。
microtask: 无

macrotask: 执行 +5。输出 6 7。注册 +6 到 microtask。
microtask: 输出 8。

所以总体输出的顺序为：1 4 5 2 3 6 7 8

如果这个输出与你所想相同，那么基本就没有问题了。
那么如果不对或者有问题怎么办？
瀏覽器與NodeJS的EventLoop異同以及部分機制

PS：前面提到【本次循环耗时】这个问题，这里我也不是非常清楚，望大牛指点。浏览器一般渲染页面60/S，以达到每秒60帧（60 fps），所以大概16ms一次，既然有了时间我们不经就会问？前面的任务处理耽误了则么办？因为javascript线程与UI线程互斥，某些任务导致 javascript引擎坑了队友，自然而然没法在16ms的节点上到达这一步，从secrets of javascript ninja中了解到，一般会摒弃这次渲染，等待下一次循环。（如有问题请指正！）

浏览器中的 event loop 到此结束，下面说说 NodeJS 的 event loop

二 NodeJS的event loop

NodeJS 的 event loop 也是有 Macrotask queue 与 Microtask queue 的。只不过 NodeJS 的略有不同。那么主要说说不同在哪里。

NodeJS中 Macrotask queue 与 Microtask queue 实例化到API为：

Macrotask queue --> script(主程序代码)，setImmediate, I/O，setTimeout, setInterval

Microtask queue --> process.nextTick, Promise

登入後複製

1.Macrotask queue 不同之处

上面说到了浏览器 event loop 的 Macrotask queue 在每次循环中只会读取一个任务,NodeJS 中 Macrotask queue 会一次性读取完毕（ 同阶段的执行完毕，后面会说到Macrotask queue 分为 6个阶段 ），然后向下读取Microtask。

注意： 这一条与 NodeJS版本有很大关系，在看 深入浅出NodeJS 这一本书时（ 看的版本很旧，不知是否有修订版，如有请告知。 ），提到的 setImmediate 每次循环只会执行一次，并且给出的示例在 v8.9.1 版本跑时已不符合书中所写。书中示例如下（+ 为自定义标记，原文中没有）：

登入後複製

+1 process.nextTick(function () {
       console.log('nextTick执行1');
   });

+2 process.nextTick(function () {
       console.log('nextTick执行2');
   });

+3 setImmediate(function () {
       console.log('setImmediateჽ执行1');

    +4 process.nextTick(function () {
           console.log('强势插入');
       });
   });

+5 setImmediate(function () {
       console.log('setImmediateჽ执行2');
   });

+6 console.log('正常执行');

正常执行
nextTick执行1
nextTick执行2
setImmediate执行1
强势插入
setImmediateჽ执行2

登入後複製

在 v8.9.1 中截图如下
瀏覽器與NodeJS的EventLoop異同以及部分機制

从图片中可以看到，至少在 v8.9.1 版本中 Macrotask queue 会直接全部执行。按照惯例从头到尾的梳理一遍：

macrotask: javascript 代码，所有同步代码执行。输出：正常执行。注册 +3 +5 到 Macrotask。执行process.nextTick()，最终输出：正常执行， nextTick执行1， nextTick执行2。
**microtask: 无

macrotask: 执行 +3 +5。输出：setImmediate执行1， setImmediateჽ执行2。 执行process.nextTick()，最终输出：setImmediate执行1， setImmediateჽ执行2，强势插入。
microtask: 无

所以最终输出为：正常执行， nextTick执行1， nextTick执行2，setImmediate执行1， setImmediateჽ执行2，强势插入。

2.process.nextTick(),setImmediates，以及event loop的6个阶段

NodeJS 中 Macrotask queue会分为 6 个阶段，每个阶段的作用如下（process.nextTick()在6个阶段结束的时候都会执行）：

timers：执行setTimeout() 和 setInterval()中到期的callback。

I/O callbacks：上一轮循环中有少数的I/Ocallback会被延迟到这一轮的这一阶段执行

idle, prepare：仅内部使用

poll：最为重要的阶段，执行I/O callback，在适当的条件下会阻塞在这个阶段

check：执行setImmediate的callback

close callbacks：执行close事件的callback，例如socket.on("close",func)

登入後複製

注：此6个阶段非笔者原创来自 https://cnodejs.org/topic/5a9...，文章从底层C代码分析NodeJS event loop。这里做只做简单整合。侵删。

在了解了这六个阶段后，我们可以发现定时器系列在NodeJS event loop中 Macrotask queue 读取顺序为：

1. setTimeout(fun,0) setInterval(fun,0) 
2. setImmediate

登入後複製

空口无凭，在实例中了解。的代码奉上（代码较长，分为三段，方便阅读，避免滚动。）：

+1 process.nextTick(function(){
    console.log("1");
});
+2 process.nextTick(function(){
    console.log("2");
    +3 setImmediate(function(){
        console.log("3");
    });
    +4 process.nextTick(function(){
        console.log("4");
    });
});

+5 setImmediate(function(){
    console.log("5");
    +6 process.nextTick(function(){
        console.log("6");
    });
    +7 setImmediate(function(){
        console.log("7");
    });
});

登入後複製

+8 setTimeout(e=>{
    console.log(8);
    +9 new Promise((resolve,reject)=>{
        console.log(8+"promise");
        resolve();
    }).then(e=>{
        console.log(8+"promise+then");
    })
},0)

+10 setTimeout(e=>{ console.log(9); },0)

+11 setImmediate(function(){
    console.log("10");
    +12 process.nextTick(function(){
        console.log("11");
    });
    +13 process.nextTick(function(){
        console.log("12");
    });
    +14 setImmediate(function(){
        console.log("13");
    });
});

登入後複製

console.log("14");

+15 new Promise((resolve,reject)=>{
    console.log(15);
    resolve();
}).then(e=>{
    console.log(16);
})

登入後複製

这么复杂的异步嵌套在一起是不是很头疼呢？
我！不！看！了！

瀏覽器與NodeJS的EventLoop異同以及部分機制

最後一遍梳理，最多、最全的一次梳理。自古以來從頭到尾的梳理一遍

macrotask: javascript 程式碼，所有同步程式碼執行。輸出：14。執行process.nextTick()，最終輸出：14，15， 1， 2， 4。 註冊 3 5 8 11 到 Macrotask。註冊 15 到 Microtask。
microtask: 執行 15 輸出 16