详解JavaScript事件循环机制
众所周知,javascript 是一门单线程语言,虽然在 html5 中提出了 web-worker ,但这并未改变 javascript 是单线程这一核心。可看html规范中的这段话:
to coordinate events, user interaction, scripts, rendering, networking, and so forth, user agents must use event loops as described in this section. there are two kinds of event loops: those for browsing contexts, and those for workers.
为了协调事件、用户交互、脚本、ui 渲染和网络处理等行为,用户引擎必须使用 event loops。event loop 包含两类:一类是基于 browsing context ,一种是基于 worker ,二者是独立运行的。 下面本文用一个例子,着重讲解下基于 browsing context 的事件循环机制。
来看下面这段 javascript 代码:
console.log('script start'); settimeout(function() { console.log('settimeout'); }, 0); promise.resolve().then(function() { console.log('promise1'); }).then(function() { console.log('promise2'); }); console.log('script end');
先猜测一下这段代码的输出顺序是什么,再去浏览器控制台输入一下,看看实际输出的顺序和你猜测出的顺序是否一致,如果一致,那就说明,你对 javascript 的事件循环机制还是有一定了解的,继续往下看可以巩固下你的知识;而如果实际输出的顺序和你的猜测不一致,那么本文下面的部分会为你答疑解惑。
任务队列
所有的任务可以分为同步任务和异步任务,同步任务,顾名思义,就是立即执行的任务,同步任务一般会直接进入到主线程中执行;而异步任务,就是异步执行的任务,比如ajax网络请求,settimeout 定时函数等都属于异步任务,异步任务会通过任务队列( event queue )的机制来进行协调。具体的可以用下面的图来大致说明一下:
同步和异步任务分别进入不同的执行环境,同步的进入主线程,即主执行栈,异步的进入 event queue 。主线程内的任务执行完毕为空,会去 event queue 读取对应的任务,推入主线程执行。 上述过程的不断重复就是我们说的 event loop (事件循环)。
在事件循环中,每进行一次循环操作称为tick,通过阅读规范可知,每一次 tick 的任务处理模型是比较复杂的,其关键的步骤可以总结如下:
- 在此次 tick 中选择最先进入队列的任务( oldest task ),如果有则执行(一次)
- 检查是否存在 microtasks ,如果存在则不停地执行,直至清空microtask queue
- 更新 render
主线程重复执行上述步骤
可以用一张图来说明下流程:
这里相信有人会想问,什么是 microtasks ?规范中规定,task分为两大类, 分别是 macro task (宏任务)和 micro task(微任务), 并且每个宏任务结束后, 都要清空所有的微任务,这里的 macro task也是我们常说的 task ,有些文章并没有对其做区分,后面文章中所提及的task皆看做宏任务( macro task)。
(macro)task 主要包含:script( 整体代码)、settimeout、setinterval、i/o、ui 交互事件、setimmediate(node.js 环境)
microtask主要包含:promise、mutaionobserver、process.nexttick(node.js 环境)
settimeout/promise 等api便是任务源,而进入任务队列的是由他们指定的具体执行任务。来自不同任务源的任务会进入到不同的任务队列。其中 settimeout 与 setinterval 是同源的。
分析示例代码
千言万语,不如就着例子讲来的清楚。下面我们可以按照规范,一步步执行解析下上面的例子,先贴一下例子代码(免得你往上翻)。
console.log('script start'); settimeout(function() { console.log('settimeout'); }, 0); promise.resolve().then(function() { console.log('promise1'); }).then(function() { console.log('promise2'); }); console.log('script end');
整体 script 作为第一个宏任务进入主线程,遇到 console.log,输出 script start
- 遇到 settimeout,其回调函数被分发到宏任务 event queue 中
- 遇到 promise,其 then函数被分到到微任务 event queue 中,记为 then1,之后又遇到了 then 函数,将其分到微任务 event queue 中,记为 then2
- 遇到 console.log,输出 script end
至此,event queue 中存在三个任务,如下表:
宏任务 | 微任务 |
---|---|
settimeout | then1 |
- | then2 |
- 执行微任务,首先执行then1,输出 promise1, 然后执行 then2,输出 promise2,这样就清空了所有微任务
- 执行 settimeout 任务,输出 settimeout 至此,输出的顺序是:script start, script end, promise1, promise2, settimeout
so,你猜对了吗?
看看你掌握了没
再来一个题目,来做个练习:
console.log('script start'); settimeout(function() { console.log('timeout1'); }, 10); new promise(resolve => { console.log('promise1'); resolve(); settimeout(() => console.log('timeout2'), 10); }).then(function() { console.log('then1') }) console.log('script end');
这个题目就稍微有点复杂了,我们再分析下:
首先,事件循环从宏任务 (macrotask) 队列开始,最初始,宏任务队列中,只有一个 scrip t(整体代码)任务;当遇到任务源 (task source) 时,则会先分发任务到对应的任务队列中去。所以,就和上面例子类似,首先遇到了console.log,输出 script start; 接着往下走,遇到 settimeout 任务源,将其分发到任务队列中去,记为 timeout1; 接着遇到 promise,new promise 中的代码立即执行,输出 promise1, 然后执行 resolve ,遇到 settimeout ,将其分发到任务队列中去,记为 timemout2, 将其 then 分发到微任务队列中去,记为 then1; 接着遇到 console.log 代码,直接输出 script end 接着检查微任务队列,发现有个 then1 微任务,执行,输出then1 再检查微任务队列,发现已经清空,则开始检查宏任务队列,执行 timeout1,输出 timeout1; 接着执行 timeout2,输出 timeout2 至此,所有的都队列都已清空,执行完毕。其输出的顺序依次是:script start, promise1, script end, then1, timeout1, timeout2
用流程图看更清晰:
总结
有个小 tip:从规范来看,microtask 优先于 task 执行,所以如果有需要优先执行的逻辑,放入microtask 队列会比 task 更早的被执行。
最后的最后,记住,javascript 是一门单线程语言,异步操作都是放到事件循环队列里面,等待主执行栈来执行的,并没有专门的异步执行线程。。