圖解JS執行機制

時間 2019-11-07

標籤圖解執行機制欄目 JavaScript 简体版

原文原文鏈接

大體流程

咱們能夠看出：

js代碼分爲同步任務和異步任務。
同步任務會進入主線程，異步任務會進入Event Table（事件表），當事件表中的異步任務完成後會在Event Queue（事件隊列）中註冊回調函數。
主線程任務所有完成後，纔會完成Event Queue中的任務。
js解析器會不斷地重複檢查主線程執行棧是否爲空，而後重複第3步，這就是Event Loop（事件循環）。

js代碼的類型分爲：ajax

注意promise

任務又能夠進一步分爲宏任務和微任務，這對js代碼的執行有更爲細緻的影響，在文章下面會有講解。
異步任務中的宏任務和微任務會進入不一樣的Event Queue事件隊列，即Event Queue又能夠分爲宏任務隊列和微任務隊列。
setInterval會按照設定的時間間隔重複地在Event Queue註冊回調函數，若是某一段時間主線程代碼執行過久，那麼setInterval的回調函數可能阻塞到一塊兒執行，沒法保持設定的時間間隔，若是此時setInterval用於動畫，則體現爲卡頓。

詳細流程

在事件循環（主線程 → 事件隊列）中其實有更細緻的操做流程，即（宏任務 → 微任務）之間的循環，以下圖所示：bash

因此一般來講，咱們頁面中的js執行順序是這樣的：

第一輪事件循環：

主線程執行js整段代碼（宏任務），將ajax、setTimeout、promise等回調函數註冊到Event Queue，並區分宏任務和微任務。
主線程提取並執行Event Queue 中的ajax、promise等全部微任務，並註冊微任務中的異步任務到Event Queue。

第二輪事件循環：

主線程提取Event Queue 中的第一個宏任務（一般是setTimeout）。
主線程執行setTimeout宏任務，並註冊setTimeout代碼中的異步任務到Event Queue（若是有）。
執行Event Queue中的全部微任務，並註冊微任務中的異步任務到Event Queue（若是有）。

相似的循環：宏任務每執行完一個，就清空一次事件隊列中的微任務。

注意：事件隊列中分「宏任務隊列」和「微任務隊列」，每執行一次任務均可能註冊新的宏任務或微任務到相應的任務隊列中，只要遵循「每執行一個宏任務，就會清空一次事件隊列中的全部微任務」這一循環規則，就不會弄亂。異步

實例

實例1

console.log('1');
// 1 6 7 2 4 5 9 10 11 8 3
// 記做 set1
setTimeout(function () {
    console.log('2');
    // set4
    setTimeout(function() {
        console.log('3');
    });
    // pro2
    new Promise(function (resolve) {
        console.log('4');
        resolve();
    }).then(function () {
        console.log('5')
    })
})

// 記做 pro1
new Promise(function (resolve) {
    console.log('6');
    resolve();
}).then(function () {
    console.log('7');
    // set3
    setTimeout(function() {
        console.log('8');
    });
})

// 記做 set2
setTimeout(function () {
    console.log('9');
    // 記做 pro3
    new Promise(function (resolve) {
        console.log('10');
        resolve();
    }).then(function () {
        console.log('11');
    })
})
複製代碼