浏览器事件循环及宏任务微任务

zvapour

已于 2022-03-21 14:08:44 修改

阅读量1k

点赞数

文章标签： javascript 前端开发语言

于 2022-03-21 14:02:10 首次发布

本文链接：https://blog.csdn.net/qq_36303110/article/details/123634128

版权

本文详细介绍了浏览器的事件循环机制，包括进程、线程的概念，以及主线程中的GUI渲染线程、JS渲染引擎和事件触发线程。重点讨论了宏任务和微任务的区别，如script标签、setTimeout、Promise、MutationObserver等，并阐述了事件循环的执行顺序，即先执行一个宏任务，然后清空所有微任务，再进行页面渲染。同时，还提及了requestAnimationFrame和requestIdleCallback的执行时机。最后，强调了在微任务中产生新的微任务时的处理方式，以及事件循环如何不断检查并执行宏任务的过程。

摘要由CSDN通过智能技术生成

浏览器事件循环

进程：计算机分配和调度任务的最小单位；
浏览器是一个多进程模型，每个页卡都是一个独立的进程（稳定）
每个浏览器进程含有哪些线程：(主线程是单线程的)
1. GUI渲染线程页面渲染、绘图、3d动画
2. js渲染引擎执行js代码，当js执行时，渲染线程会挂起 -> 渲染时不能执行js
3. 事件触发线程 EventLoop
4. webApi也会创建线程事件、定时器、ajax…
5. webworker

宏任务微任务

宏任务
script标签、UI渲染、setTimeout、setInterval、setImmediate(IE)、ajax、DOM事件、MessageChannel(消息通道)、(node中：I/O操作、)
微任务
promise、MutationObserverer、queueMicrotask、Object.observe(node中：process.nextTick)
requestAnimationFrame 渲染之前执行 (浏览器大约每16.6ms执行一次，也有可能不渲染)
requestIdleCallback 空闲时间执行

事件循环
首先执行（一个）宏任务，再清空所有微任务，再执行页面渲染（有可能不渲染，渲染前会执行requestFrameAnimation，渲染后会执行requestIdleCallback），此时一个事件循环结束；然后等待ajax、定时器等宏任务执行完毕，将回调函数放入宏任务队列，然后开启下一轮事件循环
- 如果微任务中产生微任务，会将产生的微任务放到微任务队列中继续执行（清空操作）
- 事件循环不停地扫描是否有宏任务过来
- 每次执行宏任务，都会创造一个新的微任务队列，宏任务队列只有一个

// 浏览器渲染是每一轮eventloop执行的末尾去检测是否要渲染，每轮只能有一个宏任务
document.body.style.background = 'red';
Promise.resolve().then(() => {
   
  document.body.style.background = 'yellow'   // 页面一直是黄色，没有闪烁
})

document.body.style.background = 'red';
setTimeout(() => {
   
  document