宏任务和微任务

事件循环概述

事件循环(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

相关推荐
sunbyte9 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ContentPlaceholder(背景占位)
前端·javascript·css·vue.js·tailwindcss
爱学习的茄子10 分钟前
React Hooks进阶:从0到1打造高性能Todo应用
前端·react.js·面试
谦哥39 分钟前
Claude4免费Vibe Coding!目前比较好的Cursor替代方案
前端·javascript·claude
心在飞扬1 小时前
理解JS事件环(Event Loop)
前端·javascript
敲代码的玉米C1 小时前
深入理解链表反转:从基础到进阶的完整指南
javascript
山有木兮木有枝_1 小时前
JavaScript 设计模式--单例模式
前端·javascript·代码规范
10年前端老司机2 小时前
React 受控组件和非受控组件区别和使用场景
前端·javascript·react.js
夏晚星2 小时前
vue实现微信聊天emoji表情
前端·javascript
極光未晚2 小时前
TypeScript在前端项目中的那些事儿:不止于类型的守护者
前端·javascript·typescript
Rrvive2 小时前
原型与原型链到底是什么?
javascript