JS `queueMicrotask()` (ES2021)：调度微任务的精确控制

各位朋友，咱们今天来聊聊JavaScript里一个挺低调但又挺重要的家伙：queueMicrotask()。这玩意儿，说白了，就是让你更精细地控制微任务队列，让你的代码执行顺序更可控，避免一些意想不到的“惊喜”。

开场白：微任务，你真的懂了吗？

在深入queueMicrotask()之前，咱们先来回顾一下JavaScript的事件循环（Event Loop）。这玩意儿是JavaScript的灵魂，搞懂它，才能真正理解queueMicrotask()的意义。

简单来说，事件循环就是JavaScript引擎不断地从任务队列里取出任务，然后执行。任务队列分为宏任务队列（macrotask queue）和微任务队列（microtask queue）。

宏任务（Macrotask）：比如setTimeout、setInterval、I/O操作、UI渲染等等。
微任务（Microtask）：比如Promise的resolve/reject回调、MutationObserver的回调、queueMicrotask()添加的任务等等。

关键点在于，每次执行完一个宏任务后，都会清空微任务队列。也就是说，微任务会在当前宏任务执行完毕后，但在下一个宏任务开始之前执行。

如果你对事件循环还不太熟悉，强烈建议先补补课，否则接下来的内容可能会有点晕。

queueMicrotask()：我的微任务，我做主！

OK，现在主角登场了！queueMicrotask() 是 ES2021 引入的一个新API，它的作用很简单：把一个函数添加到微任务队列的末尾。

用法也很简单：

queueMicrotask(() => {
  console.log("我是微任务！");
});

console.log("我是宏任务！");

// 输出顺序：
// "我是宏任务！"
// "我是微任务！"

看到没？即使 queueMicrotask() 出现在 console.log("我是宏任务！"); 之前，微任务还是会在宏任务执行完毕后才执行。

为什么要用 queueMicrotask()？

你可能会问：Promise也能创建微任务啊，我干嘛还要用 queueMicrotask()？问得好！

Promise的确可以创建微任务，但是Promise的微任务通常是异步操作的结果。而queueMicrotask() 更灵活，它可以让你同步地把一个函数添加到微任务队列。

这有什么用呢？举几个例子：

避免UI卡顿：有时候，你需要执行一些比较耗时的操作，但又不想让UI卡顿。你可以把这些操作放到微任务队列里，这样浏览器就可以在每次宏任务执行完毕后，稍微喘口气，更新一下UI，然后再执行你的耗时操作。
```
function updateUI() {
    // 更新UI的代码
    console.log("UI更新！");
}

function doHeavyTask() {
    // 耗时操作
    console.log("执行耗时操作...");
}

updateUI(); // 立即更新UI

queueMicrotask(() => {
    doHeavyTask(); // 将耗时操作放到微任务队列
});

console.log("其他宏任务代码...");

// 输出顺序：
// "UI更新！"
// "其他宏任务代码..."
// "执行耗时操作..."
```
在这个例子中，updateUI() 会立即执行，更新UI。然后，doHeavyTask() 被放到微任务队列，会在当前宏任务执行完毕后执行，这样可以避免UI卡顿。
保持数据一致性：有时候，你需要在一个操作中更新多个状态，并且希望这些状态的更新是原子性的。你可以把这些状态更新放到微任务队列里，这样可以保证在下一个宏任务开始之前，所有状态都更新完毕。
```
let count = 0;

function incrementCount() {
    count++;
    console.log("count:", count);
}

function updateCountTwice() {
    incrementCount();
    queueMicrotask(() => {
        incrementCount();
    });
}

updateCountTwice();
console.log("更新结束");

// 输出顺序：
// count: 1
// 更新结束
// count: 2
```
在这个例子中，updateCountTwice() 先同步地执行一次 incrementCount()，然后将第二次 incrementCount() 放到微任务队列。这样可以确保在 console.log("更新结束"); 之后，count 的值已经是 2 了。

在Promise resolve/reject之后执行一些操作：虽然Promise本身会创建微任务，但有时候你需要在Promise的回调函数执行完毕后，立即执行一些其他操作。这时，queueMicrotask() 就可以派上用场了。

const promise = new Promise((resolve) => {
    resolve("Promise resolved!");
});

promise.then((value) => {
    console.log(value); // "Promise resolved!"
    queueMicrotask(() => {
        console.log("Promise回调函数执行完毕后的微任务!");
    });
});

console.log("Promise then() 之后...");

// 输出顺序：
// "Promise then() 之后..."
// "Promise resolved!"
// "Promise回调函数执行完毕后的微任务!"

在这个例子中，queueMicrotask() 确保了在Promise的resolve回调函数执行完毕后，才会执行 "Promise回调函数执行完毕后的微任务!"。

解决React状态更新的延迟问题：在React中，状态更新通常是异步的。这意味着，当你调用 setState() 后，状态并不会立即更新。有时候，你需要在状态更新后立即执行一些操作，这时就可以使用 queueMicrotask()。
```
import React, { useState } from 'react';

function MyComponent() {
    const [count, setCount] = useState(0);

    const handleClick = () => {
        setCount(count + 1);
        queueMicrotask(() => {
            console.log("Count 更新后的值:", count + 1); // 确保打印的是更新后的值
        });
    };

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={handleClick}>Increment</button>
        </div>
    );
}
```
在这个例子中，queueMicrotask() 确保了在状态 count 更新后，才会执行 console.log("Count 更新后的值:", count + 1);。这可以避免因为React状态更新的延迟而导致的问题。

queueMicrotask() vs setTimeout(..., 0)：一字之差，天壤之别

你可能会想：我也可以用 setTimeout(..., 0) 来实现类似的效果啊！它们有什么区别呢？

区别大了！ setTimeout(..., 0) 创建的是一个宏任务，而 queueMicrotask() 创建的是一个微任务。

这意味着，setTimeout(..., 0) 的回调函数会在下一个宏任务开始时执行，而 queueMicrotask() 的回调函数会在当前宏任务执行完毕后立即执行。

console.log("宏任务开始");

setTimeout(() => {
    console.log("setTimeout 回调函数");
}, 0);

queueMicrotask(() => {
    console.log("queueMicrotask 回调函数");
});

console.log("宏任务结束");

// 输出顺序：
// "宏任务开始"
// "宏任务结束"
// "queueMicrotask 回调函数"
// "setTimeout 回调函数"

看到没？ queueMicrotask() 的回调函数会在 "宏任务结束" 之后立即执行，而 setTimeout(..., 0) 的回调函数则要等到下一个宏任务开始时才能执行。

所以，如果你想要在当前宏任务执行完毕后立即执行一些操作，queueMicrotask() 是更好的选择。

为了更清晰地对比，我们用表格来总结一下：

特性	`queueMicrotask()`	`setTimeout(..., 0)`
任务类型	微任务	宏任务
执行时机	当前宏任务结束后	下一个宏任务开始时
优先级	高	低
适用场景	需要立即执行的操作	延迟执行的操作

queueMicrotask() 的一些注意事项

不要滥用：虽然 queueMicrotask() 很强大，但也不要滥用。过多的微任务可能会阻塞事件循环，导致性能问题。只有在真正需要的时候才使用它。

小心微任务队列的死循环：如果在微任务的回调函数中又添加了新的微任务，可能会导致微任务队列的死循环，最终导致浏览器崩溃。

queueMicrotask(() => {
    console.log("微任务 1");
    queueMicrotask(() => {
        console.log("微任务 2");
        // 永远不要这样做！
        // queueMicrotask(() => {
        //     console.log("微任务 3");
        // });
    });
});

console.log("宏任务");

// 输出顺序：
// "宏任务"
// "微任务 1"
// "微任务 2"
// (如果开启了"微任务3"，可能会导致死循环)

在这个例子中，如果开启了 "微任务 3"，可能会导致微任务队列的死循环。因为每次执行一个微任务，都会添加一个新的微任务到队列中，导致队列永远无法清空。

兼容性： queueMicrotask() 是 ES2021 引入的，所以一些老版本的浏览器可能不支持。如果你需要在老版本的浏览器中使用，可以使用polyfill。
```
if (typeof queueMicrotask === 'undefined') {
    window.queueMicrotask = function (callback) {
        Promise.resolve().then(callback);
    };
}
```
这个polyfill 使用Promise来实现类似 queueMicrotask() 的功能。

总结：queueMicrotask()，你的代码执行顺序的掌控者

总而言之，queueMicrotask() 是一个非常有用的API，它可以让你更精细地控制微任务队列，让你的代码执行顺序更可控。但是，也要注意不要滥用，避免出现性能问题和死循环。

希望今天的讲座对你有所帮助！下次再见！

发表回复 取消回复

发表回复取消回复