Javascript 之 Event Looooooop 初探

在探究的Event Loop(事件环, 以下简称EL)运行机制之前先思考以下一段代码的运行结果，然后在浏览器和Node中验证你的答案。当然，如果两个运行环境得出的结果是一样的，那你可以关闭当前文档了

setTimeout(() => console.log('setTimeout1'), 0);
setTimeout(() => {
    console.log('setTimeout2');
    Promise.resolve().then(() => {
        console.log('promise3');
        Promise.resolve().then(() => {
            console.log('promise4');
        })
        console.log(5)
    })
    setTimeout(() => console.log('setTimeout4'), 0);
}, 0);
setTimeout(() => console.log('setTimeout3'), 0);
Promise.resolve().then(() => {
    console.log('promise1');
})
复制代码

单线程

要理解EL, 我们首先要理清楚js中的单线程。js中的单线程并不像很多人理解的单线程那么简单。js的主线程是单线程, 在主线程之外，还有microtask(微任务)队列，macrotask(宏任务,也叫task)队列。

1.微任务

一个EL中只有一个microtask队列，通常下面几种任务被认为是microtask:

1. promise（promise的then和catch才是microtask，本身其内部的代码并不是）
2. MutationObserver
3. process.nextTick(nodejs)

2.宏任务

一个EL中可以有一个或者多个宏任务队列，每一个宏任务都有一个特定的任务源。通常下面几种任务被认为是macrotask:

1. setTimeout
2. setInterval
3. setImmediate
4. I/O
5. UI rendering

浏览器中的Event Loop

Node中的Event Loop