1. 宏任務(wù)與微任務(wù)
依據(jù)我們多年編寫 ajax 的經(jīng)驗：js 應(yīng)該是按照語句先后順序執(zhí)行，在出現(xiàn)異步時，則發(fā)起異步請求后尖奔，接著往下執(zhí)行茬底，待異步結(jié)果返回后再接著執(zhí)行沪悲。但他內(nèi)部是怎樣管理這些執(zhí)行任務(wù)的呢？
在 js 中阱表，任務(wù)分為宏任務(wù)(macrotask)和微任務(wù)(microtask)殿如，這兩個任務(wù)分別維護一個隊列贡珊，均采用先進先出的策略進行執(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ù)的頭部取出一個任務(wù)執(zhí)行灰署；
- 執(zhí)行過程中若遇到微任務(wù)則將其添加到微任務(wù)的隊列中判帮；
- 宏任務(wù)執(zhí)行完畢后，微任務(wù)的隊列中是否存在任務(wù)溉箕，若存在晦墙，則挨個兒出去執(zhí)行，直到執(zhí)行完畢肴茄；
- GUI 渲染晌畅；
- 回到步驟 1，直到宏任務(wù)執(zhí)行完畢寡痰；
這 4 步構(gòu)成了一個事件的循環(huán)檢測機制抗楔，即我們所稱的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);
- 執(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ù)的一個任務(wù)執(zhí)行完畢尚困，查看微任務(wù)隊列中是否存在任務(wù)，存在一個微任務(wù) log(4)（在步驟 3 中添加的）链蕊，執(zhí)行輸出 4尾组；
- 取出下一個宏任務(wù) log(2)執(zhí)行忙芒，輸出 2；
- 宏任務(wù)的一個任務(wù)執(zhí)行完畢讳侨，查看微任務(wù)隊列中是否存在任務(wù)呵萨，不存在；
- 取出下一個宏任務(wù)執(zhí)行跨跨，執(zhí)行 log(6)潮峦，將 then 中的 log(7)添加到微任務(wù)中；
- 宏任務(wù)執(zhí)行完畢勇婴，存在一個微任務(wù) log(7)（在步驟 9 中添加的）忱嘹，執(zhí)行輸出 7；
因此耕渴，最終的輸出順序為：1, 3, 5, 4, 2, 6, 7;
我們在Promise.then實現(xiàn)一個稍微耗時的操作拘悦，這個步驟看起來會更加地明顯：
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萬隨機數(shù)的數(shù)組橱脸，然后對這個數(shù)組進行排序础米。運行這段代碼可以發(fā)現(xiàn)：馬上會輸出1，稍等一會兒才會輸出3添诉，然后再輸出2屁桑。不論等待多長時間輸出3，2一定會在3的后面輸出栏赴。這也就印證了eventloop中的第3步操作蘑斧，必須等所有的微任務(wù)執(zhí)行完畢后，才開始下一個宏任務(wù)须眷。
本來要設(shè)定的是400ms后輸出竖瘾，但因為之前的任務(wù)耗時嚴重，導致之后的任務(wù)只能延遲往后排花颗。也能說明捕传，setTimeout和setInterval這種操作的延時是不準確的，這兩個方法只能大概將任務(wù)400ms之后的宏任務(wù)中捎稚，但具體的執(zhí)行時間乐横，還是要看線程是否空閑求橄。 **若前一個任務(wù)中有耗時的操作今野，或者有無限的微任務(wù)加入進來時，則會阻塞下一個任務(wù)的執(zhí)行****
2. async-await
從上面的代碼中也能看到 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);
其實，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(隨機數(shù)), 2, 1557830834679(時間戳);
3. requestAnimationFrame
requestAnimationFrame也屬于異步執(zhí)行的方法蒲凶，但該方法既不屬于宏任務(wù)，也不屬于微任務(wù)拆内。
window.requestAnimationFrame() 告訴瀏覽器——你希望執(zhí)行一個動畫旋圆，并且要求瀏覽器在下次重繪之前調(diào)用指定的回調(diào)函數(shù)更新動畫。該方法需要傳入一個回調(diào)函數(shù)作為參數(shù)麸恍，該回調(diào)函數(shù)會在瀏覽器下一次重繪之前執(zhí)行
requestAnimationFrame是GUI渲染之前執(zhí)行灵巧，但在微服務(wù)之后，不過requestAnimationFrame不一定會在當前幀必須執(zhí)行抹沪，由瀏覽器根據(jù)當前的策略自行決定在哪一幀執(zhí)行刻肄。
4. 總結(jié)
我們要記住最重要的兩點：js是單線程和eventloop的循環(huán)機制。
