Event Loop - JS執(zhí)行機(jī)制

muddyway 發(fā)布于2019-08-22 17:32 / 2877人閱讀

摘要：心塞塞根據(jù)規(guī)范，事件循環(huán)是通過任務(wù)隊(duì)列的機(jī)制來進(jìn)行協(xié)調(diào)的。等便是任務(wù)源，而進(jìn)入任務(wù)隊(duì)列的是他們指定的具體執(zhí)行任務(wù)回調(diào)函數(shù)。然后當(dāng)前本輪的結(jié)束，主線程可以繼續(xù)取下一個執(zhí)行。

依然是：經(jīng)濟(jì)基礎(chǔ)決定上層建筑。

說明

首先，旨在搞清常用的同步異步執(zhí)行機(jī)制

其次，暫時(shí)不討論node.js的Event Loop執(zhí)行機(jī)制，以下關(guān)于瀏覽器的Event Loop執(zhí)行機(jī)制

最后，借鑒了很多前輩的研究文章，非常感謝，此文主要是梳理所學(xué)，還請保持質(zhì)疑以追求正確的知識

要點(diǎn)

基本概念

同步異步操作

Event Loop

基本概念

先解釋現(xiàn)代js引擎幾個概念。

stack（棧）：這里放著js正在執(zhí)行的任務(wù)。理解事件循環(huán)一(淺析)一文有對 stack 的 example 解釋。

heap（堆）：一個用來表示內(nèi)存中一大片非結(jié)構(gòu)化區(qū)域的名字，對象都被分配在這。

queue（隊(duì)列）：一個 js runtime 包含了一個任務(wù)隊(duì)列，該隊(duì)列是由一系列待處理的任務(wù)組成。而每個任務(wù)都有相對應(yīng)的函數(shù)。當(dāng)棧為空時(shí)，就會從任務(wù)隊(duì)列中取出一個任務(wù)，并處理之。當(dāng)該任務(wù)處理完畢后，棧就會再次為空。（queue的特點(diǎn)是先進(jìn)先出(FIFO)）。

為了方便描述與理解，作出以下約定：

stack 棧為主線程

queue 隊(duì)列為任務(wù)隊(duì)列（等待調(diào)度到主線程執(zhí)行）

同步異步

js 是一門單線程語言。 js 引擎有一個主線程（main thread）用來解釋和執(zhí)行 js 程序，實(shí)際上還存在其他的線程。例如：處理AJAX請求的線程、處理DOM事件的線程、定時(shí)器線程、讀寫文件的線程(例如在node.js中)等等。這些線程可能存在于 js 引擎之內(nèi)，也可能存在于 js 引擎之外，在此我們不做區(qū)分。不妨叫它們工作線程。但是前輩們頗有一種小本本記好的說法，那就是，要相信 js 單線程的本質(zhì)，其他一切看似多線程，都是紙老虎。哈哈哈哈哈哈哈哈哈哈哈哈哈......

任務(wù)分為同步任務(wù)（synchronous）和異步任務(wù)（asynchronous），如果所有任務(wù)都由主線程來處理，會出現(xiàn)主線程被阻塞而使得頁面“假死”。為了主線程不被阻塞，異步任務(wù)（如：AJAX異步請求，定時(shí)器等）就會交給工作線程來處理，異步任務(wù)完成后將異步回調(diào)函數(shù)注冊進(jìn)任務(wù)隊(duì)列，等待主線程空閑時(shí)調(diào)用。流程如圖：

// example
console.log("example-start")

setTimeout(() => {
  console.log("setTimeout-0")
}, 0)

console.log("example-end")

/* chrome result
 * 
    example-start
    example-end
    setTimeout-0
 *
 */

上面一個簡單的小 js 片段的執(zhí)行過程：

主線程開始同步任務(wù)執(zhí)行，執(zhí)行console.log("example-start")

然后接下來，主線程遇見一個異步操作setTimeout，將改異步任務(wù)交給工作線程處理，異步任務(wù)完成之后，將回調(diào)函數(shù)注冊進(jìn)任務(wù)隊(duì)列，等待被調(diào)用

繼續(xù)同步任務(wù)處理，執(zhí)行console.log("example-end")

主線程空閑，調(diào)用任務(wù)隊(duì)列中等待執(zhí)行的回調(diào)函數(shù)，執(zhí)行console.log("setTimeout-0")

最后借用Philip Roberts的生動形象的一張圖，callback queue可以簡單理解為任務(wù)隊(duì)列，詳細(xì)的下面會講。

Event Loop

然而Event Loop并沒有上面圖中描述那么簡單。心塞塞 : (

根據(jù)規(guī)范，事件循環(huán)是通過任務(wù)隊(duì)列的機(jī)制來進(jìn)行協(xié)調(diào)的。一個 Event Loop 中，可以有一個或者多個任務(wù)隊(duì)列（task queue），一個任務(wù)隊(duì)列便是一系列有序任務(wù)（task）的集合；每個任務(wù)都有一個任務(wù)源（task source），源自同一個任務(wù)源的 task 必須放到同一個任務(wù)隊(duì)列，從不同源來的則被添加到不同隊(duì)列。

setTimeout/Promise 等API便是任務(wù)源，而進(jìn)入任務(wù)隊(duì)列的是他們指定的具體執(zhí)行任務(wù)（回調(diào)函數(shù)）。來自不同任務(wù)源的任務(wù)會進(jìn)入到不同的任務(wù)隊(duì)列。其中setTimeout與setInterval是同源的。

仔細(xì)查閱規(guī)范可知，異步任務(wù)可分為 task（部分文章也稱為 macro-task）和 micro-task 兩類，不同的API注冊的異步任務(wù)會依次進(jìn)入自身對應(yīng)的隊(duì)列中，然后等待 Event Loop 將它們依次壓入執(zhí)行棧中執(zhí)行。

task主要包含：script（整體代碼）、setTimeout、setInterval、I/O、UI交互事件、postMessage、MessageChannel、setImmediate（node.js 環(huán)境）

micro-task主要包含：Promise.then、MutaionObserver、MessageChannel、process.nextTick（node.js 環(huán)境）

在事件循環(huán)中，每進(jìn)行一次循環(huán)操作稱為 tick，每一次 tick 的任務(wù)處理模型是比較復(fù)雜的，但關(guān)鍵步驟如下：

在此次 tick 中選擇最先進(jìn)入隊(duì)列的任務(wù)（oldest task），如果有則執(zhí)行(一次)

檢查是否存在 micro-task，如果存在則不停地執(zhí)行，直至清空 micro-task queue

更新 render

主線程重復(fù)執(zhí)行上述步驟

一個事件循環(huán)（Event Loop）中，主線程從任務(wù)隊(duì)列中取出一個任務(wù) task 執(zhí)行時(shí)，而這個正在執(zhí)行的任務(wù)就是從 task queue（部分文章也稱為 macro-task queue）中來的。當(dāng)這個 task 執(zhí)行結(jié)束后，js 會將 micro-task queue中所有 micro-task 都在同一個 Event Loop 中執(zhí)行，當(dāng)這些 micro-task 執(zhí)行結(jié)束后還能繼續(xù)添加 micro-task 一直到整個 micro-task 隊(duì)列執(zhí)行結(jié)束。然后當(dāng)前本輪的 Event Loop 結(jié)束，主線程可以繼續(xù)取下一個 task 執(zhí)行。所以更詳細(xì)的 Event Loop 的流程圖如下：

// example
console.log("example-start")

setTimeout(() => {
  console.log("setTimeout-0") // setTimeout-1
}, 0)

new Promise((resolve, reject) => {
  console.log("promise-1")
  resolve("promise-2")
  Promise.resolve().then(() => console.log("promise-3")) // then-1
}).then((response) => { // then-2
  console.log(response)
  setTimeout(() => {
    console.log("setTimeout-10") // setTimeout-2
  }, 10)
})

console.log("example-end")

/* chrome result
 * 
    example-start
    promise-1
    example-end
    promise-3
    promise-2
    setTimeout-0
    setTimeout-10
 *
 */

上面一個簡單的 js 片段的執(zhí)行過程：

第一輪事件循環(huán)：

第二輪事件循環(huán)：

第三輪事件循環(huán)：

如果上文理解有誤或者有疑惑，歡迎交流。

參考

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

JavaScript 運(yùn)行機(jī)制詳解：再談Event Loop

關(guān)于JavaScript單線程的一些事

從一道題淺說 JavaScript 的事件循環(huán)

Event Loop的規(guī)范和實(shí)現(xiàn)

這一次，徹底弄懂 JavaScript 執(zhí)行機(jī)制

好記性不如爛筆頭。

GPU云服務(wù)器云服務(wù)器 Event Loop js執(zhí)行機(jī)制執(zhí)行機(jī)制 php執(zhí)行的機(jī)制原理

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/95264.html

發(fā)表評論

登陸后可評論

0條評論

muddyway

男|高級講師

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

TA的文章

一文講透自適應(yīng)熔斷的原理和實(shí)現(xiàn)

閱讀 2482·2021-11-18 10:07
虛擬主機(jī)業(yè)務(wù)是什么意思-虛擬主機(jī)管理系統(tǒng)，是干嘛的？

閱讀 2414·2021-09-22 15:59
SpartanHost：西雅圖高防KVM八折月付4美元起,1G內(nèi)存,15GB NVMe硬盤,2TB/

閱讀 3171·2021-08-23 09:42
前端每日實(shí)戰(zhàn) 2018年10月至2019年6月項(xiàng)目匯總（共 20 個項(xiàng)目）

閱讀 2381·2019-08-30 15:44
你不可錯過的前端面試題(二)

閱讀 1266·2019-08-29 15:06
zoom和transform:scale()的區(qū)別

閱讀 2454·2019-08-29 13:27
前端文檔收集

閱讀 1363·2019-08-29 13:21
前端程序員需要掌握的幾個專業(yè)“詞語”

閱讀 1530·2019-08-29 13:13

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

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

Event Loop - JS執(zhí)行機(jī)制

相關(guān)文章

10分鐘理解JS引擎的執(zhí)行機(jī)制

**JavaScript執(zhí)行機(jī)制、事件循環(huán)**

Javascript 運(yùn)行機(jī)制詳解，Event Loop

深入理解js引擎的執(zhí)行機(jī)制

理解JS中的Event Loop機(jī)制

發(fā)表評論

0條評論

muddyway

男|高級講師

TA的文章

一文講透自適應(yīng)熔斷的原理和實(shí)現(xiàn)

虛擬主機(jī)業(yè)務(wù)是什么意思-虛擬主機(jī)管理系統(tǒng)，是干嘛的？

SpartanHost：西雅圖高防KVM八折月付4美元起,1G內(nèi)存,15GB NVMe硬盤,2TB/

前端每日實(shí)戰(zhàn) 2018年10月至2019年6月項(xiàng)目匯總（共 20 個項(xiàng)目）

你不可錯過的前端面試題(二)

zoom和transform:scale()的區(qū)別

前端文檔收集

前端程序員需要掌握的幾個專業(yè)“詞語”

最新活動

資訊專欄INFORMATION COLUMN

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

Event Loop - JS執(zhí)行機(jī)制

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

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