MessageChannel 可实现“微任务级切片”是因为其 message 事件在微任务之后、宏任务之前执行，比 setTimeout(0) 更早且无 Promise 开销；通过 port.postMessage 触发、port.onmessage 响应，完成轻量异步调度。
MessageChannel 本身不直接触发微任务，但它可以配合 port.postMessage() + port.onmessage 实现一个“类微任务”的异步切片效果，本质是利用事件循环中 MessageEvent 的调度时机——它在微任务队列之后、宏任务之前执行（属于“事件循环的下一轮”中的任务队列，但比 setTimeout 等宏任务更早）。
为什么 MessageChannel 可以用来做“微任务级切片”？
浏览器中，MessageChannel 的两个端口（port1 和 port2）通信时，postMessage 发送的消息会进入对应端口的事件队列，其 message 事件的回调被插入到当前宏任务结束后、下一个宏任务开始前的任务队列中。这个时机比 setTimeout(0) 更早，且不依赖 Promise（无 Promise 构造开销），因此常被用作轻量、高性能的异步切片手段（例如 React 的 scheduleCallback 底层就曾使用它）。
基本用法：用 port.postMessage 触发一次异步切片
核心思路：创建 MessageChannel → 监听 port2 的 message → 在需要切片的地方调用 port1.postMessage() → 回调中执行下一段逻辑。
- 创建通道并绑定监听：
const channel = new MessageChannel();
channel.port2.onmessage = () => {
// 这里就是“切片后要执行的代码”
console.log('切片执行');
};
- 在任意同步代码中触发切片：
// 模拟长任务中的一次切片
function doWorkInChunks() {
let i = 0;
const total = 10000;
function slice() {
if (i >= total) return;
// 执行一小块工作
for (let j = 0; j // ... 处理 item[i]
}
// 切片结束，让出控制权
channel.port1.postMessage(''); // 触发下一次 slice
}
slice(); // 启动
}
doWorkInChunks();
封装成可复用的 nextTick / queueMicrotask 替代品
虽然不能完全等价于 queueMicrotask（后者明确在微任务队列中），但可以封装为低开销的“准微任务”调度器：
const channel = new MessageChannel();
const { port1, port2 } = channel;
port2.onmessage = (e) => {
const callback = e.data;
if (typeof callback === 'function') callback();
};
function schedule(callback) {
port1.postMessage(callback);
}
用法：
schedule(() => console.log('next tick'));
schedule(() => console.log('another one'));
注意点和边界情况
- MessageChannel 是一次性通道：每个
postMessage对应一次onmessage，需自行管理重复调度； - 不能传递函数或闭包（跨端口序列化限制），所以封装时需用
postMessage(callback)+onmessage中调用，或改用闭包捕获（如上面的schedule封装）； - 现代环境优先用
queueMicrotask（更语义清晰、无兼容性问题），MessageChannel 主要用于需兼容旧版 Chrome/Safari 或追求极致性能的底层库； - 在 Node.js 中，
MessageChannel属于worker_threads模块，行为不同，不适用于主线程异步切片。
