浏览器事件循环机制-唐霜

在众多话题中，浏览器事件循环机制这个话题本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】显得格外重要，面试中也好，日常开发讨论时【转载请注明来源】【本文受版权保护】也好，了解由于事件循环机制所带来的执行时【版权所有】唐霜 www.tangshuang.net【作者：唐霜】序，几乎可以成为一件用来炫技的事情。那么【转载请注明来源】【未经授权禁止转载】，本文就来聊一聊浏览器事件循环机制。

【转载请注明来源】转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。

浏览器的角色转载请注明出处：www.tangshuang.net

【原创不易，请尊重版权】【作者：唐霜】【原创不易，请尊重版权】

很多文章一上来说“javascript的【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。事件循环”，我可以负责任的告诉你，这个说本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。法本身就错了，这些文章估计也就是凑数的。【作者：唐霜】著作权归作者所有，禁止商业用途转载。“事件循环”是浏览器遵循HTML标准【版权所有】唐霜 www.tangshuang.net而实现的，既然是HTML标准，根js这门原创内容，盗版必究。【未经授权禁止转载】语言本身没关系。我们知道，javascr【原创内容，转载请注明出处】未经授权，禁止复制转载。ipt是单线程执行语言，那么如果在整个时【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】空中，只有这一根线程在跑程序，哪来的事件【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。循环呢？javascript是一门语言，【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】它的本质在于其语法、数据类型和结构、核心【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】特性（如继承性、全剧作用域、动态类型变量著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】），而至于你要如何去运行由js写的代码，【作者：唐霜】未经授权，禁止复制转载。则是你选择用什么工具去执行它。除了v8以著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】外，用来执行js的引擎还有firefox【版权所有，侵权必究】【作者：唐霜】的SpiderMonkey，IE的JSc【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】ript等等。当然，目前来说，v8是最火【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。的，也是最快的。然而，单就v8引擎，根本本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net干不了事情，要让js工作，还要在v8外面【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】套上一层又一层的工具，形成一套运行时（r未经授权，禁止复制转载。【本文首发于唐霜的博客】untime）环境，除了浏览器之外，no本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】dejs就是大名鼎鼎的另外一套js运行时【原创不易，请尊重版权】【本文受版权保护】环境，除了这两个熟知平台之外，还有嵌入式【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】运行环境，它们采用了一个叫quickjs【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net的js引擎。我们今天要讲的事件循环，发生转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】在这样的运行时环境中，也就是浏览器，这样【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】一个大平台上。

【本文首发于唐霜的博客】【本文受版权保护】原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。

【原创内容，转载请注明出处】【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】

你应该知道这样一个事实，异步，是浏览器行本文作者：唐霜，转载请注明出处。【作者：唐霜】为中非常大特点的一个。什么是异步呢？就是【未经授权禁止转载】【转载请注明来源】一个任务，并不是立即执行，而是要等待一会【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net儿再执行。那在等待啥呢？在等待这个过程中【版权所有】唐霜 www.tangshuang.net【作者：唐霜】，通过什么方式，它知道应该结束等待，执行【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。那个异步任务呢？

著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。【未经授权禁止转载】

所以，在js执行的那个线程之外，事件循环【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】线程就是帮助js线程完成这个等待和结束等【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net待过程的另外一条线程。

执行栈（Call Stack）【版权所有】唐霜 www.tangshuang.net

【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】原创内容，盗版必究。

function main() {
  a()
  b()
}

function a() {
  c()
}

function b() {}
function c() {}

main()

你知道它们的执行顺序是 main->【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。;a->c->b，在这样执行【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。过程中，会形成执行栈，当一个函数开始执行【转载请注明来源】【作者：唐霜】时，被压入栈顶，执行完时，弹出栈；如果在【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】这个函数执行过程中，调用了另外一个函数，【本文受版权保护】本文作者：唐霜，转载请注明出处。那么这个被调用的函数会被压入到这个栈顶，【本文受版权保护】【版权所有，侵权必究】执行完之后，就会被弹出，回到还在栈顶的那原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】个函数的剩下部分。

本文作者：唐霜，转载请注明出处。【转载请注明来源】【本文受版权保护】

执行栈示意图【作者：唐霜】

原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】

如上图所示意，黄色区域内是执行栈。当一段【未经授权禁止转载】【本文受版权保护】代码被执行起来，js执行栈的一个特点是不【未经授权禁止转载】未经授权，禁止复制转载。被打断（C语言等语言的一些执行可以被打断原创内容，盗版必究。【转载请注明来源】）。正在执行的所有这些函数，必须是按照代【转载请注明来源】【原创不易，请尊重版权】码中的顺序和执行栈的模式，一次性完成，而著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net在这个过程里面，对于浏览器来说，不能干其【本文首发于唐霜的博客】【转载请注明来源】他事，必须等main函数执行完，拿到结果本文版权归作者所有，未经授权不得转载。【作者：唐霜】，才能干其他的事情（例如在main中触发原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net的界面的重新渲染，浏览器需要通过渲染引擎本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net重新渲染界面）。这也是为什么js慢的原因本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net之一。

【作者：唐霜】本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。未经授权，禁止复制转载。【转载请注明来源】

任务队列（Tasks Queue）未经授权，禁止复制转载。

“队列”是一个区别于栈的数据结构，其特征未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。是先进先出。浏览器通过内部实现的多个任务原创内容，盗版必究。【本文受版权保护】队列，来调控任务的先后顺序。那么什么是“【未经授权禁止转载】转载请注明出处：www.tangshuang.net任务”呢？一个函数被压入执行栈中开始被执【本文首发于唐霜的博客】未经授权，禁止复制转载。行，经过执行栈模式执行，到最好栈被清空的著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】这个过程（上文示意图展示的过程），这样一转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。个过程被称为“一次任务”。

【原创内容，转载请注明出处】【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】

在上面的示意图例子中，我们经历了最简单的转载请注明出处：www.tangshuang.net原创内容，盗版必究。js单线程运行过程。但是，现在，我们在c【转载请注明来源】【原创不易，请尊重版权】函数中，增加一个需要进行网络I/O的任务【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net，也就是我们熟知的ajax，而且我们都知【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】道这是异步的。

原创内容，盗版必究。【本文首发于唐霜的博客】原创内容，盗版必究。

function c() {
  fetch('http://xxx.com/api').then(e)
}

async function e(res) {
  const data = await res.json
  console.log(data)
}

看，我们熟知的代码来了。从现在我已知的现【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net象，我们知道，fetch函数是一个异步函本文作者：唐霜，转载请注明出处。【转载请注明来源】数，它不会阻塞js的执行，在执行时间上，【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。几乎没有花时间，我们就让c函数结束，开始【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.netd函数运行。

实际上，fetch语句，发起了一个新任务【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】，这个新任务和当前执行栈中正在运行的任务本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net，属于同一个级别。这个新任务被交给 We【转载请注明来源】【版权所有，侵权必究】b API（也就是网络请求I/O接口fe【版权所有】唐霜 www.tangshuang.net【转载请注明来源】tch，在浏览器的另外线程中执行，下文细【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】述），当Web API完成网络I/O之后原创内容，盗版必究。原创内容，盗版必究。，又会反过来，把该任务交还给js线程（主【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】线程），好让这个任务（实际上也就是我们常著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】说的回调函数）在执行栈中被运行。

原创内容，盗版必究。转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】

横向箭头线表示任务线，可以理解为两个不同本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】线程，黑色为主线程，绿色为网络I/O线程未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net。总向箭头线可以理解为线程之间交还消息。【版权所有，侵权必究】转载请注明出处：www.tangshuang.net黄色区域表示一个任务，不是一个栈，理解时【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net应该注意这一点。

未经授权，禁止复制转载。【转载请注明来源】本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。【本文首发于唐霜的博客】

那么这个交还过程是怎么做到的呢？这个交还【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。过程是通过将被交还的任务，放入到一个“任【本文首发于唐霜的博客】未经授权，禁止复制转载。务队列”中而完成的。

原创内容，盗版必究。【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】

JS执行的任务队列【访问 www.tangshuang.net 获取更多精彩内容】

著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。【转载请注明来源】

在【关注微信公众号：wwwtangshuangnet】MDN的文档【作者：唐霜】中，并没有“任务队列”的说法，而是称为“【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。消息队列”（message queue）原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。，我认为这样称反而不容易理解。

MDN将任务称为消息，你细品这里的这句话本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。，a message 实际上就是 set转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。Timeout 的第一个参数，也就是回调【版权所有】唐霜 www.tangshuang.net【转载请注明来源】函数，将函数称为 message 不容易【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。理解，称为任务反而好理解一些

【本文受版权保护】【作者：唐霜】【原创不易，请尊重版权】原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】

任务是在什么时候被推送到任务队列中的呢？著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。是在Web API完成对应的操作之后，例【版权所有，侵权必究】【原创不易，请尊重版权】如由fetch发起的网络I/O操作，当网【关注微信公众号：wwwtangshuangnet】【本文受版权保护】络请求回来之后，回调函数（也就是任务）被【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。推入队列等待被执行，由setTimeou未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。t发起的定时器任务，在定时器到时之后，回【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。调函数被推入队列等待执行（需要注意，se【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。tTimeout的第二个参数，是一个参考原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。值，表示最小等待时间，而并非确定值，这在【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。MDN的文档中已经清楚的表示了）。

那么这个任务队列被放在哪里呢？任务队列实本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。际上是一个独立的服务，就像你使用Kafk著作权归作者所有，禁止商业用途转载。【转载请注明来源】a一样，它有自己的工作模式，理论上，它和【本文首发于唐霜的博客】【本文受版权保护】js主线程也是分开的，它在另外一个线程中【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。运行。在整个过程中，由js线程发起的任务原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net，交给Web API去执行时，也会把回调【作者：唐霜】【未经授权禁止转载】函数的指针交给Web API（在js线程【本文受版权保护】著作权归作者所有，禁止商业用途转载。和Web API对应任务线程之间传递的东【关注微信公众号：wwwtangshuangnet】【作者：唐霜】西，我认为倒是可以用消息，也就是mess【转载请注明来源】【关注微信公众号：wwwtangshuangnet】age，来表示），而函数被存放在js堆内转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】存中，保持着它的上下文。被放在任务队列中著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】的任务，实际上，只是拥有一个指针信息，当未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。任务被取出，实际上是从js线程的堆内存中著作权归作者所有，禁止商业用途转载。【转载请注明来源】取出该指针对应的函数，压入栈中开始执行。

著作权归作者所有，禁止商业用途转载。【转载请注明来源】本文作者：唐霜，转载请注明出处。

另外需要注意一点，任务队列不是“队列”，本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。而是“set”（集合）。这在WHATWG的标准原创内容，盗版必究。文件中说的很清楚，“因为事件循环执行模式【版权所有】唐霜 www.tangshuang.net【本文受版权保护】的第一步，是从被选中的队列中，抓取第一个著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】可以被执行的任务，而非弹出队列头部（也就【作者：唐霜】本文作者：唐霜，转载请注明出处。是队列先进先出模式）第一个任务。”也就是原创内容，盗版必究。原创内容，盗版必究。说，浏览器的任务队列并不是完全按照队列的【原创不易，请尊重版权】【版权所有，侵权必究】模式执行，而是有选择的，按照一定条件先选转载请注明出处：www.tangshuang.net原创内容，盗版必究。一个队列（浏览器中会有多个队列），然后从本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net该队列中选第一个可以被执行的任务（即使有本文版权归作者所有，未经授权不得转载。【本文受版权保护】任务更靠前，但它可能目前还不能被执行）。转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net那么，什么是事件循环呢？

事件循环（Event Loop）【访问 www.tangshuang.net 获取更多精彩内容】

本文版权归作者所有，未经授权不得转载。【本文受版权保护】著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。【作者：唐霜】

现在，我们来到了本文最核心的目标。事件循【转载请注明来源】【本文首发于唐霜的博客】环，实际上，是浏览器从任务队列中如何取出本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】一个任务，丢到执行栈中，当执行栈重新变空【作者：唐霜】【作者：唐霜】之后，又如何运作的一套模式。事件循环被放【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net在另外一个独立线程中运行。它的主要工作，【版权所有，侵权必究】未经授权，禁止复制转载。是按照一定逻辑从任务队列中取任务，交给j【未经授权禁止转载】未经授权，禁止复制转载。s主线程放入执行栈中执行，在执行栈为空之原创内容，盗版必究。【原创内容，转载请注明出处】后，又执行这一个过程。

while (queue.waitForMessage()) {
  queue.processNextMessage()
}

它是一个无限执行的“死循环”，一直在监控原创内容，盗版必究。原创内容，盗版必究。着执行栈和任务队列的情况，并做着搬运工一【转载请注明来源】本文版权归作者所有，未经授权不得转载。般的工作。这也就是为什么它叫“事件循环”本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。这个名字的原因。

本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】【作者：唐霜】【本文首发于唐霜的博客】

但是，宏观上，我们把上图中整个系统称为“【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】事件循环机制”的全貌，而不是把仅存在于任转载请注明出处：www.tangshuang.net【本文受版权保护】务队列和执行栈之间的这个控制逻辑称为事件【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。循环。也就是说，我们日常讨论中，包含js本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net主线程、Web API任务线程（网络I/本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。O所使用的线程和定时器所使用的线程，可能【未经授权禁止转载】【本文受版权保护】不是同一个）、任务队列线程等等相关的东西【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net，全部集合到一个概念里面，这个概念就是“【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。事件循环”。

宏任务与微任务转载请注明出处：www.tangshuang.net

转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】【本文受版权保护】

在事件循环中，由js所产生的新任务，被放【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。到任务队列中。但是，我们前面讲过了，任务【作者：唐霜】未经授权，禁止复制转载。队列不只一个。理论上讲，我认为最少需要3本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】个任务队列：宏任务队列、ui渲染任务队列本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】、微任务队列。那么，什么是宏任务（mac【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】rotask），什么是微任务（micro【版权所有，侵权必究】【本文首发于唐霜的博客】task）呢？

别急，在此之前，我们先解释一下，为啥ui【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net渲染也要占一个任务队列。大家都听说过帧的转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】问题，由于屏幕刷新来渲染界面变动，所以新【本文受版权保护】本文版权归作者所有，未经授权不得转载。界面渲染必须在下一次刷新之前准备好要渲染【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。的内容。我们也听过16ms的帧率。那是浏【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。览器按屏幕1分钟刷新1000次的频率设计【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。的。我们可以通过调用requestAni【未经授权禁止转载】【本文首发于唐霜的博客】mationFrame来利用这个任务队列未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net完成一些需要按照刷新率来实现的周期性任务【原创内容，转载请注明出处】【作者：唐霜】。

那么什么是宏任务呢？在js脚本中，通过调【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。用setTimeout, DOM事件绑定著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。，网络I/O等，由js产生的新任务，被称原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。为宏任务。宏任务队列可能有多个，理论上，【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。不同类型的宏任务（由不同Web API完著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。成的）会被放在不同的宏任务队列中，它们是转载请注明出处：www.tangshuang.net【版权所有，侵权必究】并列的，所以，当你同时执行一个setTi【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】meout和一个fetch的时候，你是不【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。知道它们的回调是会谁先执行的，这个是无法转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net控制的，事件循环在选择使用哪一个宏任务队【作者：唐霜】【关注微信公众号：wwwtangshuangnet】列时，主要是看宏任务队列中的任务是否可被【转载请注明来源】【本文首发于唐霜的博客】执行，如果存在极端情况，比如多个宏任务队【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】列的任务都可以被执行，那么具体挑选哪个任著作权归作者所有，禁止商业用途转载。【作者：唐霜】务执行具有运气成分，但这种情况一般很少见著作权归作者所有，禁止商业用途转载。【本文受版权保护】，即使出现，也无所谓。

未经授权，禁止复制转载。原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。

宏任务就是我们上文反复提到的任务。【未经授权禁止转载】

著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。

那么，微任务呢？微任务也是由js执行过程【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。中产生的新任务，但是它有很大的不同。“微本文版权归作者所有，未经授权不得转载。【转载请注明来源】任务队列不是（宏）任务队列”，这是WHA未经授权，禁止复制转载。【原创内容，转载请注明出处】TWG标准文档里面的一句话。宏任务队列可著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】能有多个，而微任务队列，至始至终只有一个【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】。所以，微任务的执行，和队列的执行模式一著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】模一样，它不挑剔。微任务是怎么产生的呢？【版权所有，侵权必究】【转载请注明来源】它的产生和宏任务也是一样的，只是产生方式本文版权归作者所有，未经授权不得转载。【本文受版权保护】不同，通过Promise.then/ca本文版权归作者所有，未经授权不得转载。【转载请注明来源】tch, MutationObserve转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。r产生的都是微任务。

【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】

上面提到，事件循环会在执行栈重新变空之后转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】，取出一个新任务压入栈中执行。但是，实际【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】上，宏任务和微任务在这个里面执行时机不同【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】。事件循环机制，会在每执行完一个宏任务之转载请注明出处：www.tangshuang.net原创内容，盗版必究。后，立即在微任务队列中取出第一个微任务进著作权归作者所有，禁止商业用途转载。【作者：唐霜】行执行，这个微任务执行完之后，还会继续在【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】微任务队列中取出第一个执行，值到微任务队【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】列中不再有微任务为止，才会重新到宏任务队【原创不易，请尊重版权】原创内容，盗版必究。列中取宏任务执行。

本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】

微任务队列必须在每一个宏任务执行完之后被著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。消费空。

另外一个事实是，在这些新任务中产生的宏任【原创不易，请尊重版权】【转载请注明来源】务，会被加入到宏任务队列，新产生的微任务本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。会被加入到微任务队列。这里面就会出现一种原创内容，盗版必究。【原创内容，转载请注明出处】情况，无论是宏任务，还是微任务，都可能产本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。生新的微任务。如果持续不断的在微任务队列【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】被消费干净之前产生微任务，那么宏任务永远著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】没有机会被执行。一定要避免这种情况发生。

【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。

转载请注明出处：www.tangshuang.net【作者：唐霜】未经授权，禁止复制转载。【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。

当然，视频中还有一些描述不当的地方。但主原创内容，盗版必究。【未经授权禁止转载】要演示了宏任务微任务带来的执行时序效果。

小结原创内容，盗版必究。

著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。

本文详细阐述了浏览器中的事件循环机制，虽本文作者：唐霜，转载请注明出处。【作者：唐霜】然细节处可能还不够具体，但是在整体上，已【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。经足以让你了解事件循环究竟是怎么一回事了本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】。可以说，事件循环机制是让js在浏览器中【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。实现异步编程的核心驱动，没有事件循环应该本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。也就没有js异步编程了。在php编程中，著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】由于没有内置的事件循环，让php异步编程【转载请注明来源】【原创不易，请尊重版权】变得非常复杂，甚至还要依赖第三方服务才能【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net完成，然而，在js所有运行环境中，都支持转载请注明出处：www.tangshuang.net原创内容，盗版必究。事件循环，包括nodejs和quickj未经授权，禁止复制转载。【原创内容，转载请注明出处】s。现在，我们再回头问，为什么叫“事件循【原创内容，转载请注明出处】【本文首发于唐霜的博客】环”，“循环”这个点我想你已经了解了，关【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】于“事件”，你会发现，实际上有关 Web【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。 API的操作，都是一个“订阅事件-发布未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。事件消息”的过程，因此，MDN会把Web转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】 API完成自身操作通知给主线程的东西（【原创内容，转载请注明出处】未经授权，禁止复制转载。也就是推到任务队列中的东西）叫做“消息”【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】，它是基于I/O操作等已经完成这个“事件著作权归作者所有，禁止商业用途转载。【作者：唐霜】”而给出的。同样的道理，在“栈执行完毕已转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net经清空”这个事件上，它也给出了“到任务队【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net列中取任务过来执行”的消息。将这些东西综著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】合起来理解，或许我们就可以加深其印象了。转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】而且，还有一个点，如果将“执行栈”脱离“著作权归作者所有，禁止商业用途转载。【本文受版权保护】事件循环”这个话题单独来讲，其实没什么意【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】义。为什么要设计一个栈结构呢？说到底，是【转载请注明来源】原创内容，盗版必究。为了当栈被重新清空时，可以发出一个消息，【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。让事件循环可以从队列中取出新任务来执行。未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net如果不是为了实现这个目的，设计一个栈显得本文作者：唐霜，转载请注明出处。原创内容，盗版必究。毫无意义。如果你对文章中的问题有疑问或觉本文作者：唐霜，转载请注明出处。原创内容，盗版必究。得不足，欢迎在下方评论区给我留言。<本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】;完>

【本文首发于唐霜的博客】【原创不易，请尊重版权】【作者：唐霜】未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。【转载请注明来源】【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。【本文受版权保护】【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。原创内容，盗版必究。【本文受版权保护】【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】【原创不易，请尊重版权】【转载请注明来源】转载请注明出处：www.tangshuang.net【转载请注明来源】【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】原创内容，盗版必究。原创内容，盗版必究。转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net原创内容，盗版必究。本文作者：唐霜，转载请注明出处。原创内容，盗版必究。未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】【本文首发于唐霜的博客】【作者：唐霜】【本文受版权保护】本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】

2020-03-11 5142 事件循环, 队列

唐霜

浏览器事件循环机制