揭开 JavaScript 线程中微任务、宏任务与浏览器 UI 线程之间的执

前端

2024-02-05 15:00:18

JavaScript 事件循环：掌控代码执行的节奏

在 JavaScript 的世界中，事件循环是一个默默无闻却又至关重要的机制，它控制着代码执行的顺序，影响着应用程序的性能和响应能力。了解事件循环中微任务、宏任务和浏览器 UI 线程之间的交互，对于编写出高效、流畅的应用程序至关重要。

JavaScript 的单线程本质

JavaScript 是一种单线程语言，这意味着它一次只能执行一个任务。这个线程通常称为主线程或 UI 线程，它负责处理用户界面、事件处理和 DOM 操作。单线程性确保了代码不会同时执行多个任务，从而避免了潜在的冲突和数据竞争。

微任务与宏任务：优先级之争

事件循环由两个主要队列组成：微任务队列和宏任务队列。微任务是优先级较高的任务，它们会在当前执行栈结束之前立即执行。另一方面，宏任务是优先级较低的任务，它们会在当前执行栈和所有微任务执行完成后才执行。

执行顺序：队列的舞曲

当 JavaScript 代码执行时，事件循环会根据以下顺序处理任务：

UI 线程执行同步任务： 主线程执行同步任务，如函数调用和变量声明。
生成微任务： 同步任务可能会产生微任务，这些微任务会被添加到微任务队列。
执行微任务： 在完成当前执行栈后，主线程会执行微任务队列中的所有微任务。
生成宏任务： 微任务可能会产生宏任务，这些宏任务会被添加到宏任务队列。
执行宏任务： 在所有微任务执行完毕后，主线程会执行宏任务队列中的所有宏任务。
UI 渲染： 在宏任务执行完成后，UI 线程会渲染 DOM 更新，使用户能够看到界面变化。

微任务与宏任务的示例

一些常见的微任务包括：

Promise 的 then() 回调
MutationObserver 回调
setTimeout()（延迟为 0）回调

一些常见的宏任务包括：

setTimeout() 回调（延迟大于 0）
setInterval() 回调
DOM 事件回调（如 click 事件处理程序）

UI 线程与 JavaScript 线程：微妙的交互

虽然 UI 线程和 JavaScript 线程是独立的，但它们之间存在相互影响。当 JavaScript 线程执行时，它可以修改 DOM。然而，这些修改并不会立即反映在屏幕上，因为 UI 线程必须在 JavaScript 线程完成执行后才能渲染 DOM 更新。

这种分离确保了 UI 的响应性，即使 JavaScript 代码正在执行耗时的任务。浏览器会定期轮询 UI 线程，以查看是否有待处理的 DOM 更新，并在需要时进行渲染。

高效代码的秘诀

通过精心考虑任务的优先级和执行时机，开发人员可以优化 JavaScript 应用程序的性能和响应能力。例如，关键的更新应该被安排为微任务，以确保它们立即执行并保持 UI 的响应性。另一方面，不紧急的任务应该安排为宏任务，以避免阻塞 JavaScript 线程。

代码示例：

以下是展示微任务和宏任务执行顺序的代码示例：

console.log("同步任务 1");

Promise.resolve().then(() => console.log("微任务 1"));

console.log("同步任务 2");

setTimeout(() => console.log("宏任务 1"), 0);

console.log("同步任务 3");

MutationObserver(console.log("微任务 2")).observe(document.body, {attributes: true});

console.log("同步任务 4");

setTimeout(() => console.log("宏任务 2"), 1000);