前端中的事件循環eventloop機制

jsyzchen 發布于2019-08-26 13:46 / 463人閱讀

摘要：宏任務主要有整體代碼交互事件環境。按照中的定義告訴瀏覽器你希望執行一個動畫，并且要求瀏覽器在下次重繪之前調用指定的回調函數更新動畫。總結我們要記住最重要的兩點是單線程和的循環機制。

我們知道 js 是單線程執行的，那么異步的代碼 js 是怎么處理的呢？例如下面的代碼是如何進行輸出的：

console.log(1);
setTimeout(function() {
    console.log(2);
}, 0);
new Promise(function(resolve) {
    console.log(3);
    resolve(Date.now());
}).then(function() {
    console.log(4);
});
console.log(5);
setTimeout(function() {
    new Promise(function(resolve) {
        console.log(6);
        resolve(Date.now());
    }).then(function() {
        console.log(7);
    });
}, 0);

在不運行的情況可以先猜測下最終的輸出，然后展開我們要說的內容。

1. 宏任務與微任務

依據我們多年編寫 ajax 的經驗：js 應該是按照語句先后順序執行，在出現異步時，則發起異步請求后，接著往下執行，待異步結果返回后再接著執行。但他內部是怎樣管理這些執行任務的呢？

在 js 中，任務分為宏任務(macrotask)和微任務(microtask)，這兩個任務分別維護一個隊列，均采用先進先出的策略進行執行！同步執行的任務都在宏任務上執行。

宏任務主要有：script(整體代碼)、setTimeout、setInterval、I/O、UI 交互事件、postMessage、MessageChannel、setImmediate(Node.js 環境)。

微任務主要有：Promise.then、 MutationObserver、 process.nextTick(Node.js 環境)。

具體的操作步驟如下：

從宏任務的頭部取出一個任務執行；

執行過程中若遇到微任務則將其添加到微任務的隊列中；

宏任務執行完畢后，微任務的隊列中是否存在任務，若存在，則挨個兒出去執行，直到執行完畢；

GUI 渲染；

回到步驟 1，直到宏任務執行完畢；

這 4 步構成了一個事件的循環檢測機制，即我們所稱的eventloop。

回到我們上面說的代碼：

console.log(1);
setTimeout(function() {
    console.log(2);
}, 0);
new Promise(function(resolve) {
    console.log(3);
    resolve(Date.now());
}).then(function() {
    console.log(4);
});
console.log(5);
setTimeout(function() {
    new Promise(function(resolve) {
        console.log(6);
        resolve(Date.now());
    }).then(function() {
        console.log(7);
    });
}, 0);

執行步驟如下：

執行 log(1)，輸出 1；

遇到 setTimeout，將回調的代碼 log(2)添加到宏任務中等待執行；

執行 console.log(3)，將 then 中的 log(4)添加到微任務中；

執行 log(5)，輸出 5；

遇到 setTimeout，將回調的代碼 log(6, 7)添加到宏任務中；

宏任務的一個任務執行完畢，查看微任務隊列中是否存在任務，存在一個微任務 log(4)（在步驟 3 中添加的），執行輸出 4；

取出下一個宏任務 log(2)執行，輸出 2；

宏任務的一個任務執行完畢，查看微任務隊列中是否存在任務，不存在；

取出下一個宏任務執行，執行 log(6)，將 then 中的 log(7)添加到微任務中；

宏任務執行完畢，存在一個微任務 log(7)（在步驟 9 中添加的），執行輸出 7；

因此，最終的輸出順序為：1, 3, 5, 4, 2, 6, 7;

我們在Promise.then實現一個稍微耗時的操作，這個步驟看起來會更加地明顯：

console.log(1);
var start = Date.now();
setTimeout(function() {
    console.log(2);
}, 0);
setTimeout(function() {
    console.log(4, Date.now() - start);
}, 400);
Promise.resolve().then(function() {
    var sum = function(a, b) {
        return Number(a) + Number(b);
    }
    var res = [];
    for(var i=0; i<5000000; i++) {
        var a = Math.floor(Math.random()*100);
        var b = Math.floor(Math.random()*200);
        res.push(sum(a, b));
    }
    res = res.sort();
    console.log(3);
})

Promise.then中，先生成一個500萬隨機數的數組，然后對這個數組進行排序。運行這段代碼可以發現：馬上會輸出1，稍等一會兒才會輸出3，然后再輸出2。不論等待多長時間輸出3，2一定會在3的后面輸出。這也就印證了eventloop中的第3步操作，必須等所有的微任務執行完畢后，才開始下一個宏任務。

同時，這段代碼的輸出很有意思：

setTimeout(function() {
    console.log(4, Date.now() - start); // 4, 1380 電腦狀態的不同，輸出的時間差也不一樣
}, 400);

本來要設定的是400ms后輸出，但因為之前的任務耗時嚴重，導致之后的任務只能延遲往后排。也能說明，setTimeout和setInterval這種操作的延時是不準確的，這兩個方法只能大概將任務400ms之后的宏任務中，但具體的執行時間，還是要看線程是否空閑。若前一個任務中有耗時的操作，或者有無限的微任務加入進來時，則會阻塞下一個任務的執行。

2. async-await

從上面的代碼中也能看到 Promise.then 中的代碼是屬于微服務，那么 async-await 的代碼怎么執行呢？比如下面的代碼：

function A() {
    return Promise.resolve(Date.now());
}
async function B() {
    console.log(Math.random());
    let now = await A();
    console.log(now);
}
console.log(1);
B();
console.log(2);

其實，async-await 只是 Promise+generator 的一種語法糖而已。上面的代碼我們改寫為這樣，可以更加清晰一點：

function B() {
    console.log(Math.random());
    A().then(function(now) {
        console.log(now);
    })
}
console.log(1);
B();
console.log(2);

這樣我們就能明白輸出的先后順序了： 1, 0.4793526730678652(隨機數), 2, 1557830834679(時間戳);

3. requestAnimationFrame

requestAnimationFrame也屬于執行是異步執行的方法，但我任務該方法既不屬于宏任務，也不屬于微任務。按照MDN中的定義：

window.requestAnimationFrame() 告訴瀏覽器——你希望執行一個動畫，并且要求瀏覽器在下次重繪之前調用指定的回調函數更新動畫。該方法需要傳入一個回調函數作為參數，該回調函數會在瀏覽器下一次重繪之前執行

requestAnimationFrame是GUI渲染之前執行，但在微服務之后，不過requestAnimationFrame不一定會在當前幀必須執行，由瀏覽器根據當前的策略自行決定在哪一幀執行。

4. 總結

我們要記住最重要的兩點：js是單線程和eventloop的循環機制。

更多文章，歡迎查看：https://www.xiabingbao.com/post/javascript/js-eventloop.html

我的前端公眾號：

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109507.html

js運行機制-事件循環EventLoop

js運行機制-事件循環EventLoop 先來看看一段js代碼： console.log(script begin) setTimeout(() => { console.log(setTimeout) },0) new Promise((resolve) => { console.log(promise begin) for(let i = 0; i < 1000; i...

jayce 2019-08-26 13:33 評論0 收藏0
Netty 源碼分析之三我就是大名鼎鼎的 EventLoop(二)

摘要：接上篇源碼分析之三我就是大名鼎鼎的一的處理循環在中一個需要負責兩個工作第一個是作為線程負責相應的操作第二個是作為任務線程執行中的任務接下來我們先從操縱方面入手看一下數據是如何從傳遞到我們的中的是模型的一個實現并且是基于的那么從的前生今世之四接上篇Netty 源碼分析之三我就是大名鼎鼎的 EventLoop(一) Netty 的 IO 處理循環在 Netty 中, 一個 Even...

whidy 2019-08-14 15:05 評論0 收藏0
前端20個真正靈魂拷問，吃透這些你就是中級前端工程師【上篇】

摘要：還是老規矩，從易到難吧傳統的定時器，異步編程等。分配對象時，先是在空間中進行分配。內存泄漏內存泄漏是指程序中己動態分配的堆內存由于某種原因程序未釋放或無法釋放，造成系統內存的浪費，導致程序運行速度減慢甚至系統崩潰等嚴重后果。 showImg(https://segmentfault.com/img/bVbwkad?w=1286&h=876); 網上參差不棄的面試題，本文由淺入深，讓你在...

mdluo 2019-08-30 15:44 評論0 收藏0
前端20個真正靈魂拷問，吃透這些你就是中級前端工程師【上篇】

摘要：還是老規矩，從易到難吧傳統的定時器，異步編程等。分配對象時，先是在空間中進行分配。內存泄漏內存泄漏是指程序中己動態分配的堆內存由于某種原因程序未釋放或無法釋放，造成系統內存的浪費，導致程序運行速度減慢甚至系統崩潰等嚴重后果。 showImg(https://segmentfault.com/img/bVbwkad?w=1286&h=876); 網上參差不棄的面試題，本文由淺入深，讓你在...

leap_frog 2019-08-26 10:46 評論0 收藏0
瀏覽器與NodeJS的EventLoop異同，以及部分機制。

摘要：瀏覽器與的異同，以及部分機制有人對部分迷惑，本身構造函數是同步的，是異步。瀏覽器的的已全部分析完成，過程中引用阮一峰博客，知乎，部分文章內容，侵刪。瀏覽器與NodeJS的EventLoop異同，以及部分機制 PS：有人對promise部分迷惑，Promise本身構造函數是同步的，.then是異步。---- 2018/7/6 22：35修改 javascript 是一門單線程的腳本...

jubincn 2019-08-22 18:32 評論0 收藏0