Event Loop

1.Event loop

事件循环，指浏览器或node的一种解决javascript单线程运行时不会阻塞的一种机制，也就时我们经常使用的异步的原理。

同步和异步：

同步：当前代码必须要等上一行代码执行结束才会继续执行

异步：当前代码不会等待上一行代码执行结束就直接开始执行

2.Event Loop是什么？

是一个执行模型，在不同的地方有不同的实现，浏览器和Node.js，基于不同的技术实现了各自的Event Loop。浏览器的Event Loop是在HTML5的规范中明确定义。Node.js的Event Loop是基于libuv实现的。

3.宏任务与微任务

宏任务：macrotask,也叫tasks，一些异步任务的回调会依次进入macrotask Queue,等待后续被调用，这些异步任务包括：

setTimeout

setInterval

setImmediate(node特有)

requestAnimationFrame(浏览器独有)

I/O

UI rendering

微任务，microtask,也叫jobs,另一些异步任务的回调会依次进入microtask queue，等待后续被调用，这些异步任务包括：

process.nextTick(node独有)

Promise.then(注意 new Promise是同步的)

Object.observe

mutationObserver

4.浏览器的Event Loop

一个函数执行栈，一个事件队列和一个微服务队列

每从事件队列中取一个事件时有微服务任务就把微服务任务执行完，然后才开始执行事件

宏任务在一个队列中,宏任务一次执行一个，微任务一定要等所有微任务执行完

5.Node.js的Event Loop

过程：

1）.执行全局的同步代码

2）执行microtask微任务，先执行所有的nextTick queue中的所有任务，再执行other Microtask queue 中的所有任务

3）开始执行macrotask宏任务，共六个阶段，从第一个阶段开始执行相应每一个阶段macrotask中的所有任务，注意这里是所有每个阶段宏任务阶段的所有任务，在浏览器的Event Loop中是只取宏队列的第一个任务出来执行，每一个阶段的macrotask任务执行完毕之后开始执行微任务

4）Timers queue ->步骤2）-> I/O queue ->步骤2）->close callback queue ->步骤2） ->Timers queue

console.log('1');//同步代码

setTimeout(()=>{//macrotask
    console.log('2');
    process.nextTick(function () {
        console.log('3');
    })
    new Promise(function (resolve) {
        console.log('4');
        resolve();
    }).then(function () {
        console.log('5');
    })
})
new Promise(function (resolve) {//new Promise为同步代码
    console.log('7');
    resolve();
}).then(function () {//microtask,微任务队列会追加到这一轮事件循环的末尾
    console.log('8');
})
setTimeout(()=>{//macrotask
    console.log('9');
    process.nextTick(function () {//microtask
        console.log('10');
    })
    new Promise(function (resolve) {
        console.log('11');
        resolve();
    }).then(function () {
        console.log('12');
    })
})

结果：1 7 8 2 4 9 11 3 10 5 12，node环境下
6.总结：

1）浏览器的Event Loop 和node.js的Event loop是不同的，实现机制也不一样

2）Node.js可以理解成有4个宏任务队列和2个微服务任务队列，但是执行宏任务时有6个阶段

3）Node.js中，先执行全局代码，执行完同步代码调用栈清空后，先从微任务队列NextTick queue中依次取出所有的任务放入调用栈中执行，再从微任务队列Other Mirotask queue 中依次取出所有的任务放入调用栈中执行，然后开始宏任务的六个阶段，每个阶段都将该宏任务队列中的所有任务取出来执行（注意：在浏览器中只取一个宏任务），每个宏任务阶段执行完毕后，开始执行微任务，再开始执行下一段的宏任务，以此构成事件循环

7.细节特性

7.1微任务有两种nextTick和Promise.then，那么谁比较快呢？？？

promise.resolve('123').then(res => {console.log(res)});
process.nextTick(() => console.log('nextTick'));

执行结果：

nextTick 123

nextTick比较快，解释：虽然process.nextTick和Promise.then都是将回调函数注册到microtask，但是优先级不一样，process.nextTick 的microtask queue 总是优先于promise.then的microtask queue

7.2setTimeOut 和setImmediate

2setTimeOut 和setImmediate执行顺序不固定，取决于node的准备时间

setTimeout(()=>{
    console.log('setTimeOut')
},0);
setImmediate(()=>{
    console.log('setImmediate');
})

为什么不固定？？

setTimeOut/setInterval的第二个参数取值范围是[1,2^31-1]，如果超过这个范围则会初始化为1

我们知道setTimeOut的回调函数在timer阶段执行，setImmediate的回调函数在check阶段执行，event loop的开始会检查timer阶段，但是在开始之前到timer阶段会消耗一定时间，所以会出现两种情况：

1）timer前的准备时间超过1ms，满足loop time>=1ms,执行timer阶段的回调函数

2）timer前的准备时间小于1ms，则先执行check阶段的回调函数，下一次event loop执行timer阶段的回调函数

让setTimeout先于setImmediate的方法：

setTimeout(()=>{
    console.log('setTimeOut')
},0);
setImmediate(()=>{
    console.log('setImmediate');
})
    const start = Date.now();
while(Date.now()-start <10);

让setImemediate 先于 setTimeout的方法：

const fs = require('fs');
fs.readFile(__filename,()=>{
    setTimeout(()=>{
        console.log('setTimeOut');
    },0);
    setImmediate(()=>{
        console.log('setImmediate');
    })
});