1.浏览器常驻线程
- GUI渲染线程：负责渲染页面，与JavaScript引擎线程互斥，即JavaScript引擎线程执行时间过长，可能引起页面渲染阻塞
- JavaScript引擎线程：执行脚本代码，定时器及异步请求成功回调，进入队列，等待此线程进行执行。
- 定时器触发线程：负责执行setTimeout，setInterval异步定时的函数，计时结束交给事件触发线程。
- 事件触发线程：负责将准备好的事件，交给Js执行，例如：定时器结束，ajax成功回调，点击触发的事件，添加到执行队列
- 异步http请求线程：执行异步请求一类的线程，例如：promise,axios,ajax。成功回调都交给事件触发线程。
2.浏览器的Event Loop
浏览器事件循环的流程
执行上下文 --> 同步压栈执行 -->异步挂起（宏任务/微任务） -->宏任务 -->微任务 -->微任务 ……-->栈空 -->结束
例题分析1
setTimeout(()=>{
console.log("setTimeout1")
},0);
console.log("window");
new Promise((resolve,reject)=>{
console.log("promise");
setTimeout(()=>{
console.log('setTimeout2');
resolve();
},0);
})
.then(()=> {
console.log("promise1")
})
.then(()=>{
console.log("promise2")
});
setTimeout(()=>{
console.log('setTimeout3');
new Promise((resolve,reject)=>{
console.log("promise3");
resolve();
}).then(()=> {
console.log("promise4")
});
},0);
执行结果
分析：
- window ---- script标签，同步
- promise ---- promise 同步
- 同步任务执行完毕，下面执行异步
- setTimeout1 ---- setTimeout 异步宏
- 无微任务
- setTimeout2 ---- setTimeout 异步宏
- promise1 promise2 ---- resolve链式调用 异步微
- setTimeout3 promise3 ---- setTimeout 异步宏
- promise4 ---promise.then() 异步微
3.Node 的 Event Loop
Node的事件循环的流程
外部输入数据 --> 轮询阶段(poll) --> 检查阶段(check) --> 关闭事件回调阶段(close callback) --> 定时器检测阶段(timer) --> I/O事件回调阶段(I/O callbacks) -->闲置阶段(idle, prepare) --> 轮询阶段（按照该顺序反复运行）...
- timer：这个阶段执行定时器的回调，包括 setTimeout和setInterval ，这个阶段受poll阶段控制。
- I/O callbacks:这个阶段执行除了setImmediate、定时器以及close之外的所有回调。
- idle，prepare：内部使用
-
poll：等待新的I/O事件，一般会在这里阻塞。(最重要阶段)
进入此阶段，分两种情况：- 若没有设定timer，分两种情况：
- (1). 当poll队列不为空：会执行回调队列，直到队列为空，或者达到系统上限
- (2). 当poll队列为空，分两种情况：
- (2.1) 若有setImmediate回调，则poll阶段会停止，并进入check阶段，执行其回调
- (2.2)若没有setImmediate回调，会等待回调加入队列并立即去执行，会有时间限定，以免一直等待回调加入
- 若有设定timer，且poll队列为空的话，会去判断timer是否超时，若超时则回到timer回调执行阶段。
- check：执行setImmediate的回调
- close callbacks：执行像socket.on('close', ...)这种close事件的回调
异步队列也分为宏任务与微任务：
- 常见的 macro-task 比如：setTimeout、setInterval、 setImmediate、script（整体代码）、 I/O 操作等。
- 常见的 micro-task 比如: process.nextTick、new Promise().then(回调)等。
例题分析2
const fs = require('fs')
fs.readFile(__filename, () => {
setTimeout(() => {
console.log('timeout');
}, 0)
setImmediate(() => {
console.log('immediate')
})
})
setImmediate 设计在poll阶段完成时执行，即check阶段；
setTimeout 设计在poll阶段为空闲时，且设定时间到达后执行，但它在timer阶段执行
先输出 immediate，在输出timeout。此段代码，写在I/O阶段，先check阶段，队列空闲且计时到点时，在执行timer阶段。
例题分析2
console.log('start')
setTimeout(() => {
console.log('timer1')
Promise.resolve().then(function() {
console.log('promise1')
})
}, 0)
setTimeout(() => {
console.log('timer2')
Promise.resolve().then(function() {
console.log('promise2')
})
}, 0)
Promise.resolve().then(function() {
console.log('promise3')
})
console.log('end')
node执行结果：start=>end=>promise3=>timer1=>timer2=>promise1=>promise2
浏览器执行结果：start=>end=>promise3=>timer1=>promise1=>timer2=>promise2
分析：
- start ，end ---- script标签内 宏任务
- promise3 --- promise.then() 微任务
- timer1 --- timer阶段，执行回调，将promise1放入微任务队列
- timer2 --- timer阶段，执行回调，将promise2放入微任务队列
- promise1 --- promise.then() 微任务
- promise2 --- promise.then() 微任务
总结
浏览器和Node 环境下，微任务队列的执行时机不同
- Node端，microtask 在事件循环的各个阶段之间执行
- 浏览器端，microtask 在事件循环的 macrotask 执行完之后执行
