JS專題之事件循環

時間 2019-12-05

標籤專題事件循環欄目 JavaScript 简体版

原文原文鏈接

準備知識

1. 進程（process）

進程是系統資源分配一個獨立單位，一個程序至少有一個進程。比方說：一個工廠表明一個 CPU, 一個車間就是一個進程，任一時刻，只能有一個進程在運行，其餘進程處於非運行狀態。javascript

2. 線程（Thread）

線程是CPU調度和分派的基本單位，一個線程只能屬於一個進程，一個進程能夠有多個線程且至少有一個。比方說一個車間的工人，能夠有多個工人一塊兒工做。java

生活中經常能看到，某某電腦 CPU 的 4 核 4 線程，其意思是指，這款 CPU 同一時間最多隻能運行 4 個線程，因此有些線程會處於工做狀態，有的線程會處於中斷，堵塞，睡眠狀態。web

常常看到有不少任務同時在進行，一邊工做，一邊聽歌，還一邊下載電影。那是由於這些線程在以閃電般的速度不斷的切換主要的幾個線程，因此，人的體驗上感受是不少不少任務在同時進行。promise

3. 棧(stack)

棧是一種數據結構，具備後進先出的特色，最開始進入棧結構的數據反而最後才能出來。瀏覽器

4. 隊列(queue)

隊列也是一種數據結構，數據只能從一邊進，一邊出，先進去的天然就先出來。 bash

5. 同步和異步(sync async)

同步和異步關注的消息通訊機制，同步在函數調用時，若是調用者沒有拿到響應結果，程序會繼續等待，知道拿到結果爲止。而異步會執行其後的代碼，等到有響應結果後，才處理響應。網絡

6. 阻塞和非阻塞(blocking & non-blocking)

阻塞和非阻塞關注的是程序等待調用結果時的狀態，阻塞的意思是，在調用結果返回響應前，線程會被掛起佔用，程序沒法繼續往下走，而非阻塞的線程則不會掛起，後面的代碼可以繼續往下執行。數據結構

比方說：我去超市買包薯片，老闆告訴我貨架上沒貨了，立刻去庫房拿，這過程當中，老闆要我站着等他，直到他拿到貨出來給我。這個過程就是阻塞。多線程

若是老闆告訴我，能夠先回去，他一會去庫房拿，拿到了以後打電話給我。這個過程，就是非阻塞的，我不用等待，還能夠幹其餘的事情。閉包

7. 執行棧(execution stack)

js 代碼在執行代碼時，JS 會給調用代碼生成一個執行上下文對象，並將其壓入執行上下文棧，首先進入棧底的是全局上下文，而後是函數的執行上下文（Execution Context），函數執行完以後，函數上下文從棧中彈出，直到退出瀏覽器，全局上下文才從棧底彈出。

用代碼舉個例子：

var globalName = "window";

var foo1 = function() {
    console.log("foo1");
}

var foo2 = function() {
    console.log("foo2");
    foo1();
}

foo2();
複製代碼

上面的圖片大體可以描述執行上下文棧的實現邏輯，有關執行上下文的知識，你們能夠翻看我以前的文章 - 《JavaScript 之執行上下文》

2、爲何 JS 是單線程模型？

JavaScript 的一個很是有趣的特性是事件循環模型，與許多其餘語言不一樣，它永不阻塞。處理 I/O 一般經過事件和回調來執行 -- MDN

瀏覽器主要任務是給用戶是視覺和交互上的體驗，若是頁面使用過程當中，偶爾出現阻塞、掛起、無響應的體驗必定是很是糟糕的。同時，若是採用多線程同步的模型，那麼如何保證同一時間修改了 DOM, 究竟是哪一個線程先生效呢。

瀏覽器執行環境的核心思想在於任務調度方式的特別：

哪一個任務的優先級高，先來就先運行，直到執行完了才執行下一個，而且同一時刻只能執行一個代碼片斷，即所謂的單線程模型。

比方說，銀行的櫃檯只開啓了一個櫃檯，每一個人想要辦理業務，就得先拿號排隊，叫到了你的號碼，你才能上去辦理業務。不能多我的同時在一個櫃檯辦理業務，否則就很容易出差錯。

3、事件循環

事件循環是 JS 處理各類事件的核心，因爲多個線程同時操做 DOM，形成不可控的問題，因此 JS 採用了單線程模型。另外，因爲全部的事件同步執行，執行完一個才能執行下一個，會形成頁面渲染的堵塞。JS 中存在異步事件，用戶能夠在點擊頁面的時候，請求網絡響應的同事，還能夠進行其餘的點擊操做，保證了頁面不會由於網絡請求，多種 IO 接口響應慢形成代碼執行的堵塞和掛起。

事件循環的順序是：

進入 script 標籤，建立全局上下文
執行全局上下文中的函數，將其壓入執行調用棧
某個函數執行完後，函數彈出執行棧，清空函數上下文中的變量對象和內存空間，判斷是否須要更新渲染，若是須要則更新渲染。
若是遇到異步事件，也會壓入執行調用棧，但瀏覽器識別到它是異步事件後，會將其彈出執行棧，而後將異步事件的回調函數放入事件隊列中。
執行直到函數調用棧清空只剩全局執行上下文，這時，JS 會檢查事件隊列中是否有事件，若是有，則將事件隊列中的一個事件出隊，而後壓入執行棧中執行。
當執行棧又清空只剩全局執行上下文時，又會重複第 5 步。這就是 JS 的事件循環。
當用戶關閉瀏覽器，全局執行上下文彈出執行棧，清空相應上下文中的變量對象和內存空間。

接下來咱們用代碼來解釋：

console.log("script start!");

function foo1() {
    console.log("foo1");
}

foo1();

setTimeout(function () {
    console.log("setTimeout!");
}, 1000);

function foo2() {
    console.log("foo2");
}

foo2();

console.log("script end!");

打印：
// script start!
// foo1
// foo2
// script end!

// setTimeout!
複製代碼

那咱們嘗試把 setTimeout 的延遲時間改成 0，想要當即執行，看會不會當即執行：

console.log("script start!");

function foo1() {
    console.log("foo1");
}

foo1();

setTimeout(function () {
    console.log("setTimeout!");
}, 0);

function foo2() {
    console.log("foo2");
}

foo2();

console.log("script end!");

打印：
// script start!
// foo1
// foo2
// script end!
// setTimeout!
複製代碼

能夠看出 setTimeout 屬於異步事件，老是會在主線程的任務執行完後纔開始執行。

順便說一下事件循環幾個原則：

一次只處理一個任務

一個任務從開始到完成，不會被其餘任務所中斷

這兩個原則保證了瀏覽器任務單元的完整性，事件調用的有序性。

4、宏任務和微任務

事件循環的實現原本應該由一個用於宏任務的隊列和一個用於微任務的隊列進行完成，這使得事件循環要根據任務類型來進行優先處理。

宏任務：
宏任務包括：

建立文檔對象、解析 HTML、執行主線程代碼（script）
執行各類事件：頁面加載、輸入、點擊
setTimout，setInterval 異步事件

宏任務表明一個個離散、獨立的工做單元，運行完任務後，瀏覽器能夠進行其餘的任務調度，如更新渲染或執行垃圾回收。宏任務須要屢次事件循環才能執行完。

微任務：
微任務包括：

Promise 回調函數
new MutaionObserver()

微任務是更小的任務，微任務須要儘量地、經過異步方式執行，微任務更新瀏覽器的狀態，但必須在瀏覽器執行其餘任務以前執行。微任務使得咱們避免沒必要要的 UI 重繪。微任務在一次事件循環中必須所有執行完。

宏任務和微任務的執行優先級原則是：

完成一個宏任務後，執行餘下的微任務

同一次事件循環中，宏任務永遠在微任務以前執行。

ok，知道了優先級原則後，咱們來看一段代碼：

console.log(1);

setTimeout(function() {
    console.log(2);
    new Promise(resolve => {
        console.log(3);
        resolve(4);
        console.log(5);
    }).then(data => {
        console.log(data);
    });
}, 0);

new Promise(resolve => {
    console.log(6);
    resolve(7);
    console.log(8);
}).then(data => {
    console.log(data);
});

setTimeout(function() {
    console.log(9);
}, 0);

console.log(10);

output:  
第一次循環：
// 1
// 6
// 8
// 10
// 7

第二次循環：
// 2
// 3
// 5
// 4


第三次循環
// 9
複製代碼

咱們一塊兒來分析以上代碼：

進入第一次事件循環，script 這個宏任務，輸出 1
第一個 setTimeout 函數自己是函數調用，屬於任務源，setTimeout 的回調函數，即第一個參數，纔是被分發的任務，任務被加入宏任務隊列，第二次循環時調用。
Promise 屬於微任務，可是 Promise 初始化中代碼會當即進行。因此會當即輸出 6 和 8；
Promise 初始化後的回調放入微任務隊列
第二個 setTimeout 也屬於宏任務源，回調函數的任務放入宏任務隊列，第三次事件循環時調用
繼續調用棧，輸出 10，沒毛病
第一次事件循環的宏任務執行完畢，執行餘下的全部微任務，因此輸出 7，
第二次事件循環，發現有宏任務，即第一個 setTimeout 的回調，輸出 2，調用 Promise 構建函數的調用棧，直接執行，因此輸出3 和 5
第一個 setTimeout 的 promise 回調放入微任務隊列。
第二次事件循環的宏任務調用執行完，執行剛纔前一步 Promise 建立的微任務，輸出 4，第二次循環執行完畢。
進入第 3 次事件循環，只有一個宏任務，即第二個 SetTimeout，因此輸出 9；