【刘建】JavaScript宏任务与微任务的原理解析
首先尝试写出这道题的答案
console.log('start')setTimeout(() => {
console.log('setTimeout')
}, 0)new Promise((resolve) => {
console.log('promise')
resolve()
})
.then(() => {
console.log('then1')
})
.then(() => {
console.log('then2')
})console.log('end')
正确答案如下
start、promise、end、then1、then2、setTimeout
其中涉及到事件循环(event loop),宏任务(macrotask),微任务(microtask);如果完全答对,可以不用看下面分析了。
JavaScript事件循环 同步任务
console.log()
new Promise()
异步任务
// 微任务
Promise后的then()
// 宏任务
setTimeout()
事件循环具体过程:
同步任务进入主线程,异步任务进入Event Table并注册函数。
当异步任务完成时,Event Table会将这个函数移入Event Queue。主线程内任务执行完毕执行栈为空时,会去Event Queue读取对应的函数,放入主线程执行。
上述过程会不断重复,也就是常说的Event Loop(事件循环)。
上述名词解释
代码中有两个线程:一个负责程序本身的运行,称为"主线程";另一个负责主线程与其他进程(主要是各种I/O操作)的通信,被称为"Event Loop线程"(可以译为"消息线程")。
所有任务可以分成两种,一种是同步任务(synchronous),另一种是异步任务(asynchronous)。
同步任务指的是,在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务;
异步任务指的是,不进入主线程、而进入"任务队列"(task queue)的任务,只有"任务队列"通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行。
JavaScript异步任务 异步任务包含两种:宏任务和微任务。
宏任务:DOM事件回调、AJAX事件回调、定时器回调
微任务:Promise、MutationObserver、node环境中还包括process.nextTick
js运行程序代码是同步的,但执行完所有同步代码后就执行异步代码;异步代码中每次执行宏任务代码前都先执行完微任务的代码后再执行。
宏任务与微任务的执行顺序
执行栈在执行完同步任务后,查看执行栈是否为空,如果执行栈为空,就会去检查微任务队列是否为空,如果为空的话,就执行宏任务,否则就一次性执行完所有微任务。 每次单个宏任务执行完毕后,检查微任务队列是否为空,如果不为空的话,会按照先入先出的规则全部执行完微任务后,设置微任务队列为null,然后再执行宏任务,如此循环。
文章图片
总结:同步—>微任务—>宏任务
一些额外知识 Promise构造函数是同步执行还是异步执行,那么then方法呢?
promise构造函数是同步执行的,then方法是异步执行的
const promise = new Promise((resolve, reject) => {
console.log(1)
resolve()
console.log(2)
})promise.then(() => {
console.log(3)
})console.log(5)
结果
1235
const promise = new Promise((resolve, reject) => {
console.log(1);
resolve(2);
console.log(3);
}).then(val => {
console.log(val);
});
promise.then(() => {
console.log(4);
});
console.log(5);
setTimeout(function() {
console.log(6);
});
结果
135246
Promise在new的时候会立即执行里面的代码,then是微任务,会在本次任务执行完的时候执行,setTimeout是宏任务,会在下次任务执行的时候执行。最后 【【刘建】JavaScript宏任务与微任务的原理解析】看更多技术文章,请搜索【刘建全栈技术】
推荐阅读
- 关于docker启动jenkins环境的问题
- 【SpringBoot实战】核心配置和注解
- 安全|渗透测试利器【Cobalt Strike】CDN隐匿
- 【实战】linux环境用node自动发送邮件(含echarts图),赶紧收藏
- CSSE2002/7023
- 高效使用Java构建工具,Maven篇|云效工程师指北
- 历史上的今天|【历史上的今天】4 月 1 日(首届图灵奖的获得者诞生;苹果电脑公司成立;Gmail 问世)
- Golang 远程调试工具Delve 安装使用
- 【北亚服务器数据恢复】EMC存储Raid5中2块硬盘损坏,热备盘未激活的数据恢复案例
- APP开发从0到1|初识IndexedDB【增,查】中