Javascript 隐秘世界背后的潜在规则 (二)

前端

2023-11-04 09:28:52

Javascript 世界繁杂多变，其中隐藏着一些鲜为人知的规则，它们如同暗潮涌动，时刻影响着代码的执行。在这篇博文中，我们将深入探究这些潜在规则的第二部分，揭开 Javascript 中微观世界的面纱。

宏任务和微任务的运作原理

Javascript 引擎采用一种称为 "事件循环" 的机制来管理任务的执行。事件循环是一个不断循环的过程，它从一个队列中获取任务，并逐个执行它们。有两种类型的任务可以进入事件循环队列：

宏任务： 由外部环境（如 GUI 渲染、AJAX 请求）或 Javascript 中的 setTimeout() 或 setInterval() 方法创建的任务。
微任务： 由 Javascript 引擎本身创建的任务，如 Promise.then() 或 MutationObserver 回调。

微任务和宏任务的关键区别在于它们的优先级。微任务总是优先于宏任务执行。这意味着，当事件循环从队列中获取任务时，它将首先执行所有未处理的微任务，然后再处理宏任务。

事件循环的运行过程

事件循环的运行过程如下：

事件循环从队列中获取第一个任务。
如果任务是一个微任务，则立即执行。
如果任务是一个宏任务，则等到所有未处理的微任务执行完成后再执行。
重复步骤 1-3，直到队列中没有任务。
返回到步骤 1。

理解宏任务和微任务的重要性

了解宏任务和微任务的运作原理至关重要，因为它可以帮助开发者更好地理解 Javascript 代码的执行顺序。例如，如果开发者希望在特定时间点执行一段代码，他们可以使用 setTimeout() 创建一个宏任务，因为他们知道宏任务会在所有未处理的微任务执行完成后才执行。

同样，如果开发者希望在 DOM 更新后执行一段代码，他们可以使用 Promise.then() 创建一个微任务，因为他们知道微任务将在下一个事件循环周期中立即执行。

实际应用示例

确保 DOM 更新后执行代码：

document.addEventListener("DOMContentLoaded", () => {
  // DOM 已准备好，现在可以执行代码
});

延迟执行代码：

setTimeout(() => {
  // 延迟 1 秒后执行代码
}, 1000);

在 Promise 解决后执行代码：

fetch("data.json")
  .then((response) => response.json())
  .then((data) => {
    // Promise 已解决，现在可以执行代码
  });

结论

宏任务和微任务是 Javascript 中的两个基本概念，它们对代码的执行顺序有重大影响。通过了解这些概念，开发者可以编写出更有效、更可靠的 Javascript 代码。掌握这些潜在规则是成为熟练的 Javascript 开发者的关键一步，它可以让开发者驾驭 Javascript 的复杂性，构建出响应迅速且功能强大的应用程序。