JavaScript 的宏任务与微任务:深入理解异步执行机制

在 JavaScript 中,宏任务(MacroTask)和微任务(MicroTask)是实现异步编程的两个关键概念。本文将深入介绍这两个概念,解释它们的工作原理以及在实际开发中的应用。

1. 异步编程简介

在 JavaScript 中,由于单线程执行的特性,当执行到某个任务时,如果该任务需要等待一些操作(例如定时器、网络请求、事件监听等)完成,传统的同步执行方式会导致阻塞,用户界面无响应。因此,JavaScript 引入了异步编程的概念,允许某些任务在后台执行,不阻塞主线程。

2. 宏任务(MacroTask)

宏任务是由 JavaScript 引擎提供的任务队列中的一个个任务单元。每个宏任务都代表一个独立的、完整的执行单元。在宏任务队列中,任务按照顺序排列,每个任务之间互不干扰。典型的宏任务包括:

  • script(整体代码)
  • setTimeout
  • setInterval
  • I/O 操作
  • UI 渲染

宏任务的执行过程是先执行当前执行栈中的同步代码,然后从宏任务队列中取出一个任务执行,直到宏任务队列为空。

javascript 复制代码
console.log('Start');

setTimeout(function() {
  console.log('Timeout');
}, 0);

console.log('End');

上述代码中,setTimeout 的回调函数被放入宏任务队列,在主线程执行栈中的同步任务执行完毕后,才会执行宏任务队列中的任务。

3. 微任务(MicroTask)

微任务是相对于宏任务而言的,它的执行时机是在宏任务执行结束后、下一个宏任务开始前。微任务队列中的任务会在当前宏任务执行完毕后立即执行。典型的微任务包括:

  • Promise 的 then 方法
  • MutationObserver
  • process.nextTick(Node.js 环境)
javascript 复制代码
console.log('Start');

Promise.resolve().then(function() {
  console.log('Promise');
});

console.log('End');

在上述代码中,Promisethen 方法注册的回调函数是一个微任务,它会在当前宏任务执行结束后立即执行。

4. 执行顺序与例子

宏任务和微任务的执行顺序是有规律的:

  1. 当前执行栈执行完毕后,会立即检查微任务队列,如果有微任务,就按照先进先出的顺序依次执行。
  2. 微任务执行完毕后,如果有新的微任务加入,会继续执行,直到微任务队列为空。
  3. 然后,JavaScript 引擎会去宏任务队列中取出一个任务执行,执行完毕后重复步骤 1。

下面是一个例子:

javascript 复制代码
console.log('Start');

setTimeout(function() {
  console.log('Timeout');
}, 0);

Promise.resolve().then(function() {
  console.log('Promise');
});

console.log('End');

输出结果:

sql 复制代码
Start
End
Promise
Timeout

首先,同步代码执行,打印 StartEnd。然后,setTimeout 的回调和 Promisethen 回调都被放入对应的任务队列。微任务队列中的任务先执行,输出 Promise,然后宏任务队列中的任务执行,输出 Timeout

5. 应用场景

5.1 宏任务的应用

  • 定时器: 使用 setTimeoutsetInterval 可以创建宏任务,实现定时执行任务的效果。
javascript 复制代码
setTimeout(function() {
  console.log('Delayed task');
}, 1000);
  • I/O 操作: 从服务器获取数据、读写文件等操作都是宏任务。

5.2 微任务的应用

  • Promise: Promise 的 then 方法产生的回调是微任务,可以在异步操作完成后执行。
javascript 复制代码
Promise.resolve().then(function() {
  console.log('Promise task');
});
  • MutationObserver: 监听 DOM 变化的回调是微任务。
javascript 复制代码
var observer = new MutationObserver(function() {
  console.log('DOM changed');
});

observer.observe(document.body, { attributes: true });
document.body.setAttribute('class', 'new-class');

6. 总结

宏任务和微任务是 JavaScript 中实现异步编程的两个重要概念。了解它们的执行时机和应用场景有助于更好地理解 JavaScript 的事件循环机制,提高异步编程的效率。在实际应用中,宏任务和微任务的合理使用能够优化代码执行顺序,提升用户体验。

相关推荐
全宝几秒前
🚀 一文搞定 claude code:国内环境下的安装、配置与体验
前端·ai编程·claude
寻觅~流光5 分钟前
封装---优化try..catch错误处理方式
开发语言·前端·javascript·typescript
wjm0410068 分钟前
C++后端面试八股文
java·c++·面试
csj508 分钟前
前端基础之《Vue(22)—安装MongoDB》
前端·vue
今天也在写bug11 分钟前
输入npm install后发生了什么
前端·npm·node.js
玲小珑36 分钟前
Next.js 教程系列(十六)Next.js 中的状态管理方案
前端·next.js
前端小巷子38 分钟前
web实现文件的断点续传
前端·javascript·面试
小磊哥er38 分钟前
【前端工程化】前端项目怎么做代码管理才好?
前端
jojo是只猫1 小时前
前端vue对接海康摄像头流程
前端·javascript·vue.js
10年前端老司机5 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js