事件队列、微任务与宏任务的理解和面试题

事件队列是一种数据结构,可以存放要执行的任务。它符合队列"先进先出"的特点。

事件循环中并非只维护着一个队列,事实上是有两个队列:

  • 宏任务队列(macrotask queue): ajax、setTimeout、setInterval、DOM监听、UI Rendering等
  • 微任务队列(microtask queue): Promise的then回调、Mutation Observer API、queueMicrotask()

事件循环对于两个队列的优先级是怎么样的?

1.main script中的代码优先执行;

2.在执行任何一个宏任务之前(不是队列,是一个宏任务),都会先查看微任务队列中是否有任务需要执行

        也就是宏任务执行之前,必须保证宏任务队列是空的;

        如果不为空,那么就优先执行微任务队列中的任务(回调);

Promise面试题一

      setTimeout(function(){
        console.log("setTimeout1");

        new Promise(function (resolve){
          resolve()
        }).then(function(){
          new Promise(function(resolve){
            resolve()
          }).then(function(){
            console.log("then4");
          })
          console.log("then2");
        })
      })

      new Promise(function(resolve){
        console.log("promise1");
        resolve()
      }).then(function(){
        console.log("then1");
      })

      setTimeout(function(){
        console.log("setTimeout2");
      })
      console.log(2);

      queueMicrotask(()=> {
        console.log("queueMicrotask");
      })

      new Promise(function(resolve){
        resolve()
      }).then(function() {
        console.log("then3");
      })

promise async await面试题二

      async function async1() {
        console.log("async1 start");
        await async2()
        console.log("async1 end");
      }
      async function async2() {
        console.log("async2");
      }
      console.log("script start");

      setTimeout(function(){
        console.log("setTimeout")
      }, 0)

      async1()

      new Promise( function (resolve) {
        console.log("promise");
        resolve()
      }).then(function(){
        console.log("promise2");
      })

      console.log("script end");

猜你喜欢

转载自blog.csdn.net/m0_51636525/article/details/125542012