浏览器的任务队列-宏任务、微任务的执行顺序
重点:
1、首先要清楚常见的宏任务和微任务有哪些
宏任务:setTimeout、setInterval、ajax;
微任务:promise、async/await
2、其次要清楚的是 微任务 执行时机比 宏任务 早
1、微任务和宏任务的执行规则
此处需要注意的是,当所有微任务执行完毕后才会取出一个宏任务执行,宏任务中存在微任务的话还是需要将所有微任务执行完在取出一个宏任务继续执行。
2、JS运行机制
此处不做过多介绍,主要注意以下几点:
- js是单线程,所谓单线程就是指JS在引擎中只负责解释和执行JS代码的线程只有一个。这点事核心,将来也不会改变。
- 同步任务会在调用栈中按照顺序等待主线程一次执行;异步任务会在异步任务有了结果后,将注册的回调函数放在任务队列中,等待主线程空闲的时候,被读取到栈内等待主线程的执行
- Promise本身事同步的立即执行函数,他的.then()和catch()方法是异步的(微任务)
- async/await是建立在Promise机制上,当调用一个async函数时,会返回一个promise对象,而await操作符后面的表达式就是这个promise,返回值实际上就是peomise的回调函数resolve的参数。
- 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