js 任務

前言

先看一段代碼

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

new Promise((resolve, reject) => {
    console.log('promise');
    resolve();
}).then(function() {
    console.log('then');
});

console.log('global');

輸出： promise 、global、 then、timeout

macrotasks 和 microtasks

在 V8 實現中包含兩種任務：

macrotasks

script ,setTimeout, setInterval, setImmediate, I/O, UI rendering

microtasks

process.nextTick, Promises, Object.observe, MutationObserver

執行過程以下：

1. JavaScript 引擎首先從 macrotask queue 中取出第一個任務，
2. 執行完畢後，將microtask queue中的全部任務取出，按順序所有執行；
3. 瀏覽器進行渲染視圖而後再從 macrotask queue 中取下一個，
4. 執行完畢後，再次將 microtask queue 中的所有取出；
5. 循環往復，直到兩個 queue 中的任務都取完。

注意：

1. 從上面能夠看到，microtask 會執行完畢才進行渲染，若是 microtask 執行時間教長，會致使卡頓
2. 上面執行過程只是 chrome 的，safri 又不太同樣

執行過程的示例 ：
https://jakearchibald.com/201...

如何模擬 Promise.then

new MutationObserver(function() {
    console.log('mutate');
}).observe(document.body, {
    attributes: true
});
document.body.setAttribute('data-random', Math.random());


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


new Promise((resolve, reject) => {
    console.log('promise');
    resolve();
}).then(function() {
    console.log('then');
});
console.log('global');

輸出： promise 、global、mutate、 then、timeout

參考文章：

• microTask: https://github.com/kaerus-com...
• es-promise : https://github.com/stefanpenn...