javaScript中Event Loop

概念

是计算机的一种运行机制，用于等待和发送消息和事件。

javaScript是单线程的，使用这种机制来解决单线程运行中的一些问题。

主线程（调用栈）

同步代码，一行一行执行。

宏任务（消息队列）

setTimeout  

setInterval

setImmediate（node）：把一些需要长时间运行的操作放在一个回调函数里，在浏览器完成后面的其他语句后，就立刻执行这个回调函数。

I/O UI rendering：UI渲染进程

微任务：

Promise

process.nextTick（node）：在本轮循环后执行，且在微任务中最快执行，在Promise之前

MutationObserver：监视对DOM树所做更改的能力

requestAnimationFrame

既不是宏任务，也不是微任务，它是在下一次重绘之前执行的，由浏览器根据当前策略决定哪一帧执行。

每一次调用，都会讲回调推入animation frame request callback list（动画回调列表），它的优先级高于普通的宏任务(timer)，晚于微任务（例三）。

且会在一次任务中将任务列表里面的任务按照顺序全部执行。

描述

当主线程（也就是调用栈）执行过程中，如果碰到宏任务，就先放到宏任务队列中，等调用栈清空后执行（例一）

如果碰到微任务，就放到微任务队列中。

当前调用栈（宏任务）清空后，会立即执行微任务队列（例一），在微任务执行中加入的微任务，也会立即执行（例二）。

当前微任务队列清空后，执行下一轮的任务（宏任务）（例三）

// 例一
console.log('begin');
setTimeout(()=> {
    console.log('setTimeout')
}, 0);
new Promise((resolve)=> {
    console.log('Promise1');
    resolve();
    console.log('Promise2');
}).then(()=> {
    console.log('then');
});
console.log('end');
// 执行顺序 begin Promise1 Promise2 end then setTimeout

// 例二
console.log('begin');
setTimeout(()=> {
    console.log('setTimeout');
}, 0);
new Promise((resolve)=> {
    console.log('Promise1');
    resolve();
    console.log('Promise2');
}).then(()=> {
    console.log('then');
    new Promise((resolve)=> {
        console.log('_Promise1');
        resolve();
        console.log('_Promise2');
    }).then(()=> {
        console.log('_then');
    })
});
console.log('end');
// 执行顺序 begin Promise1 Promise2 end then _Promise1 _Promise2 _then setTimeout

// 例三
console.log('begin');
setTimeout(()=> {
    console.log('setTimeout');
    setTimeout(()=> {
        console.log('__setTimeout');
    }, 0);
    new Promise((resolve)=> {
        console.log('__Promise1');
        resolve();
        console.log('__Promise2');
    }).then(()=> {
        console.log('__then');
        new Promise((resolve)=> {
            console.log('__Promise3');
            resolve();
            console.log('__Promise4');
        }).then(()=> {
            console.log('__then');
        })
    });
}, 0);

setTimeout(()=> {
    console.log('2setTimeout');
    setTimeout(()=> {
        console.log('2__setTimeout');
    }, 0);
    new Promise((resolve)=> {
        console.log('2__Promise1');
        resolve();
        console.log('2__Promise2');
    }).then(()=> {
        console.log('2__then');
        new Promise((resolve)=> {
            console.log('2__Promise3');
            resolve();
            console.log('2__Promise4');
        }).then(()=> {
            console.log('2__then');
        })
    });
}, 0);

requestAnimationFrame(()=> {
    console.log('requestAnimationFrame')
});

new Promise((resolve)=> {
    console.log('Promise1');
    resolve();
    console.log('Promise2');
}).then(()=> {
    console.log('then');
    new Promise((resolve)=> {
        console.log('_Promise1');
        resolve();
        console.log('_Promise2');
    }).then(()=> {
        console.log('_then');
    })
});
console.log('end');
// 执行顺序 
// 第一次宏任务执行，将第俩个setTimeout推入宏任务
// begin Promise1 Promise2 end then _Promise1 _Promise2 _then
// 执行requestAnimationFrame回调 优先级高于宏任务 低于微任务
// requestAnimationFrame
// 第二次宏任务执行，执行第一个setTimeout宏任务，将内部的setTimeOut推入宏任务队列，清空微任务
// setTimeout __Promise1 __Promise2 __then __Promise3 __Promise4 __then
// 第三次执行宏任务，执行第二个setTimeout宏任务，将内部的setTimeOut推入宏任务队列，清空微任务
// 2setTimeout 2__Promise1 2__Promise2 2__then 2__Promise3 2__Promise4 2__then
// 第4次宏任务执行
// __setTimeout
// 第5次宏任务执行
// 2__setTimeout