返回

宏任务与微任务，玩转 JavaScript 异步编程

前端

JavaScript 中的宏任务和微任务

在 JavaScript 中，代码的执行顺序是由一个叫做“Event Loop”的循环决定的。Event Loop 不断地从任务队列中获取任务并执行它们。任务队列是一个先进先出的队列，这意味着先加入队列的任务将先被执行。

宏任务和微任务都是任务队列中的任务，但它们有不同的优先级。宏任务的优先级低于微任务，这意味着微任务会在宏任务之前执行。

宏任务

宏任务包括以下几种常见的 JavaScript 操作：

  • setTimeout
  • setInterval
  • I/O 操作（如 fetch、XMLHttpRequest）
  • DOM 操作（如 document.getElementById、document.querySelector）
  • 脚本执行

宏任务是 JavaScript 代码的主体，它们通常需要较长时间才能完成。例如，setTimeout 会创建一个新的计时器，当计时器到期时，它会将一个宏任务加入到任务队列中。I/O 操作也会创建宏任务，因为它们需要与服务器进行通信，而这通常需要一段时间。

微任务

微任务包括以下几种 JavaScript 操作：

  • Promise
  • MutationObserver
  • Object.observe（已废弃）
  • process.nextTick（Node.js）

微任务的优先级高于宏任务，这意味着它们会在宏任务之前执行。微任务通常是用来处理与用户交互相关的事情，如点击事件或滚动事件。例如，当用户点击一个按钮时，浏览器会创建一个微任务来处理这个事件。

Event Loop 如何工作

Event Loop 不断地从任务队列中获取任务并执行它们。如果当前没有宏任务，Event Loop 会检查是否有微任务。如果有微任务，Event Loop 会执行它们。当所有微任务都执行完成后，Event Loop 会再次检查是否有宏任务。如果还有宏任务，Event Loop 会执行它们。

宏任务和微任务的应用

宏任务和微任务在 JavaScript 中有着广泛的应用。下面是一些常见的例子：

  • setTimeout 可以用来创建计时器，在指定的时间后执行某个任务。
  • setInterval 可以用来创建重复计时器，每隔一段时间执行某个任务。
  • I/O 操作可以用来与服务器进行通信，获取或发送数据。
  • DOM 操作可以用来操作网页的元素，如添加、删除或修改元素。
  • Promise 可以用来处理异步操作，如 I/O 操作和 DOM 操作。
  • MutationObserver 可以用来监听 DOM 元素的变化，并在变化发生时执行某个任务。

总结

宏任务和微任务是 JavaScript 异步编程中的两个重要概念。理解宏任务和微任务的工作原理可以帮助你编写出更健壮、更可维护的 JavaScript 代码。