浏览器的任务队列-宏任务、微任务的执行顺序

重点:

1、首先要清楚常见的宏任务和微任务有哪些

宏任务:setTimeout、setInterval、ajax;

微任务:promise、async/await

2、其次要清楚的是  微任务 执行时机比 宏任务  早

1、微任务和宏任务的执行规则

 此处需要注意的是,当所有微任务执行完毕后才会取出一个宏任务执行,宏任务中存在微任务的话还是需要将所有微任务执行完在取出一个宏任务继续执行。

2、JS运行机制

此处不做过多介绍,主要注意以下几点:

  1. js是单线程,所谓单线程就是指JS在引擎中只负责解释和执行JS代码的线程只有一个。这点事核心,将来也不会改变。
  2. 同步任务会在调用栈中按照顺序等待主线程一次执行;异步任务会在异步任务有了结果后,将注册的回调函数放在任务队列中,等待主线程空闲的时候,被读取到栈内等待主线程的执行
  3. Promise本身事同步的立即执行函数他的.then()和catch()方法是异步的(微任务)
  4. async/await是建立在Promise机制上,当调用一个async函数时,会返回一个promise对象,而await操作符后面的表达式就是这个promise,返回值实际上就是peomise的回调函数resolve的参数。
  5. async方法执行时,遇到await会立即执行表达式,async表达式定义的函数是立即执行的await表达式后面的代码放在微任务执行,包括赋值。

以下举几个例子

async function test1() {
    console.log("test1 begin");
    const result = await test2();
    console.log("result", result);
    console.log("test1 end");
  }
  async function test2() {
    console.log("test2");
  }
  console.log("script begin");
  test1();
  console.log("script end");

控制台打印:

 前面注意事项5中说了,async方法执行时,遇到await会立即执行表达式,所有第三次输出应该是test2。await后面的代码将放在微任务中排队。

结果: 1 4 7 5 2 3 6

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值