事件循环的核心流程
事件循环的每一轮迭代遵循以下顺序:
- 执行一个宏任务(如 setTimeout 回调、script 整体代码)。
- 清空所有微任务队列(如 Promise.then、MutationObserver)。
- 渲染页面(如果需要)。
- 执行下一个宏任务(从宏任务队列中取出)。
这意味着:
- 微任务优先级高:体现在当前宏任务执行完毕后,必须立即清空所有微任务,才能进入下一个宏任务。
- 宏任务队列是分阶段的:宏任务队列中的任务需要逐个执行,每个宏任务执行后都会触发微任务处理。
console.log('执行宏任务1');
document.getElementsByTagName('body')[0].style.backgroundColor = 'red';
setTimeout(() => { console.log('执行宏任务2');}, 0);
Promise.resolve().then(() => {
console.log('执行微任务1')
let start = Date.now();
while (Date.now() - start < 3000) {} // 阻塞3秒
});