瀏覽器事件循環機制

時間 2019-11-18

原文原文鏈接

靈魂三問

JavaScript 爲何是單線程的？JavaScript 爲何須要異步？JavaScript 單線程又是如何實現異步的？git

1.JavaScript 爲何是單線程的?github

如今有 2 個線程 process1 process2，假設 JavaScript 是多線程的，因此他們能夠對同一個 dom 同時進行操做。process1 刪除了該 dom，而 process2 編輯了該 dom，同時下達 2 個矛盾的命令，瀏覽器究竟該如何執行呢？這樣想，JavaScript 爲何被設計成單線程應該就容易理解了吧。promise

2.JavaScript 爲何須要異步?瀏覽器

若是 JavaScript 中不存在異步，只能自上而下執行，若是上一行解析時間很長，那麼下面的代碼就會被阻塞。對於用戶而言，阻塞就意味着"卡死"，這樣就致使了不好的用戶體驗，因此 JavaScript 中存在異步執行。網絡

3.JavaScript 單線程又是如何實現異步的呢?多線程

是經過事件循環來實現的dom

爲了利用多核 CPU 的計算能力，HTML5 提出 Web Worker 標準，容許 JavaScript 腳本建立多個線程，可是子線程徹底受主線程控制，且不得操做 DOM。因此，這個新標準並無改變 JavaScript 單線程的本質。異步

爲何說 JavaScript 是「非阻塞」的語言？非阻塞即：「程序不會由於某個任務而停下來」

console.log("程序時間：" + new Date().getTime())

setTimeout(function () {
     console.log("暫停一秒：" + new Date().getTime())
}, 1000)

console.log('這是暫停一秒以後的時間：' + new Date().getTime())

簡單來，若是上圖的 setTimeout 換成 C++ 的 sleep(1000) 之類的，那麼 C++ 是會確實地「睡眠」那麼段時間的，而 JS 不會。若是我就是想實現這個功能呢？能夠利用 Promise 實現：

async function test () {
  console.log('start')
  await sleep(3000)
  console.log('3s has passed')
}

function sleep (ms) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve()
    }, ms)
  })
}

任務隊列

當遇到一個異步事件後，JavaScript 引擎並不會一直等待異步事件返回結果，而是會將這個事件掛在與執行棧不一樣的隊列中，咱們稱之爲任務隊列。
這些任務又被細分爲宏任務和微任務

宏任務（macrotask）：script（全局任務），setTimeout ，setInterval ，setImmediate （node.js 獨有），I/O（磁盤讀寫或網絡通訊），UI rendering（UI交互事件）
微任務（microtask）：process.nextTick （node.js 獨有）, Promise.then, Object.observer（已廢棄）, MutationObserver

事件循環（event loop）

這裏首先要明確一點：瀏覽器是一個進程，其有多個線程（具體見 Broswer 章節）
通常狀況下, 瀏覽器有以下五個線程:

GUI 渲染線程
JavaScript 引擎線程
瀏覽器事件觸發線程
定時器觸發線程
異步 HTTP 請求線程

GUI 渲染線程和 JavaScript 引擎線程是互斥的，其餘線程相互之間都是能夠並行執行的。
瀏覽器中，JavaScript 引擎循環地從任務隊列中讀取任務並執行，這種運行機制就叫作事件循環。

更準確地說，事件循環是按下面幾個步驟執行的：

執行同步代碼，這屬於宏任務（初始時的同步代碼就是 script 總體代碼）
執行棧爲空，查詢是否有微任務 (microtask) 須要執行
執行全部微任務
必要的話渲染 UI
而後開始下一輪 Event loop，執行宏任務中的異步代碼

例題

setTimeout(function () {
  console.log(1)
}, 0)

Promise.resolve(function () {
  console.log(2)
})

new Promise(function (resolve) {
  console.log(3)
})

console.log(4)

// 上述代碼的輸出結果是什麼？？？

正確答案是-------------------> 3 4 1
解釋以下：

// 遇到 setTimeout 將 setTimeout 回調放入宏任務隊列中
setTimeout(function () {
  console.log(1)
}, 0)

// 遇到了 promise，可是並無 then 方法回調 
// 因此這句代碼會在執行過程當中進入咱們當前的執行上下文 緊接着就出棧了
Promise.resolve(function () {
  console.log(2)
})

// 遇到了一個 new Promise，Promise 有一個原則就是在初始化 Promise 的時候Promise 內部的構造器函數會當即執行，
// 所以在這裏會當即輸出一個 3，因此這個 3 是第一個輸出的
new Promise(function (resolve) {
  console.log(3)
})
// 而後第二個輸出 4  當代碼執行完畢後回去微任務隊列查找有沒有任務，
// 發現微任務隊列是空的，那麼就去宏仁務隊列中查找，發現有一個咱們剛剛放進去的setTimeout 回調函數，
// 那麼就取出這個任務進行執行，因此緊接着輸出1
console.log(4)

太簡單了？來看看這題：

console.log('begin'); // 1.begin
setTimeout(() => {
    console.log('setTimeout 1'); // 3.setTimeout 1
    Promise.resolve() // Promise.resolve().then ：直接把 then 回調放入微任務隊列
        .then(() => {
            console.log('promise 1'); // 5.promise 1
            setTimeout(() => {
                console.log('setTimeout2'); // 8. setTimeout2
            });
        })
        .then(() => {
            console.log('promise 2'); // 7. promise 2  注意7比8要快，then 方法返回一個新的 Promise 對象
        });
    new Promise(resolve => {
        console.log('a'); // 4. a
        resolve();
    }).then(() => {
        console.log('b'); // 6. b
    });
}, 0);
console.log('end'); // 2.end