requestIdleCallback 和 MessageChannel

Fiber 架构中requestIdleCallback 和 MessageChannel

在 React 的 Fiber 架构中，主要使用的是 requestIdleCallback 的模拟实现，而非直接依赖原生 MessageChannel 或 requestIdleCallback。

具体来说：

为什么不直接用 requestIdleCallback？
- 原生 requestIdleCallback 的浏览器支持度和触发频率（约 20ms 一次）不能满足 React 对渲染优先级和响应速度的要求。
- 因此 React 自己实现了一套类似的机制，通过控制任务分片和优先级调度来模拟"空闲时间"执行任务。
MessageChannel 的作用
- React 内部使用 MessageChannel 创建宏任务来实现任务的中断与恢复。
- 原理是将任务分割成小单元，每个单元执行完后通过 MessageChannel 发送消息，在下一个宏任务中继续执行剩余部分，从而避免长时间阻塞主线程。
本质区别
- MessageChannel 用于实现任务的"可中断执行"（控制任务分片的执行时机）。
- 而 Fiber 架构的核心调度逻辑（优先级排序、空闲时间判断）是 React 自主实现的，并非直接依赖 requestIdleCallback 的原生空闲时间检测。

简单说，React 借助 MessageChannel 实现了任务的中断与恢复机制，同时自己实现了一套优先级调度逻辑，而非直接使用 requestIdleCallback。这种设计让 React 能更精确地控制渲染节奏，保证 UI 的响应性。

requestIdleCallback 用法

requestIdleCallback 是浏览器提供的一个 API，用于在浏览器空闲时间执行低优先级任务，避免阻塞主线程，提高页面响应性。

基本用法

javascript 复制代码

// 注册空闲回调
const handleIdle = (deadline) => {
  // deadline 对象包含两个属性：
  // 1. timeRemaining() - 返回当前空闲时间的估计值（毫秒）
  // 2. didTimeout - 布尔值，表示回调是否因超时而触发

  // 只要有剩余时间且有任务要执行
  while (deadline.timeRemaining() > 0 && tasks.length > 0) {
    const task = tasks.shift();
    task(); // 执行任务
  }

  // 如果还有未完成的任务，再次注册回调
  if (tasks.length > 0) {
    requestIdleCallback(handleIdle);
  }
};

// 第二个参数是可选配置，timeout 表示最长等待时间（毫秒）
// 如果超过这个时间仍无空闲时间，回调会强制执行
const idleCallbackId = requestIdleCallback(handleIdle, { timeout: 1000 });

// 取消空闲回调（类似 clearTimeout）
// cancelIdleCallback(idleCallbackId);

使用场景

非紧急数据处理：如日志收集、数据统计分析
预加载资源：在空闲时提前加载可能需要的资源
DOM 操作优化：将非紧急的 DOM 更新放在空闲时间执行

注意事项

执行时间不确定：不能依赖它执行紧急任务
时间限制：单个任务执行时间不应过长，应拆分任务
浏览器兼容性 ：IE 不支持，需要兼容处理时可使用 setTimeout 或 MessageChannel 模拟
避免操作 DOM：频繁的 DOM 操作可能导致布局重排，抵消性能优化效果

示例：批量处理任务

javascript 复制代码

// 任务队列
const tasks = [
  () => console.log('任务 1 执行'),
  () => console.log('任务 2 执行'),
  () => console.log('任务 3 执行'),
  () => console.log('任务 4 执行'),
];

function processTasks(deadline) {
  // 利用剩余时间处理任务
  while (deadline.timeRemaining() > 0 && tasks.length > 0) {
    const task = tasks.shift();
    task();
  }

  // 还有任务未完成，继续注册
  if (tasks.length > 0) {
    requestIdleCallback(processTasks);
  }
}

// 注册空闲回调
requestIdleCallback(processTasks);

通过合理使用 requestIdleCallback，可以在不影响用户交互的前提下，利用浏览器空闲时间处理后台任务，提升整体页面性能。

MessageChannel用法

MessageChannel 是浏览器提供的 API，用于创建两个相互通信的端口（port1 和 port2），实现同一页面内不同脚本上下文（如主线程与 Worker、iframe 之间）的安全通信。

基本用法

javascript 复制代码

// 创建消息通道
const channel = new MessageChannel();

// 两个端口，用于双向通信
const { port1, port2 } = channel;

// 端口1监听消息
port1.onmessage = (e) => {
  console.log('port1 收到消息:', e.data);
  // 可以回复消息
  port1.postMessage('收到，这是 port1 的回复');
};

// 端口2监听消息
port2.onmessage = (e) => {
  console.log('port2 收到消息:', e.data);
};

// 端口2发送消息到端口1
port2.postMessage('你好，port1！');

// 关闭端口（不再通信时）
// port1.close();
// port2.close();

典型应用场景

主线程与 Web Worker 通信

javascript 复制代码

// 主线程
const worker = new Worker('worker.js');
const channel = new MessageChannel();

// 主线程通过 port1 接收 Worker 消息
channel.port1.onmessage = (e) => {
  console.log('主线程收到:', e.data);
};

// 将 port2 发送给 Worker
worker.postMessage({ type: 'init', port: channel.port2 }, [channel.port2]);

// Worker 端 (worker.js)
let port;
self.onmessage = (e) => {
  if (e.data.type === 'init') {
    port = e.data.port;
    // 监听主线程消息
    port.onmessage = (msg) => {
      console.log('Worker 收到:', msg.data);
    };
    // 向主线程发送消息
    port.postMessage('Worker 已准备好');
  }
};

iframe 间通信

javascript 复制代码

// 父页面
const iframe = document.querySelector('iframe');
const channel = new MessageChannel();

// 监听子页面消息
channel.port1.onmessage = (e) => {
  console.log('父页面收到:', e.data);
};

// 发送 port2 给子页面
iframe.contentWindow.postMessage('连接', '*', [channel.port2]);

// 子页面
window.onmessage = (e) => {
  const port = e.ports[0];
  // 监听父页面消息
  port.onmessage = (msg) => {
    console.log('子页面收到:', msg.data);
  };
  // 向父页面发送消息
  port.postMessage('子页面已连接');
};

核心特点

双向通信：两个端口可相互发送消息
消息类型：支持字符串、对象、数组等结构化数据（不能直接发送函数或 DOM 元素）
传输所有权 ：通过 postMessage 第二个参数转移端口所有权后，原上下文无法再使用该端口
安全性 ：相比 window.postMessage 更安全，避免全局暴露

注意事项

端口必须在两端都设置 onmessage 才能通信
转移端口后，原端口会失效
通信内容会被结构化克隆算法处理，某些类型（如 Function、Symbol）无法传输

MessageChannel 特别适合需要建立持久、双向通信通道的场景，在 React Fiber 架构中也被用于实现任务调度的中断与恢复机制。