摘要:本文通过结合官方文档MDN和其他博客深入解析浏览器的事件循环机制,而NodeJS有另一套事件循环机制,不在本文讨论范围中。process.nextTick和setImmediate是NodeJS的API,所以本文也不予讨论。 首先,先了解几个概念。 Javascript到底是单线程还是多线程语言?Javascript是一门单线程语言。相信应该有不少朋友对于Javascript是单线程语言还有些疑问(题外话:之前在某次面试中遇到一个面试官,一来就是“我们知道JS是一门多线程语言。。。”巴拉巴拉,当时就把我给愣住了。),不是有Web Worker可以创建多个线程吗?答案就是,Javascript是单线程的,但是他的运行环境不是单线程。要如何理解这句话,首先得从Javascript运行环境比如浏览器的多线程说起。 浏览器通常包含以下线程:
Web Worker是浏览器为Javascript提供的一个可以在浏览器后台开启一个新的线程的API(类似上面说到浏览器的多个线程),使Javascript可以在浏览器环境中多线程运行,但这个多线程是指浏览器本身,是它在负责调度管理Javascript代码,让他们在恰当时机执行。所以Javascript本身是不支持多线程的。 异步Javascript的异步过程通常是这样的:
这个过程有个问题,异步任务各任务的执行时间过程长短不同,执行完成的时间点也不同,主线程如何调控异步任务呢?这就引入了消息队列。 栈、堆、消息队列栈:函数调用形成的一个由若干帧组成的栈。 堆:对象被分配在堆中,堆是一个用来表示一大块(通常是非结构化的)内存区域。 消息队列:一个Javascript运行时包含了一个待处理消息的消息队列。每一个消息都关联着一个用来处理这个消息的回调函数。在事件循环期间,运行时会从最先进入队列的消息开始处理,被处理的消息会被移出队列,并作为输入参数来调用与之关联的函数。然后事件循环在处理队列中的下一个消息。 事件循环Event loop了解了上述要点,现在回到主题事件循环。那么Event loop到底是什么呢? Event loop是一个执行模型,在不同的地方有不同的实现。浏览器和NodeJS基于不同的技术实现了各自的Event loop。 一个事件循环里有很多个任务队列(task queues)来自不同任务源,每一个任务队列里的任务(task)都是严格按照先进先出的顺序执行的,但是不同任务队列的任务执行顺序是不确定的,浏览器会自己调度不同任务队列。也有地方把task称之为macrotask(宏任务)。 规范中还提到了microtask(微任务)的概念,以下是规范阐述的进程模型:
执行进入microtask检查点时,用户代理会执行以下步骤:
由上可总结为:在事件循环中,用户代理会不断从task队列中按顺序取task执行,每执行完一个task都会检查microtask队列是否为空(执行完一个task的具体标志时函数执行栈为空),如果不为空则会一次性执行完所有microtask。然后再进入下一个循环去task队列中取下一个task执行。 task/macrotask(宏任务)
microtask(微任务)
来看一个例子:
运行结果是:
那么问题来了,不是说每个事件循环开始会从task队列取最先进入的task执行,然后再执行所有microtask吗?为什么setTimeout是task却在Promise.then这个task的前面呢?反正我一开始是有这个疑惑的,很多文章都没有说清楚这个具体执行的顺序,大部分都是在描述规范的时候说的是“每个事件循环开始会从task队列中取一个task执行,然后再执行所有microtask”,但是也有部分文章说的是“每个事件循环开始都是先执行所有microtask”。经过本人多方查证,规范里的描述如上确实就是每个事件循环都是先执行task,那为什么上面例子里面体现出来的是先执行所有microtask呢? script(整体代码)属于task。 来看一下上面例子的详细执行过程:
这样是不是清楚了?所以实际上一开始执行script代码的时候就已经开始事件循环了,这就解释了为什么好像每次都是先执行所有的microtask。同时,这个例子中还引申出一个要点:在执行microtask任务的时候,如果又产生了新的microtask,那么会继续添加到队列的末尾,且也会在这个事件循环周期执行,直到microtask队列为空为止。 来源:https://www./content-4-835951.html |
|