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

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

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

概覽

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

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

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

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

棧

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

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

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

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

foo();

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

任務(wù)隊列

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

宏任務(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空的時候，就會從任務(wù)隊列中，取任務(wù)來執(zhí)行。瀏覽器這邊，共分3步：

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

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

更新UI渲染。

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

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

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的阻塞，是因為 setTimeout 的 delayTime 最少是 4ms. 為了避免認為 setTimeout 是因為4ms的延遲而后面才被執(zhí)行的，我們加了50ms阻塞。

NodeJs 的 Event Loop

NodeJs 的運行是這樣的：

初始化 Event Loop

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

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

開始 Event Loop

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

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

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

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

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

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

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

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

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

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

Links

Event loops

NodeJs 的 Event Loop 官方文檔

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

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

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

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

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

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

Tasks, microtasks, queues and schedules

WindowOrWorkerGlobalScope.setTimeout()

What is the difference between JavaScript Engine and JavaScript Runtime Environment

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

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

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

發(fā)表評論

登陸后可評論

0條評論

X_AirDu

男|高級講師

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

TA的文章

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

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

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

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

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

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

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

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

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

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章

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

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

理解異步JavaScript

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

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

Javascript系列之javascript機制

發(fā)表評論

0條評論

X_AirDu

男|高級講師

TA的文章

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

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

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

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

CSS3主要內(nèi)容

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

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

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

最新活動

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

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

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