浏览器事件循环原理 —— 任务优先级

 系列文章目录

• 第一章 浏览器事件循环原理 —— 浏览器进程模型
• 第二章 浏览器事件循环原理 —— 渲染主线程如何工作？
• 第三章 浏览器事件循环原理 —— 何为异步？
• 第四章 浏览器事件循环原理 —— JS为何会阻碍渲染？

---

文章目录

系列文章目录

文章目录

前言

总结

---

前言

该文章作用于 “web前端大师课” 的学习笔记，附上课程链接。

---

任务有优先级吗

任务没有优先级，在消息队列中先进先出，但消息队列是有优先级的

根据 W3C 的最新解释

• 每个任务都有⼀个任务类型，同⼀个类型的任务必须在⼀个队列，不同类型的任务可以分属于不同的队列。

• 在⼀次事件循环中，浏览器可以根据实际情况从不同的队列中取出任务执⾏。

• 浏览器必须准备好⼀个微队列，微队列中的任务优先所有其他任务执⾏。

三大队列

• 延时队列：⽤于存放计时器到达后的回调任务，优先级「中」
• 交互队列：⽤于存放⽤户操作后产⽣的事件处理任务，优先级「⾼」
• 微队列：⽤户存放需要最快执⾏的任务，优先级「最⾼」

注：添加任务到微队列的主要⽅式主要是使⽤ Promise、MutationObserver

---

总结

任务在消息队列中，先进先出，没有优先级；但是消息队列有三大类，微队列、交互队列、延时队列，他们的优先级从高到低排列。微队列是每个浏览器必须准备好的一个消息队列，它的优先级是最高的；其次是交互队列，w3c官方认为，用户交互的事件要尽可能的及时反馈，所以他的优先级是除了微队列最高的；最后则是延时队列，一般setTimeout()等计时器的方法都放在这个队列中，但是他的优先级是最低的，这也是 js 中 setTimeout() 的计时不是精确的原因之一，会有一些偏差。