await/promise 宏任务 微任务 执行顺序

1eventloop

js是单线程,故同时只能执行一个任务,eventloop是保证执行事件不阻塞的一个事件执行机制。

js中分为同步任务和异步任务。异步任务又分为宏任务微任务

js主线程在执行代码时,首先执行同步任务,然后执行异步任务。在按照代码顺序执行时,主线程执行同步代码,遇到异步代码,判断宏任务还是微任务,将其注册事件,分别加入宏任务队列和微任务队列,同步代码执行完毕后,判断微任务队列是否有事件,若有,将微任务队列所有事件执行完毕,在按照先进先出的顺序执行的一个宏任务事件。

await 会让出线程,阻塞后面的代码执行,跳出执行外部的同步代码,执行完毕,会返回执行被阻塞的代码。

2.事件分类

宏任务:setTimeout/setInterval/ requestAnimationFrame的回调函数

微任务:promise.then()/process.nexttick中的回调函数

同步代码:console.log/settimeout/new promise()等

3执行顺序

执行顺序,先宏任务再微任务,主线程上执行的同步代码也算是一个宏任务。

无await:同步代码(主线程同步代码也是一个宏任务) ——》遇见宏任务将其加入宏任务队列,遇见微任务将加入微任务队列——》微任务队列所有任务——》(先进先出顺序)宏任务队列的某个任务() ——》遇见宏任务将其加入宏任务队列,遇见微任务将加入微任务队列  循环

有await:promise中执行resolve才会添加then()到微任务,否则不会,添加到微任务,并且await语句后的语句不会执行

同步代码(主线程同步代码也是一个宏任务)——》遇见宏任务将其加入宏任务队列,遇见微任务将加入微任务队列 ——》遇见调用async方法,执行async方法——》async方法中遇见await语句,执行await语句后的方法——》await后方法有promise.then()将其加入微任务队列——》跳出此时async方法——》执行外部同步代码(遇见宏任务将其加入宏任务队列,遇见微任务将加入微任务队列)——》同步代码执行完毕——》返回当时async方法,执行后续代码语句——》后续同步代码执行完毕——》z执行微任务队列所有任务——》执行宏任务队列某个任务 循环

                                                                                                             

猜你喜欢

转载自blog.csdn.net/qq_39692513/article/details/107716547
今日推荐