都知道javascript是单线程,那么问题来了,既然是单线程顺序执行,那怎么做到异步的呢?
我们理解的单线程应该是这样的,排着一个个来,是同步执行。
现实中js是这样的
setTimeout(function() {
console.log(1);
});
new Promise(function(resolve, reject) {
console.log(2)
resolve(3)
}).then(function(val) {
console.log(val);
})
console.log(4)
//执行结果为 2、4、3、1
结果告诉我们,js是单线程没错,不过不是逐行同步执行。
那我们就来解析一下既然有异步,那顺序是怎样的?这些执行顺序规则就是理解eventLoop的要点,继续往下。
上图为我录制的chrome控制代码台执行顺序,虽然能看出执行顺序但我们还是懵逼的,我们不知道规则,不懂就要问。
搜索了很多官方、个人博客得到了一堆词:js引擎、主线程、事件表、事件队列、宏任务、微任务,彻底懵逼。。。
不急不急一个个来,我们进入刨根问底状态
js引擎
总结一句话就是解析优化代码 **制定执行规则 具体规则往下看
主线程
总结一句话执行js引擎优化并排列顺序后的代码
事件表(event table)
执行代码过程中,异步的回调,例如(setTimeout,ajax回调)注册回调事件到event table
事件队列
当事件回调结束,事件表(event table)会将事件移入到事件队列(event queue)
宏任务和微任务
宏任务包含的事件
事件 | 浏览器 | node |
---|---|---|
I/O | ✅ | ✅ |
setTimeout | ✅ | ✅ |
setInterval | ✅ | ✅ |
setImmediate | ❌ | ✅ |
requestAnimationFrame | ✅ | ❌ |
微任务包含的事件
事件 | 浏览器 | node |
---|---|---|
I/O | ✅ | ✅ |
process.nextTick | ❌ | ✅ |
MutationObserver | ✅ | ❌ |
Promise.then catch finally | ✅ | ✅ |
很多博客是这样说的:
浏览器会不断从task队列中按顺序取task执行,每执行完一个task都会检查microtask队列是否为空(执行完一个task的具体标志是函数执行栈为空),如果不为空则会一次性执行完所有microtask。然后再进入下一个循环去task队列中取下一个task执行
说实话不是太理解,那么我就以自己的方式去学习和理解
为了更好的理解我们再看代码
console.log('1');
setTimeout(function() {
console.log('2');
new Promise(function(resolve) {
console.log('3');
resolve();
}).then(function() {
console.log('4')
})
})
new Promise(function(resolve) {
console.log('5');
resolve();
}).then(function() {
console.log('6')
})
setTimeout(function() {
console.log('7');
new Promise(function(resolve) {
console.log('8');
resolve();
}).then(function() {
console.log('9')
})
})
//执行结果:1、5、6、2、3、4、7、8、9
有图为证我没骗你
再来个动图我们具体看看浏览器的执行顺序
首先js引擎,区分是直接执行(同步代码),再执行异步代码,如果是异步再区分是宏任务还是微任务,分别放入两个任务队列,然后开始执行,每执行完一个宏任务,扫一遍微任务队列并全部执行,此时形成一次eventLoop循环。以此规则不停的执行下去就是我们所听到的事件循环。
我再补充一点,可以理解js引擎一开始把整个script当做一个宏任务,这样里边的就更容易理解了,开始就执行script宏任务,解析到宏任务里边又包含同步代码和异步代码(宏任务和微任务)依次执行顺序形成eventLoop。
欢迎吐槽点赞评论!
文章参考学习:
https://www.jianshu.com/p/12b...
https://juejin.im/post/59e85e...
https://segmentfault.com/a/11...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。