标签：p1 浏览器 队列 s2 任务 循环 事件 清空 执行

浏览器中的事件循环是怎么进行的？

先看以下代码

setTimeout(()=>{
  console.log('s1')
  Promise.resolve().then(()=>{
    console.log('s2')
  })
  Promise.resolve().then(()=>{
    console.log('s3')
  })
})
Promise.resolve().then(()=>{
  console.log('p1')
  setTimeout(()=>{
    console.log('s2')
  })
  setTimeout(()=>{
    console.log('s3')
  })
})

上面的代码执行结果是怎么样的？
具体过程我们进行下面的分析

浏览器中事件分为宏任务和微任务

• setTimeout被归为宏任务，Promise.then则归为微任务

• 浏览器对宏任务和微任务的执行顺序是有规则的

  • 优先会将同步任务加入队列，微任务加入微任务队列，宏任务加入宏任务队列
  • 优先清空微任务队列，清空微任务后，执行下一个宏任务
  • 宏任务执行完成后，会再次去清空微任务队列，因为在宏任务中可能存在微任务，会被加入微任务队列
  • 再次清空了微任务队列后，会继续重复执行下一个宏任务然后清空微任务队列，直到所有队列都被清空

• 上面代码会按照以下步骤进行事件循环

  1. 首先浏览器会按从上到下的顺序执行所有同步代码，把宏任务和微任务分别放到不同的队列中
     上面代码中t1和p1是同步的，t1是宏任务，放到宏任务队列，p1是微任务，放到微任务队列

  

  2. 浏览器会优先执行微任务队列中的任务，所以p1会优先执行，此时p1被首先输出

  

  3. p1输出后，在微任务中发现还有两个宏任务s2和s3，这两个任务则被追加到宏任务队列中

  

  4. 微任务p1执行完成，弹出队列。此时微任务列队中没有任务了，开始执行宏任务队列中的第一个任务s1,此时输出s1,同时发现s1中还有两个微任务p2,p3,这两个任务则被按顺序添加到微任务队列中

  

  5. 此时s1执行完成，弹出队列，将开始执行微任务队列中的任务

  

  6. 此时微任务队列中有p2和p3两个任务，按照顺序执行，则会输出p2,p3，同时p2、p3弹出队列

  

  7. 此时微任务队列被清空，又会执行宏任务队列中的下一个宏任务，即s2，同理，s3与s2一样，两个任务按顺序依次输出s2、s3并弹出队列

  

  8. 最终结果就是依次输出p1、s1、p2、p3、s2、s3

标签：p1,浏览器,队列,s2,任务,循环,事件,清空,执行
来源： https://www.cnblogs.com/MissSage/p/15063951.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。