事件循环与宏任务与微任务学习笔记

176 阅读2分钟

event loop它的执行顺序:

  • 一开始整个脚本作为一个宏任务执行
  • 执行过程中同步代码直接执行,宏任务进入宏任务队列,微任务进入微任务队列
  • 当前宏任务执行完出队,检查微任务列表,有则依次执行,直到全部执行完
  • 执行浏览器UI线程的渲染工作
  • 检查是否有Web Worker任务,有则执行
  • 执行完本轮的宏任务,回到2,依此循环,直到宏任务和微任务队列都为空

微任务包括: MutationObserverPromise.then()或catch()Promise为基础开发的其它技术,比如fetch APIV8的垃圾回收过程、Node独有的process.nextTick

宏任务包括scriptsetTimeoutsetIntervalsetImmediateI/OUI 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…