任务优先级 (Task Priority): How Tasks are Prioritized Within the Event Loop

任务优先级：任务在事件循环中的优先级

In JavaScript, the event loop is responsible for managing the execution of tasks, ensuring that they are processed efficiently and in the correct order. However, not all tasks are treated equally; some tasks have higher priority and are executed before others. Understanding how task priority works within the event loop is crucial for writing performant, responsive code and for managing the timing and order of operations in a web application.

在 JavaScript 中，事件循环负责管理任务的执行，确保它们能够高效且按正确的顺序处理。然而，并不是所有任务都被同等对待；有些任务具有更高的优先级，并在其他任务之前执行。理解任务优先级在事件循环中的工作原理，对于编写高性能、响应迅速的代码，以及管理 Web 应用程序中操作的时序和顺序至关重要。

1. Overview of Task Types in the Event Loop

事件循环中任务类型概述

1. Macro Tasks

宏任务

Macro tasks (also known as "tasks") are the primary units of work in the event loop. These include events like:

• Script execution (e.g., starting a script or executing a function call)
• Event callbacks (e.g., handling a click event)
• setTimeout and setInterval callbacks
• I/O operations

宏任务（也称为“任务”）是事件循环中的主要工作单元。这些任务包括：

• 脚本执行（例如，启动脚本或执行函数调用）
• 事件回调（例如，处理点击事件）
• setTimeout 和 setInterval 回调
• I/O 操作

Macro tasks are placed in the task queue and are processed one at a time. After one macro task is completed, the event loop checks for any pending micro tasks before moving on to the next macro task.

宏任务被放入任务队列，并一次处理一个。在完成一个宏任务后，事件循环会检查是否有待处理的微任务，然后再继续下一个宏任务。

2. Micro Tasks

微任务

Micro tasks are smaller, high-priority tasks that are executed after the current macro task but before the next macro task. Examples of micro tasks include:

• Promise callbacks (e.g., then, catch, finally)
• MutationObserver callbacks
• process.nextTick (in Node.js)

微任务是较小的高优先级任务，它们在当前宏任务之后、下一个宏任务之前执行。微任务的示例包括：

• Promise 回调（例如 then、catch、finally）
• MutationObserver 回调
• process.nextTick（在 Node.js 中）

The event loop processes all pending micro tasks before moving on to the next macro task, ensuring that critical operations like promise resolution are handled promptly.

事件循环会在继续下一个宏任务之前处理所有待处理的微任务，确保像 promise 解析这样的关键操作能够及时处理。

3. Render Tasks

渲染任务

Render tasks are specific to the browser environment and involve updating the visual display of the web page. These tasks include:

• Calculating styles and layout
• Painting pixels to the screen
• Compositing layers

渲染任务特定于浏览器环境，涉及更新网页的视觉显示。这些任务包括：

• 计算样式和布局
• 将像素绘制到屏幕上
• 合成图层

Render tasks are scheduled by the browser and typically occur between macro task executions to ensure smooth, continuous updates to the user interface.

渲染任务由浏览器调度，通常在宏任务执行之间发生，以确保用户界面平稳、连续地更新。

2. How Task Priority Works in the Event Loop

任务优先级在事件循环中的工作原理

1. Execution Order: Macro Tasks vs. Micro Tasks

执行顺序：宏任务 vs 微任务

The event loop’s task prioritization primarily revolves around the distinction between macro tasks and micro tasks:

• Macro Task Execution: The event loop begins by executing a macro task from the task queue. This could be a script execution, a setTimeout callback, or an event handler.

• Micro Task Execution: After the macro task completes, the event loop checks the micro task queue. All pending micro tasks are executed before the event loop moves on to the next macro task.

• Render Task Execution: After all micro tasks are completed, the browser may perform a render task to update the UI before the next macro task starts.

事件循环的任务优先级主要围绕宏任务和微任务之间的区别：

• 宏任务执行：事件循环首先从任务队列中执行一个宏任务。这可能是脚本执行、setTimeout 回调或事件处理程序。

• 微任务执行：宏任务完成后，事件循环检查微任务队列。在事件循环继续下一个宏任务之前，会执行所有待处理的微任务。

• 渲染任务执行：在所有微任务完成后，浏览器可能会执行渲染任务以更新 UI，然后再开始下一个宏任务。

Example: Task Execution with setTimeout and Promises

示例：使用 setTimeout 和 Promise 的任务执行

console.log("Start");

setTimeout(() => {
    console.log("Timeout");
}, 0);

Promise.resolve().then(() => {
    console.log("Promise");
});

console.log("End");

Output:

Start
End
Promise
Timeout

Explanation:

• console.log("Start") is executed immediately as a macro task.
• setTimeout is scheduled as a macro task with a 0ms delay, but it is placed in the task queue for later execution.
• Promise.resolve().then() schedules a micro task to be executed after the current macro task.
• console.log("End") is executed as part of the initial macro task.
• The event loop processes the micro task queue, executing the promise callback.
• Finally, the setTimeout callback is executed as the next macro task.

解释：

• console.log("Start") 立即作为宏任务执行。
• setTimeout 被安排为一个 0ms 延迟的宏任务，但它被放置在任务队列中以供稍后执行。
• Promise.resolve().then() 安排了一个在当前宏任务之后执行的微任务。
• console.log("End") 作为初始宏任务的一部分执行。
• 事件循环处理微任务队列，执行 promise 回调。
• 最后，setTimeout 回调作为下一个宏任务执行。

2. Render Task Timing

渲染任务时序

Render tasks are typically executed after all micro tasks are completed but before the next macro task. This ensures that the UI is updated smoothly between task executions. However, if there are many micro tasks, rendering can be delayed, potentially causing jank (lag in UI updates).

渲染任务通常在所有微任务完成后、下一个宏任务之前执行。这确保了任务执行之间 UI 的平滑更新。然而，如果有很多微任务，渲染可能会被延迟，可能导致 UI 更新时的卡顿。

3. requestAnimationFrame

requestAnimationFrame

requestAnimationFrame is a special function used to schedule tasks to run before the next repaint. This makes it ideal for animations and other visual updates that should be synchronized with the screen refresh rate.

requestAnimationFrame 是一个用于安排任务在下一次重绘之前运行的特殊函数。这使它非常适合动画和其他需要与屏幕刷新率同步的视觉更新。

function animate() {
    console.log("Animating...");
    requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

Explanation:

• The requestAnimationFrame function schedules the animate function to run before the next frame is rendered, ensuring smooth, synchronized animations.

解释：

• requestAnimationFrame 函数安排 animate 函数在下一帧渲染之前运行，确保平滑、同步的动画效果。

3. Task Prioritization in Node.js

Node.js 中的任务优先级

In Node.js, task prioritization also plays a critical role in how asynchronous operations are managed:

• Micro Tasks: process.nextTick callbacks are prioritized over promise callbacks, meaning they are executed before any other micro tasks.
• Macro Tasks: Timers, I/O callbacks, and other macro tasks are processed in order of their completion and scheduling.

在 Node.js 中，任务优先级也在异步操作的管理中发挥着重要作用：

• 微任务：process.nextTick 回调优先于 promise 回调执行，这意味着它们在其他任何微任务之前执行。
• 宏任务：定时器、I/O 回调和其他宏任务按完成和调度顺序处理。

Example: process.nextTick vs. Promise.then

示例：process.nextTick 与 Promise.then

process.nextTick(() => {
    console.log("NextTick");
});

Promise.resolve().then(() => {
    console.log("Promise");
});

console.log("End");

Output:

End

NextTick
Promise

Explanation:

• process.nextTick is prioritized and executed before any Promise micro tasks.
• Promise.then is executed after process.nextTick, following the same rules as in the browser.

解释：

• process.nextTick 优先执行，并在任何 Promise 微任务之前执行。
• Promise.then 在 process.nextTick 之后执行，遵循与浏览器中相同的规则。

4. Conclusion

结论

Task priority within the event loop is a fundamental concept for managing the execution order of tasks in JavaScript. By understanding how macro tasks, micro tasks, and render tasks are prioritized, developers can better control the timing and order of operations, leading to more responsive and performant web applications. This knowledge is essential for optimizing complex applications, ensuring smooth user interactions, and avoiding common pitfalls like UI jank and delayed updates.

事件循环中的任务优先级是管理 JavaScript 中任务执行顺序的基本概念。通过理解宏任务、微任务和渲染任务的优先级，开发人员可以更好地控制操作的时序和顺序，从而带来更响应、更高效的 Web 应用程序。这些知识对于优化复杂应用程序、确保流畅的用户交互以及避免 UI 卡顿和延迟更新等常见问题至关重要。