event loop它的执行顺序:
- 一开始整个脚本作为一个宏任务执行
- 执行过程中同步代码直接执行,宏任务进入宏任务队列,微任务进入微任务队列
- 当前宏任务执行完出队,检查微任务列表,有则依次执行,直到全部执行完
- 执行浏览器UI线程的渲染工作
- 检查是否有
Web Worker任务,有则执行 - 执行完本轮的宏任务,回到2,依此循环,直到宏任务和微任务队列都为空
微任务包括: MutationObserver、Promise.then()或catch()、Promise为基础开发的其它技术,比如fetch API、V8的垃圾回收过程、Node独有的process.nextTick。
宏任务包括:script 、setTimeout、setInterval 、setImmediate 、I/O 、UI rendering。
个人理解 :
console.log(1)
//同步任务第一个执行 打印数字 1
asnyc function async1(){
console.log(5)
await ()=>{ console.log(6) }
console.log(7)
//asnyc依旧是同步的 所以同步任务第2个执行 打印数字 5
//await 之后的函数依旧是同步的 所以打印数字6
//但是在await下一行的所有代码 划重点 是所有! 就会进入微任务队列 这两行函数相当于这样写
new promise(res => {
console.log(6)
}).then(re => {
//进入微任务队列 打印数字7
console.log(7)
})
}
async1() //async函数执行
setTimeout(()=>{
console.log(4)
//定时器是宏任务 加入宏任务队列 所以最后一个执行 打印数字 4
})
new promise(res=>{
//Promise是同步函数 所以执行打印数字 2
console.log(2)
resolve(3)
//将数字3当做返回值丢给then方法
}).then(re=>{
//.then 是微任务 加入微任务队列 等待执行栈中同步任务执行完毕就执行 打印数字 3
console.log(re)
})
结果:
1
5
6
2
7
3
4
先执行所有的同步任务 然后异步任务进入任务队列中 又分为宏任务与微任务 微任务执行在宏任务之前 JS是由上至下执行的 !!! 记住是由上之下执行 记住哪些是宏任务 哪些是微任务 同步任务做完了就去做微任务 微任务做完了就做宏任务 就这样一直微任务宏任务切换了
第一段借鉴以下文章 讲的很通透 还有特别多习题 帮助你稳固学习的知识 强烈推荐 链接:juejin.cn/post/684490…