前端 | JS 任务和微任务:promise 的回调和 setTimeout 的回调到底谁先执行?
首先提一个小问题:运行下面这段 JS 代码后控制台的输出是什么?
console.log("script start");
setTimeout(function () {
console.log("setTimeout1");
}, 0);
new Promise((resolve, reject) => {
setTimeout(function () {
console.log("setTimeout2");
resolve();
}, 100);
}).then(function () {
console.log("promise1");
});
Promise.resolve()
.then(function () {
console.log("promise2");
})
.then(function () {
console.log("promise3");
});
console.log("script end");
可以先尝试自己分析一下结果,然后再看答案:
script start
script end
promise2
promise3
setTimeout1
setTimeout2
promise1
怎么样,你猜对了吗?如果对这个输出结果感到很迷惑,这篇文章或许可以帮到你。
PS:文中按照标准分析理论结果,但实际上各个浏览器对任务队列的支持情况很混乱,所以如果你在浏览器执行代码后发现结果不同也不必纠结;总体来说 Chrome 的支持比较好。
如果对 Promise 的用法还不熟悉,可以看我的上一篇博客:前端 | JS Promise:axios 请求结果后面的 .then() 是什么意思?
任务 VS 微任务
JavaScript 设计的本质是单线程语言,但随着硬件性能的飞速发展,纯单线程已经不太能够满足需求了。因此 JS 逐渐发展出了任务和微任务,来模拟实现多线程。
浏览器中,对于每个网页(有时也可能是多个同源网页),网页的代码和浏览器自身的用户界面程序运共享同一个主线程,它除了运行浏览器交给它的 JS 代码,也负责收集和派发事件、渲染和绘制网页内容等等。因此,如果主线程中的某个任务阻塞了,其他任务都会受到影响;这就是为什么有时候网页代码出现了错误会导致整个网页渲染失败。
每个主线程都由一个事件循环 Event loops 驱动。事件循环可以理解为一个任务队列,JS 引擎不断的进行“循环-等待”,按顺序处理队列中的任务。事件循环中的任务称作“任务 Task”,由宿主环境(浏览器)创建;每个任务都是宿主计划执行的 JavaScript 代码,如程序初始化、解析HTML、事件触发的回调(例如点击网页上的按钮),或是由 setTimeout()
setInterval()
等 API 添加的回调函数。
JS 引擎在执行一个任务的过程中,有时会进行一些异步操作,不会立即执行,但又想在同一个任务中完成、不留到事件循环中的下一个任务里;例如常用的 promise、监控 DOM 的回调等。这时,JS 引擎会创建一个“微任务 Mircotask”,并加入当前的微任务队列中。(有时为了区分,也把任务task称为“宏任务”。)
事件循环、任务、微任务的示意图如下:
执行过程
一个主线程的执行过程如下:
- 拿出事件循环中的下一个任务
- 执行任务本身的 Script 代码;期间可能会往任务队列、微任务队列创建添加新任务
- script 执行完后,检查微任务队列
- 如果有微任务,顺序执行,期间可能还会创建新的任务和微任务
- 如果微任务队列为空,这个任务执行结束,回到第一步
可以看出,在一个任务中会反复检查微任务队列,直到没有微任务存在了才会执行下一个任务。因此在任务脚本和微任务脚本中创建的所有微任务都会在这个任务结束前执行,同时也意味着会早于其他所有创建的任务执行(因为新建的任务都加入了任务队列)。
![未命名文件 (https://i.loli.net/2021/04/03/ZBNdi56S4PcYekw.png)](../../../Download/未命名文件 (1).jpg)
案例分析
明白了任务和微任务的区别,下面再来看文章开头的例子:
console.log("script start");
setTimeout(function () {
console.log("setTimeout1");
}, 0);
new Promise((resolve, reject) => {
setTimeout(function () {
console.log("setTimeout2");
resolve();
}, 100);
}).then(function () {
console.log("promise1");
});
Promise.resolve()
.then(function () {
console.log("promise2");
})
.then(function () {
console.log("promise3");
});
console.log("script end");
接下来逐步跟踪代码的执行过程;如果感觉文字不够直观,可以看这篇博客中给出的逐步执行动画。
整个 Script 会被宿主环境传给 JS 引擎,作为任务队列中的一个任务;首先执行任务中的脚本代码:
- line1:
console.log("script start")
是同步代码,直接输出 - line3: 执行
setTimeout()
,在0秒后将console.log("setTimeout1");
加入任务队列 - line8: 执行
setTimeout()
,在0.1秒后将console.log("setTimeout2");
和resolve()
加入任务队列 - line16: 返回一个已成功的 promise,第一个 then 回调被加入微任务队列
- line24:
console.log("script end")
是同步代码,直接输出 - 任务 script 执行完毕
此时:
- 控制台输出了
script start
script end
- 任务队列中(除当前任务以外)有2个任务(两个
setTimeout()
的回调按时间先后顺序排列) - 微任务队列中有1个任务(promise 的回调)
接下来检查微任务队列,执行队首的微任务:
console.log("promise2")
输出- 隐式 return,相当于返回一个
Promise.resolve(undefined)
;因此 Promise 链中的下一个 then 回调被加入微任务队列 - 微任务执行完毕
此时:
- 控制台输出了
script start
script end
promise2
- 任务队列中(除当前任务以外)有2个任务(两个
setTimeout()
的回调按时间先后顺序排列) - 微任务队列中有1个任务(第二个 promise 回调)
再次检查微任务队列,执行队首的微任务:
console.log("promise3")
输出- 隐式 return(但此时 Promise 链已经结束了,所以无事发生)
- 微任务执行完毕
此时:
- 控制台输出了
script start
script end
promise2
promise3
- 任务队列中(除当前任务以外)有2个任务(两个
setTimeout()
的回调按时间先后顺序排列) - 微任务队列为空
检查微任务队列,发现没有微任务了,当前任务结束;开始执行任务队列中的下一个任务(0秒后执行的回调):
console.log("setTimeout1");
输出- 任务 script 执行完毕
此时:
- 控制台输出了
script start
script end
promise2
promise3
setTimeout1
- 任务队列中(除当前任务以外)有1个任务
- 微任务队列为空
检查微任务队列,发现没有微任务,当前任务结束;开始执行任务队列中的下一个任务(0.1秒后执行的回调):
console.log("setTimeout2");
输出resolve();
将 promise 的状态更改为已成功;then 回调被加入微任务队列- 任务 script 执行完毕
此时:
- 控制台输出了
script start
script end
promise2
promise3
setTimeout1
setTimeout2
- 任务队列中只有当前任务
- 微任务队列中有一个任务(promise 的回调)
检查微任务队列,执行队首的微任务:
console.log("promise1")
输出- 隐式 return(但此时 Promise 链已经结束了,所以无事发生)
- 微任务执行完毕
此时:
- 控制台输出了
script start
script end
promise2
promise3
setTimeout1
setTimeout2
promise1
- 任务队列中只有当前任务
- 微任务队列为空
检查微任务队列,发现没有微任务,当前任务结束。任务队列中没有其他任务,执行完毕。
结语 & 参考资料
异步操作已经是平时开发过程中不可避免经常会遇到的用法了,平时都是马马虎虎的用,最近终于认真学习了一下,感觉颇有收获。不过话说回来,理论学习和实际开发毕竟存在差异。首先各种浏览器的支持只能说是惨不忍睹,所以真实开发过程中不能太过依赖理论分析的结果,需要实际测试代码功能的兼容性;另一方面,过于复杂的嵌套异步操作,容易造成没必要的错误,同时导致代码很难理解和维护,能不用最好不用,KISS。
以上是个人学习JS的任务/微任务机制时的一些思考和总结,希望能对你有所帮助;文中可能存在疏漏和错误,敬请讨论和指正。
Tasks, microtasks, queues and schedules
前端 | JS 任务和微任务:promise 的回调和 setTimeout 的回调到底谁先执行?的更多相关文章
- 详解回调函数——以JS为例解读异步、回调和EventLoop
回调,是非常基本的概念,尤其在现今NodeJS诞生与蓬勃发展中变得更加被人们重视.很多朋友学NodeJS,学很久一直摸不着门道,觉得最后在用Express写Web程序,有这样的感觉只能说明没有学懂 ...
- 前端 | JS Promise:axios 请求结果后面的 .then() 是什么意思?
Promise 是JS中一种处理异步操作的机制,在现在的前端代码中使用频率很高.Promise 这个词可能有点眼生,但你肯定见过 axios.get(...).then(res => {...} ...
- 前端JS基础知识
1. 原型 / 构造函数 / 实例 原型(prototype): 一个简单的对象,用于实现对象的 属性继承.可以简单的理解成对象的爹.在 Firefox 和 Chrome 中,每个JavaScript ...
- 前端Js框架汇总
概述: 有些日子没有正襟危坐写博客了,互联网飞速发展的时代,技术更新迭代的速度也在加快.看着Java.Js.Swift在各领域心花路放,也是煞是羡慕.寻了寻.net的消息,也是振奋人心,.net co ...
- 2015 前端[JS]工程师必知必会
2015 前端[JS]工程师必知必会 本文摘自:http://zhuanlan.zhihu.com/FrontendMagazine/20002850 ,因为好东东西暂时没看懂,所以暂时保留下来,供以 ...
- [ 学习路线 ] 2015 前端(JS)工程师必知必会 (2)
http://segmentfault.com/a/1190000002678515?utm_source=Weibo&utm_medium=shareLink&utm_campaig ...
- 前端Js框架 UI框架汇总 特性 适用范围 选择
身为一个资深后端工程师,面对层出不穷的前端框架,总让人眼花缭乱,做一个综合解析贴,从全局着眼,让我们明白各种前端框架的应用范围,为如何选择前端框架,从不同的维度提供一些线索,做为一个长期优化贴,欢迎指 ...
- 前端Js框架汇总【转】
概述: 有些日子没有正襟危坐写博客了,互联网飞速发展的时代,技术更新迭代的速度也在加快.看着Java.Js.Swift在各领域心花路放,也是煞是羡慕.寻了寻.net的消息,也是振奋人心,.net co ...
- WEB前端JS与UI框架
前端Js框架汇总 概述: 有些日子没有正襟危坐写博客了,互联网飞速发展的时代,技术更新迭代的速度也在加快.看着Java.Js.Swift在各领域心花路放,也是煞是羡慕.寻了寻.net的消息,也是振奋人 ...
随机推荐
- ES2021 & Pipeline operator (|>) / 管道运算符 |>
ES2021 & Pipeline operator (|>) / 管道运算符 |> demo "use strict"; /** * * @author xg ...
- BPMN 2.0
BPMN 2.0 Business Process Model and Notation 业务流程模型和符号 https://www.omg.org/spec/BPMN/2.0.2/ bpmn-js ...
- auto responsive rem
auto responsive rem 移动端适配 ;(function(win, lib) { var doc = win.document; var docEl = doc.documentEle ...
- npm & package.json & directories & files
npm & package.json & directories & files package.json https://docs.npmjs.com/files/packa ...
- 千万不要错过VAST,NGK算力的下一个财富机会!
我们把目光投向NGK市场,近来,NGK接连新币,推出了SPC后,又有VAST.在目前市场上债券收益率已经趋近于零的情况下,世界上的大多数央行都在试图让本国货币贬值,所以在此时寻找其他保值资产是合理的. ...
- 「NGK每日快讯」12.11日NGK公链第38期官方快讯!
- PBN离场定高转弯保护区插件发布测试
昨天2月29日,是四年才有一次的日子,本想着应该写点什么,但一测试发现还有问题,只能先放下. 今天是三月份的第一天,一年已经过去了六分之一.疫情的关系,原本并不紧急的工作,现在也开始积压的有些多了,时 ...
- 【函数分享】每日PHP函数分享(2021-2-19)
array_diff_uassoc - 用用户提供的回调函数做索引检查来计算数组的差集 说明 array_diff_uassoc ( array $array1 , array $array2 , a ...
- HTTP 1.x 学习笔记 —— Web 性能权威指南
HTTP 1.0的优化策略非常简单,就一句话:升级到HTTP 1.1.完了! 改进HTTP的性能是HTTP 1.1工作组的一个重要目标,后来这个版本也引入了大量增强性能的重要特性,其中一些大家比较熟知 ...
- 手把手教你手写一个最简单的 Spring Boot Starter
欢迎关注微信公众号:「Java之言」技术文章持续更新,请持续关注...... 第一时间学习最新技术文章 领取最新技术学习资料视频 最新互联网资讯和面试经验 何为 Starter ? 想必大家都使用过 ...