直播平台搭建,浏览器中的事件循环与Node中的事件循环
1、JS线程读取并执行JS代码
2、执行JS代码的过程中,指定异步的操作给对应的线程处理
3、异步线程处理完毕之后,讲对应的回调函数推入任务队列
4、JS线程执行完毕之后,查询任务队列,取一个任务推入JS线程运行
5、重复2-4
macrotask queue宏任务队列(有多个):Ajax请求、绑定事件的回调函数、定时器的回调函数…
microtask queue微任务队列(只有一个):promises、Object.observe、MutationObserver…
console.log('脚本开始');setTimeout(() => {console.log('进入setTimeout1回调函数');
}, 0);setTimeout(() => {console.log('进入setTimeout2回调函数');Promise.resolve().then(() => {console.log('进入promise2回调函数');Promise.resolve().then(() => {console.log('进入promise3回调函数');});console.log('promise2回调函数结束');});setTimeout(() => console.log('进入setTimeout3回调函数'), 0);
}, 0);Promise.resolve().then(() => {console.log('进入promise1回调函数');
});console.log('脚本结束');
执行结果
脚本开始
脚本结束
进入promise1回调函数
进入setTimeout1回调函数
进入setTimeout2回调函数
进入promise2回调函数
promise2回调函数结束
进入promise3回调函数
进入setTimeout3回调函数
执行流程:
一、查询宏任务队列,取一个执行,把脚本执行当作一个宏任务来看待
二、查询微任务队列,全部执行完毕,包括当前微任务队列执行时产生的新的微任务
Node的组成
执行步骤
定时器阶段:setTimeout/setInterval
等待回调阶段:执行某些系统操作的回调,TCP错误处理
闲置阶段、准备阶段:只在内部使用
轮询阶段:I/O 回调
检查阶段:setImmediate
关闭回调阶段:关闭类的回调,socket.on(‘close’,…)
示例图
注意事项:process.nextTick > promise
每个阶段都有自己的先进先出队列,当事件循环进入到该阶段,就会执行指定的队列,直到队列被耗尽,或者达到回调的最大数量
在进入到每一个阶段之前,都会执行NextTick队列和微任务队列,前者优先级更高
// process.nextTick、promise、setImmediate、setTimeout优先级比较// 事件循环的各阶段执行队列任务之前,会先复制当前时间的该阶段的队列
// 事件循环的各阶段执行队列任务,直到队列耗尽或者达到上限
// 进入各阶段之前,会执行微任务队列(nextTick队列和promise队列)
Promise.resolve().then(() => console.log('promise1'));
Promise.resolve().then(() => {console.log('promise2');Promise.resolve().then(() => console.log('promise in promise'));
});
Promise.resolve().then(() => {console.log('promise3');process.nextTick(() => console.log('next tick in promise'));
});
Promise.resolve().then(() => console.log('promise4'));
Promise.resolve().then(() => console.log('promise5'));// 宏任务里边的宏任务总是会放到下一轮询,微任务立即执行?
setImmediate(() => console.log('immediate1'));
setImmediate(() => {console.log('immediate2');process.nextTick(() => console.log('next tick in immediate'));Promise.resolve().then(() => {console.log('promise in immediate');process.nextTick(() => console.log('next tick in promise in immediate'));});setImmediate(() => console.log('inner immediate'));
});// 如果上面的Promis里面加个Promise试一下
process.nextTick(() => console.log('next tick1'));
process.nextTick(() => {console.log('next tick2');process.nextTick(() => console.log('inner next tick'));