UI 阻塞行为：微任务与宏任务

你能找出下面两个代码片段的区别吗：

function handleClick1() {
     setTimeout(handleClick1, 0);
}

function handleClick2() {
     Promise.resolve().then(handleClick2);
}

如果您无法确定选择其中一个的含义，那么这篇博文将教您一些新知识。

背景

setTimeout 用于安排在一定时间后回调。 Promise.resolve().then 会有效地做同样的事情，但内部两者是不同的。后者返回一个已经解决的承诺。对该 Promise 调用 then(callback) 将安排执行回调。

所以上述两个函数都以最小的延迟递归地调用自己。不同之处在于，来自 setTimeout 的回调被放置在宏任务队列中，而来自 Promise.then() 的回调被放置在微任务队列中。事件循环如何处理这两个队列中的项目是上面两个代码片段的区别所在。

微任务与宏任务的事件循环处理

事件循环所做的就是当有任务要执行时，它会执行这些任务，然后休眠并等待其他任务。

宏任务（或简称任务）包括负责工作的函数，例如：

1. 解析
2. 对 DOM 做出反应，

除此之外...

执行从任务队列中选取的任务后，事件循环会执行微任务检查点。其算法类似于：

While microtask queue is not empty, pick the oldest task from microtask queue and execute it.

这意味着，如果一个微任务将另一个微任务排入队列，则该任务将在下一个宏任务之前执行。而且由于 UI 渲染是一个宏任务，它永远不会被事件循环执行。

这是上述内容的演示：JS Bin demo。无限动画正在运行。如果我们触发handleClick1，那么我们会向主线程添加一些处理，但动画仍然可以正确渲染。但是如果我们触发handleClick2，动画就会停止。

我添加了变量totalCount，这样我们就可以在页面崩溃之前中断。但值得注意的是，一旦 microTask 循环启动，UI 将在一段时间内变得无响应。因为渲染、响应 DOM 等任务只会在 microtask 队列为空后才会执行。

这使得上面代码片段中的handleClick1成为更安全的选择。希望这篇博客有助于解释微任务和宏任务之间的一个根本区别。

以上是UI 阻塞行为：微任务与宏任务的详细内容。更多信息请关注PHP中文网其他相关文章！