摘要：宏任務(wù)主要有整體代碼交互事件環(huán)境。按照中的定義告訴瀏覽器你希望執(zhí)行一個(gè)動(dòng)畫(huà)，并且要求瀏覽器在下次重繪之前調(diào)用指定的回調(diào)函數(shù)更新動(dòng)畫(huà)?？偨Y(jié)我們要記住最重要的兩點(diǎn)是單線程和的循環(huán)機(jī)制。

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

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);

在不運(yùn)行的情況可以先猜測(cè)下最終的輸出，然后展開(kāi)我們要說(shuō)的內(nèi)容。

依據(jù)我們多年編寫(xiě) ajax 的經(jīng)驗(yàn)：js 應(yīng)該是按照語(yǔ)句先后順序執(zhí)行，在出現(xiàn)異步時(shí)，則發(fā)起異步請(qǐng)求后，接著往下執(zhí)行，待異步結(jié)果返回后再接著執(zhí)行。但他內(nèi)部是怎樣管理這些執(zhí)行任務(wù)的呢？

在 js 中，任務(wù)分為宏任務(wù)(macrotask)和微任務(wù)(microtask)，這兩個(gè)任務(wù)分別維護(hù)一個(gè)隊(duì)列，均采用先進(jìn)先出的策略進(jìn)行執(zhí)行！同步執(zhí)行的任務(wù)都在宏任務(wù)上執(zhí)行。

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

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

具體的操作步驟如下：

從宏任務(wù)的頭部取出一個(gè)任務(wù)執(zhí)行；

執(zhí)行過(guò)程中若遇到微任務(wù)則將其添加到微任務(wù)的隊(duì)列中；

宏任務(wù)執(zhí)行完畢后，微任務(wù)的隊(duì)列中是否存在任務(wù)，若存在，則挨個(gè)兒出去執(zhí)行，直到執(zhí)行完畢；

GUI 渲染；

回到步驟 1，直到宏任務(wù)執(zhí)行完畢；

這 4 步構(gòu)成了一個(gè)事件的循環(huán)檢測(cè)機(jī)制，即我們所稱(chēng)的eventloop。

回到我們上面說(shuō)的代碼：

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);

執(zhí)行步驟如下：

執(zhí)行 log(1)，輸出 1；

遇到 setTimeout，將回調(diào)的代碼 log(2)添加到宏任務(wù)中等待執(zhí)行；

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

執(zhí)行 log(5)，輸出 5；

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

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

取出下一個(gè)宏任務(wù) log(2)執(zhí)行，輸出 2；

宏任務(wù)的一個(gè)任務(wù)執(zhí)行完畢，查看微任務(wù)隊(duì)列中是否存在任務(wù)，不存在；

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

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

因此，最終的輸出順序?yàn)椋?, 3, 5, 4, 2, 6, 7;

我們?cè)赑romise.then實(shí)現(xiàn)一個(gè)稍微耗時(shí)的操作，這個(gè)步驟看起來(lái)會(huì)更加地明顯：

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中，先生成一個(gè)500萬(wàn)隨機(jī)數(shù)的數(shù)組，然后對(duì)這個(gè)數(shù)組進(jìn)行排序。運(yùn)行這段代碼可以發(fā)現(xiàn)：馬上會(huì)輸出1，稍等一會(huì)兒才會(huì)輸出3，然后再輸出2。不論等待多長(zhǎng)時(shí)間輸出3，2一定會(huì)在3的后面輸出。這也就印證了eventloop中的第3步操作，必須等所有的微任務(wù)執(zhí)行完畢后，才開(kāi)始下一個(gè)宏任務(wù)。

同時(shí)，這段代碼的輸出很有意思：

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

本來(lái)要設(shè)定的是400ms后輸出，但因?yàn)橹暗娜蝿?wù)耗時(shí)嚴(yán)重，導(dǎo)致之后的任務(wù)只能延遲往后排。也能說(shuō)明，setTimeout和setInterval這種操作的延時(shí)是不準(zhǔn)確的，這兩個(gè)方法只能大概將任務(wù)400ms之后的宏任務(wù)中，但具體的執(zhí)行時(shí)間，還是要看線程是否空閑。若前一個(gè)任務(wù)中有耗時(shí)的操作，或者有無(wú)限的微任務(wù)加入進(jìn)來(lái)時(shí)，則會(huì)阻塞下一個(gè)任務(wù)的執(zhí)行。

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

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);

其實(shí)，async-await 只是 Promise+generator 的一種語(yǔ)法糖而已。上面的代碼我們改寫(xiě)為這樣，可以更加清晰一點(diǎn)：

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

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

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

window.requestAnimationFrame() 告訴瀏覽器——你希望執(zhí)行一個(gè)動(dòng)畫(huà)，并且要求瀏覽器在下次重繪之前調(diào)用指定的回調(diào)函數(shù)更新動(dòng)畫(huà)。該方法需要傳入一個(gè)回調(diào)函數(shù)作為參數(shù)，該回調(diào)函數(shù)會(huì)在瀏覽器下一次重繪之前執(zhí)行

requestAnimationFrame是GUI渲染之前執(zhí)行，但在微服務(wù)之后，不過(guò)requestAnimationFrame不一定會(huì)在當(dāng)前幀必須執(zhí)行，由瀏覽器根據(jù)當(dāng)前的策略自行決定在哪一幀執(zhí)行。

我們要記住最重要的兩點(diǎn)：js是單線程和eventloop的循環(huán)機(jī)制。

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

我的前端公眾號(hào)：