JavaScript 異步、棧、事件循環(huán)、任務(wù)隊(duì)列

X_AirDu 發(fā)布于2019-08-22 11:08 / 450人閱讀

摘要：引擎是單線程的，如上圖中，它負(fù)責(zé)維護(hù)任務(wù)隊(duì)列，并通過的機(jī)制，按順序把任務(wù)放入棧中執(zhí)行。接下來，我們會(huì)細(xì)說圖中的棧和任務(wù)隊(duì)列。直到微任務(wù)隊(duì)列為空，執(zhí)行下一步。上一輪循環(huán)中有少數(shù)的會(huì)被延遲到這一輪的這一階段執(zhí)行。

概覽

我們經(jīng)常會(huì)聽到引擎和runtime，它們的區(qū)別是什么呢？

引擎：解釋并編譯代碼，讓它變成能交給機(jī)器運(yùn)行的代碼（runnable commands）。

runtime：就是運(yùn)行環(huán)境，它提供一些對外接口供Js調(diào)用，以跟外界打交道，比如，瀏覽器環(huán)境、Node.js環(huán)境。不同的runtime，會(huì)提供不同的接口，比如，在 Node.js 環(huán)境中，我們可以通過 require 來引入模塊；而在瀏覽器中，我們有 window、 DOM。

Js引擎是單線程的，如上圖中，它負(fù)責(zé)維護(hù)任務(wù)隊(duì)列，并通過 Event Loop 的機(jī)制，按順序把任務(wù)放入棧中執(zhí)行。而圖中的異步處理模塊，就是 runtime 提供的，擁有和Js引擎互不干擾的線程。接下來，我們會(huì)細(xì)說圖中的：棧和任務(wù)隊(duì)列。

棧

現(xiàn)在，我們要運(yùn)行下面這段代碼：

function bar() {
    console.log(1);
}

function foo() {
    console.log(2);
    far();
}

setTimeout(() => {
    console.log(3)
});

foo();

它在棧中的入棧、出棧過程，如下圖：

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

Js 中，有兩類任務(wù)隊(duì)列：宏任務(wù)隊(duì)列（macro tasks）和微任務(wù)隊(duì)列（micro tasks）。宏任務(wù)隊(duì)列可以有多個(gè)，微任務(wù)隊(duì)列只有一個(gè)。那么什么任務(wù)，會(huì)分到哪個(gè)隊(duì)列呢？

宏任務(wù)：script（全局任務(wù)）, setTimeout, setInterval, setImmediate, I/O, UI rendering.

微任務(wù)：process.nextTick, Promise, Object.observer, MutationObserver.

瀏覽器的 Event Loop

瀏覽器的 Event Loop 遵循的是 HTML5 標(biāo)準(zhǔn)，而 NodeJs 的 Event Loop 遵循的是 libuv。 區(qū)別較大，分開講。

我們上面講到，當(dāng)stack空的時(shí)候，就會(huì)從任務(wù)隊(duì)列中，取任務(wù)來執(zhí)行。瀏覽器這邊，共分3步：

取一個(gè)宏任務(wù)來執(zhí)行。執(zhí)行完畢后，下一步。

取一個(gè)微任務(wù)來執(zhí)行，執(zhí)行完畢后，再取一個(gè)微任務(wù)來執(zhí)行。直到微任務(wù)隊(duì)列為空，執(zhí)行下一步。

更新UI渲染。

Event Loop 會(huì)無限循環(huán)執(zhí)行上面3步，這就是Event Loop的主要控制邏輯。其中，第3步（更新UI渲染）會(huì)根據(jù)瀏覽器的邏輯，決定要不要馬上執(zhí)行更新。畢竟更新UI成本大，所以，一般都會(huì)比較長的時(shí)間間隔，執(zhí)行一次更新。

從執(zhí)行步驟來看，我們發(fā)現(xiàn)微任務(wù)，受到了特殊待遇！我們代碼開始執(zhí)行都是從script（全局任務(wù)）開始，所以，一旦我們的全局任務(wù)（屬于宏任務(wù)）執(zhí)行完，就馬上執(zhí)行完整個(gè)微任務(wù)隊(duì)列?？磦€(gè)例子：

console.log("script start");

// 微任務(wù)
Promise.resolve().then(() => {
    console.log("p 1");
});

// 宏任務(wù)
setTimeout(() => {
    console.log("setTimeout");
}, 0);

var s = new Date();
while(new Date() - s < 50); // 阻塞50ms

// 微任務(wù)
Promise.resolve().then(() => {
    console.log("p 2");
});

console.log("script ent");


/*** output ***/

// one macro task
script start
script ent

// all micro tasks
p 1
p 2

// one macro task again
setTimeout

上面之所以加50ms的阻塞，是因?yàn)?setTimeout 的 delayTime 最少是 4ms. 為了避免認(rèn)為 setTimeout 是因?yàn)?ms的延遲而后面才被執(zhí)行的，我們加了50ms阻塞。

NodeJs 的 Event Loop

NodeJs 的運(yùn)行是這樣的：

初始化 Event Loop

執(zhí)行您的主代碼。這里同樣，遇到異步處理，就會(huì)分配給對應(yīng)的隊(duì)列。直到主代碼執(zhí)行完畢。

執(zhí)行主代碼中出現(xiàn)的所有微任務(wù)：先執(zhí)行完所有nextTick()，然后在執(zhí)行其它所有微任務(wù)。

開始 Event Loop

NodeJs 的 Event Loop 分6個(gè)階段執(zhí)行：

   ┌───────────────────────────┐
┌─>│           timers          │
│  └─────────────┬─────────────┘
│  ┌─────────────┴─────────────┐
│  │     pending callbacks     │
│  └─────────────┬─────────────┘
│  ┌─────────────┴─────────────┐
│  │       idle, prepare       │
│  └─────────────┬─────────────┘      ┌───────────────┐
│  ┌─────────────┴─────────────┐      │   incoming:   │
│  │           poll            │<─────┤  connections, │
│  └─────────────┬─────────────┘      │   data, etc.  │
│  ┌─────────────┴─────────────┐      └───────────────┘
│  │           check           │
│  └─────────────┬─────────────┘
│  ┌─────────────┴─────────────┐
└──┤      close callbacks      │
   └───────────────────────────┘

以上的6個(gè)階段，具體處理的任務(wù)如下：

timers: 這個(gè)階段執(zhí)行setTimeout()和setInterval()設(shè)定的回調(diào)。

pending callbacks: 上一輪循環(huán)中有少數(shù)的 I/O callback 會(huì)被延遲到這一輪的這一階段執(zhí)行。

idle, prepare: 僅內(nèi)部使用。

poll: 執(zhí)行 I/O callback，在適當(dāng)?shù)臈l件下會(huì)阻塞在這個(gè)階段

check: 執(zhí)行setImmediate()設(shè)定的回調(diào)。

close callbacks: 執(zhí)行比如socket.on("close", ...)的回調(diào)。

每個(gè)階段執(zhí)行完畢后，都會(huì)執(zhí)行所有微任務(wù)（先 nextTick，后其它），然后再進(jìn)入下一個(gè)階段。

Links

Event loops

NodeJs 的 Event Loop 官方文檔

并發(fā)模型與事件循環(huán)

Philip Roberts: Help, I’m stuck in an event-loop.

Promise的隊(duì)列與setTimeout的隊(duì)列有何關(guān)聯(lián)？

JavaScript：徹底理解同步、異步和事件循環(huán)(Event Loop)

從event loop規(guī)范探究javaScript異步及瀏覽器更新渲染時(shí)機(jī)

JavaScript 運(yùn)行機(jī)制詳解：再談Event Loop - 阮一峰的網(wǎng)絡(luò)日志

Tasks, microtasks, queues and schedules

WindowOrWorkerGlobalScope.setTimeout()

What is the difference between JavaScript Engine and JavaScript Runtime Environment

云服務(wù)器 GPU云服務(wù)器異步任務(wù)隊(duì)列 task任務(wù)棧 java 棧隊(duì)列 asynctask異步任務(wù)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/91862.html

發(fā)表評論

登陸后可評論

0條評論

X_AirDu

男|高級講師

我要關(guān)注我要私信

TA的文章

二級域名ssl證書如何申請?二級域名ssl證書申請流程

閱讀 2341·2021-11-23 10:09
項(xiàng)目工具:兩行代碼快速生成測試的數(shù)據(jù)的FakeDataMaker

閱讀 2904·2021-10-12 10:11
又漲了？程序員9月平均薪資，高薪還能持續(xù)多久？

閱讀 2608·2021-09-29 09:35
基于vue2 + muse-ui構(gòu)建的移動(dòng)端、PC端輕社區(qū)項(xiàng)目 F-Rent 友租

閱讀 1353·2019-08-30 15:53
CSS3主要內(nèi)容

閱讀 2276·2019-08-30 11:15
[譯]HTML&CSS Lesson1: 構(gòu)建第一張頁面

閱讀 2922·2019-08-29 13:01
CSS基礎(chǔ)篇-- :before && :after的用法，偽類和偽元素的區(qū)別

閱讀 2305·2019-08-28 18:15
畢業(yè)兩年，我是如何從技術(shù)「轉(zhuǎn)型」到管理的？

閱讀 3376·2019-08-26 12:13

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

JavaScript 異步、棧、事件循環(huán)、任務(wù)隊(duì)列

相關(guān)文章

***JavaScript運(yùn)行機(jī)制和事件循環(huán)***

總結(jié)：JavaScript異步、事件循環(huán)與消息隊(duì)列、微任務(wù)與宏任務(wù)

理解異步JavaScript

**大話javascript 4期：事件循環(huán)（2）**

***JavaScript事件循環(huán)***

Javascript系列之javascript機(jī)制

發(fā)表評論

0條評論

X_AirDu

男|高級講師

TA的文章

二級域名ssl證書如何申請?二級域名ssl證書申請流程

項(xiàng)目工具:兩行代碼快速生成測試的數(shù)據(jù)的FakeDataMaker

又漲了？程序員9月平均薪資，高薪還能持續(xù)多久？

基于vue2 + muse-ui構(gòu)建的移動(dòng)端、PC端輕社區(qū)項(xiàng)目 F-Rent 友租

CSS3主要內(nèi)容

[譯]HTML&CSS Lesson1: 構(gòu)建第一張頁面

CSS基礎(chǔ)篇-- :before && :after的用法，偽類和偽元素的區(qū)別

畢業(yè)兩年，我是如何從技術(shù)「轉(zhuǎn)型」到管理的？

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

JavaScript 異步、棧、事件循環(huán)、任務(wù)隊(duì)列

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

JavaScript 異步、棧、事件循環(huán)、任務(wù)隊(duì)列