宏任务和微任务

事件循环概述

事件循环(Event Loop)是JavaScript 引擎用来处理异步任务的一种机制,主要由主线程任务队列组成。

js代码可分为同步任务异步任务同步任务主线程 顺序执行,而异步任务由异步进程处理后将回调函数放入任务队列,等待主线程读取调用。

主线程执行完当前的同步任务后,不断读取调用任务队列的回调函数,直到清空任务队列,该循环机制称为事件循环

宏任务和微任务

异步任务分为 宏任务(Macro task)微任务(micro task)

宏任务 (Macrotask) 微任务 (Microtask)
script(整体代码块) Promise.then/catch/finally
setTimeout async await
setInterval queueMicrotask
setImmditate MutationObserver(监听器)
I/O,事件队列 process.nextTick
requestAnimationFrame(争议)

宏任务:代表着 JavaScript 运行时环境中的一个主要工作单元,类似一个载体。

微任务 :运行依托于宏任务,执行优先级高于同轮次的宏任务。

代码执行过程如下:

  1. 进入宏任务
  2. 执行所有同步代码,将异步任务放入对应的任务队列
  3. 执行微任务队列中的回调函数
  4. 从宏任务队列中取出下一个宏任务
  5. 重复上述步骤

举个栗子

javascript 复制代码
async function test() {
    await console.log(8);
    console.log(9);
}

console.log(1);

test();

setTimeout(() => {
    console.log(2);
}, 0);

new Promise((resolve) => {
    console.log(4);
    resolve();
    console.log(5);
}).then(() => {
    console.log(6);
});

console.log(7);

执行顺序:

1--> 8--> 4--> 5--> 7--> 9--> 6--> 2


再举个栗子

javascript 复制代码
async function test() {
    await console.log(1);
    console.log(2);
}

console.log(3);

test();

setTimeout(() => {
	console.log(4);
}, 0);

new Promise((resolve) => {
    console.log(5);
    resolve();
}).then(async () => {
    await console.log(6);
    console.log(7);
}).then(() => {
    console.log(8);
});

new Promise((resolve) => {
    console.log(9);
    resolve();
}).then(() => {
    console.log(10);
    setTimeout(() => {
        console.log(11);
    });
}).then(() => {
    console.log(12);
});

执行顺序:

3--> 1--> 5--> 9--> 2--> 6--> 10--> 7--> 12--> 8--> 4--> 11

相关推荐
codingandsleeping1 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
白水清风2 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
用户22152044278002 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端2 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧2 小时前
Promise 的使用
前端·javascript
天天扭码3 小时前
来全面地review一下Flex布局(面试可用)
前端·css·面试
Mor_4 小时前
UE5 网络通信协议学习笔记
面试
沐怡旸4 小时前
【底层机制】std::unique_ptr 解决的痛点?是什么?如何实现?怎么正确使用?
c++·面试
前端康师傅4 小时前
JavaScript 作用域
前端·javascript
前端缘梦4 小时前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试