setTimeout 模拟

MDN 提供了一种使用 setTimeout 的兜底实现：

window.requestIdleCallback = window.requestIdleCallback || function(handler) {
  let startTime = Date.now();
  return setTimeout(function() {
    handler({
      didTimeout: false,
      timeRemaining: function() {
        return Math.max(0, 50.0 - (Date.now() - startTime));
      }
    });
  }, 1);
}

但这个并不是 polyfill ，因为它在功能上并不相同。使用 setTimeout() 并不能像 requestIdleCallback 一样做到在空闲时段执行代码。

postMessage 介绍

那如何实现空闲时期执行呢？React 早期采用的是 requestAnimationFrame + postMessage 来实现的，requestAnimationFrame 我们在《React 之 requestAnimationFrame 执行机制探索》介绍过，我们简单说说 postMessage。

引用 MDN 的介绍：

window.postMessage() 方法可以安全地实现跨源通信。

它的简单使用示例如下：

window.addEventListener("message", (e) => {console.log(e.data)}, false);
window.postMessage('Hello World!')

React v16 实现（rAF + postMessage）

那 React 是怎么实现的呢？我们可以查看 React 16.0.0 版本里的实现，这里为了方便理解，将代码极度简化了：

// Polyfill requestIdleCallback.
var scheduledRICCallback = null;
var frameDeadline = 0;
// 假设 30fps，一秒就是 33ms
var activeFrameTime = 33;
var frameDeadlineObject = {
  timeRemaining: function() {
    return frameDeadline - performance.now();
  }
};
var idleTick = function(event) {
    scheduledRICCallback(frameDeadlineObject);
};
window.addEventListener('message', idleTick, false);
var animationTick = function(rafTime) {
  frameDeadline = rafTime + activeFrameTime;
  window.postMessage('__reactIdleCallback$1', '*');
};
var rIC = function(callback) {
  scheduledRICCallback = callback;
  requestAnimationFrame(animationTick);
  return 0;
};

逻辑很简单，rIC 就是 requestIdleCallback 的简写，rIC 函数执行的时候，调用 requestAnimationFrame(animationTick)，animationTick 会被传入当前帧执行的时间(rafTime)，我们假设要保持最低的 30fps，一帧就是 33ms，我们就可以得知这帧最晚应该在 frameDeadline = rafTime + activeFrameTime前结束。

然后我们通过 postMessage 进行通信，通信的内容并不重要，重点是浏览器会被推入一个宏任务，也就是 idleTick 函数，我们通过 frameDeadline - performance.now()就可以算出这帧还剩多少时间，然后将包含这个信息的对象（frameDeadlineObject）传入 callback 函数，由此实现了 requestIdleCallback 的模拟。

那你可能会问，“空闲时期执行”这个效果怎么就实现了呢？我们之想要实现空闲时期执行，想要达到的效果是不阻碍浏览器对动画和用户输入的处理，我们没有直接执行 callback 回调，而是用 postMessage 推入到任务列表中，浏览器就可以响应更高优先级的动画或者用户输入，等执行完再去我们推入的任务。这效果不就一样达成了吗？

那你可能会问，这不就是延时执行？为什么不用 setTimeout 呢？

确实也可以，但当你设置 setTimeout(fn, 0)的时候，虽然想表达的意思是马上执行，但浏览器在实现的时候会有一个最低 4ms 的间隔，如果你想在浏览器中实现 0ms 延时的定时器，应该借助 postMessage，这也是 MDN 文档给的建议。

取消使用 rAF

随着代码的不断变更，实现又发生了一些变化，比如 React 在 v16.2.0 版本取消了使用 requestAnimationFrame，为什么会取消 rAF 呢？这个 PR 进行了回答。

回顾之前的实现，我们是通过猜测这帧的结束时间，然后在这帧大概结束的时候再让出线程，但实际上没有必要这样实现。我们的想法是，将 React 的更新做成一个任务列表，我们不直接遍历这个任务列表，而是每执行几个任务，就调用 postMessage，告诉浏览器，我不遍历任务了，线程给你，你先忙，等处理完再接着遍历任务列表中剩下的任务。这样我们就不用管这帧是什么时候结束。为了方便起见，我们将这种实现方式叫做 message loop。

而且为了提高性能和电池寿命，在大多数浏览器里，当 requestAnimationFrame() 运行在后台标签页或者隐藏的<iframe> 里时，requestAnimationFrame() 会被暂停调用以提升性能和电池寿命。这对 React 的执行也会有一定的影响。

那 message loop 具体是怎么实现的呢？我们先额外介绍一下 MessageChannel

MessageChannel 介绍

web 通信（web messaging）有两种方式，一种是跨文档通信(cross-document messaging)，也就是我们熟知的 window.postMessage()，常被用于与 iframe 之间的通信，一种是通道通信（channel messaging），也就是我们现在要介绍的。

MessageChannel 接口允许我们创建一个新的消息通道，并通过它的两个 MessagePort 属性发送数据，使用示例如下：

var channel = new MessageChannel();
channel.port1.onmessage = (e) => {console.log(e.data)}
channel.port2.postMessage('Hello World')

了解过事件循环的同学应该知道宏任务与微任务，它们又被称为“macro task”和“micro task” ，像 promise 就属于微任务，setTimeout 属于宏任务，MessageChannel 跟 setTimeout 一样，也属于宏任务。知道这点就够了。

React v18 实现（message loop）

写这篇文章的时候，React 的版本是 v18.2.0，代码为了方便阅读，同样做了简化：

// 记录 callback
let scheduledHostCallback;
let isMessageLoopRunning = false;
let getCurrentTime = () => performance.now();
let startTime;
// rIC 更名为 requestHostCallback
function requestHostCallback(callback) {
  scheduledHostCallback = callback;
  if (!isMessageLoopRunning) {
    isMessageLoopRunning = true;
    schedulePerformWorkUntilDeadline();
  }
}
const channel = new MessageChannel();
const port = channel.port2;
channel.port1.onmessage = performWorkUntilDeadline;
let schedulePerformWorkUntilDeadline = () => {
  port.postMessage(null);
};
function performWorkUntilDeadline() {
  if (scheduledHostCallback !== null) {
    const currentTime = getCurrentTime();
    startTime = currentTime;
    const hasTimeRemaining = true;
    let hasMoreWork = true;
    try {
      hasMoreWork = scheduledHostCallback(hasTimeRemaining, currentTime);
    } finally {
      if (hasMoreWork) {
        schedulePerformWorkUntilDeadline();
      } else {
        isMessageLoopRunning = false;
        scheduledHostCallback = null;
      }
    }
  } else {
    isMessageLoopRunning = false;
  }
};

可以看到在当前的实现中，原来的 rIC 改名为 requestHostCallback，requestHostCallback 函数执行的时候，会调用 schedulePerformWorkUntilDeadline，它只做了一件事情，就是 postMessage，通知浏览器等忙完自己的事情，再执行 performWorkUntilDeadline。

performWorkUntilDeadline 中会执行 scheduledHostCallback(hasTimeRemaining, currentTime)，scheduledHostCallback 就是传入 requestHostCallback 的 callback 函数，它返回一个布尔值告诉 performWorkUntilDeadline 是否还有更多任务，如果有，那就调用 schedulePerformWorkUntilDeadline，告诉浏览器等会再接着干，由此实现了任务小量执行，不断让出线程，从而保证浏览器能够及时处理动画或者用户输入。

那 scheduledHostCallback 到底是什么呢？我们可以知道它就是调用 requestHostCallback 时传入的函数，但这个被传入的函数执行的内容是什么呢？

既然都已经看了 React 的 Scheduler 源码，来都来了，我们就再多看一点。

我们会发现 requestHostCallback 虽然有三处被调用，但传入的函数都是 flushWork 这个函数：

requestHostCallback(flushWork);

所以 performWorkUntilDeadline 中执行的 scheduledHostCallback(hasTimeRemaining, currentTime)，其实就相当于执行 flushWork(hasTimeRemaining, currentTime)

flushWork 做了什么呢？我们将 flushWork 相关的代码拿出来，这里同样做了简化：

function flushWork(hasTimeRemaining, initialTime) {
   return workLoop(hasTimeRemaining, initialTime);
}
var currentTask;
function workLoop(hasTimeRemaining, initialTime) {
  currentTask = taskQueue[0];
  while (currentTask != null) {
    if (
      currentTask.expirationTime > initialTime &&
      (!hasTimeRemaining || shouldYieldToHost())
    ) {
      break;
    }
    const callback = currentTask.callback;
    callback();
    taskQueue.shift()
    currentTask = taskQueue[0];
  }
  if (currentTask !== null) {
    return true;
  } else {
    return false;
  }
}
// 默认的时间切片
const frameInterval = 5;
function shouldYieldToHost() {
  const timeElapsed = getCurrentTime() - startTime;
  if (timeElapsed < frameInterval) {
    return false;
  }
  return true;
}

我们可以看到在 flushWork 中，我们调用的是 workLoop 函数，在 workLoop 中，我们取出任务列表中的第一个任务，然后判断任务是否过期，以及是否应该让出线程（shouldYieldToHost）

在 shouldYieldToHost 中，getCurrentTime() 表示当前的时间，startTime 我们是在收到 postMessage 的消息时执行 performWorkUntilDeadline 函数的时间，performWorkUntilDeadline 中，我们执行 scheduledHostCallback(hasTimeRemaining, currentTime)，也就是 flushWork(hasTimeRemaining, initialTime)，也就是 workLoop(hasTimeRemaining, initialTime)，workLoop 中我们又进行了 shouldYieldToHost 的判断。

那你可能要说，从 performWorkUntilDeadline 到 shouldYieldToHost，这中间全是同步操作，就没隔多少时间呀，确实如此，执行第一个任务的时候，getCurrentTime() 和 startTime 确实没有隔多少时间，耗时的任务是 taskQueue 中的任务，也就是 const callback = currentTask.callback; callback()这里。

等跑完第一个任务，我们又会判断一次 shouldYieldToHost，如果还不超过 5ms（默认的时间切片时间），我们就接着执行任务，再判断 shouldYieldToHost，直到任务列表空了，或者过了 5ms。

如果过了 5ms，发现还有任务，hasMoreWork 是 true，然后会执行 schedulePerformWorkUntilDeadline，也就是再执行一个 port.postMessage(null)，这样就让出了线程，让浏览器能够处理动画和用户输入，等浏览器处理完，它会执行 port1.onmessage 推入的 performWorkUntilDeadline 任务，在 performWorkUntilDeadline 中又接着遍历执行任务列表，就这样每执行 5ms 的任务，就让出线程，直到完成任务列表中的所有任务。

时间切片

现在我们终于得知了 React 时间切片的真相。

React 把 React 的更新操作做成了一个个任务，塞进了 taskQueue，也就是任务列表，如果直接遍历执行这个任务列表，纯同步操作，执行期间，浏览器无法响应动画或者用户的输入，于是借助 MessageChannel，依然是遍历执行任务，但当每个任务执行完，就会判断过了多久，如果没有过默认的切片时间（5ms），那就再执行一个任务，如果过了，那就调用 postMessage，让出线程，等浏览器处理完动画或者用户输入，就会执行 onmessage 推入的任务，接着遍历执行任务列表。

一个完整可用的简化版

// 用于模拟代码执行耗费时间
const sleep = delay => {
  for (let start = Date.now(); Date.now() - start <= delay;) {}
}
// performWorkUntilDeadline 的执行时间，也就是一次批量任务执行的开始时间，通过现在的时间 - startTime，来判断是否超过了切片时间
let startTime;
let scheduledHostCallback;
let isMessageLoopRunning = false;
let getCurrentTime = () => performance.now();
const taskQueue = [{
  expirationTime: 1000000,
  callback: () => {
    sleep(30);
    console.log(1)
  }
}, {
  expirationTime: 1000000,
  callback: () => {
    sleep(30);
    console.log(2)
  }
}, {
  expirationTime: 1000000,
  callback: () => {
    sleep(30);
    console.log(3)
  }
}]
function requestHostCallback(callback) {
  scheduledHostCallback = callback;
  if (!isMessageLoopRunning) {
    isMessageLoopRunning = true;
    schedulePerformWorkUntilDeadline();
  }
}
const channel = new MessageChannel();
const port = channel.port2;
function performWorkUntilDeadline() {
  if (scheduledHostCallback !== null) {
    const currentTime = getCurrentTime();
    startTime = currentTime;
    const hasTimeRemaining = true;
    let hasMoreWork = true;
    try {
      hasMoreWork = scheduledHostCallback(hasTimeRemaining, currentTime);
    } finally {
      console.log('hasMoreWork', hasMoreWork)
      if (hasMoreWork) {
        schedulePerformWorkUntilDeadline();
      } else {
        isMessageLoopRunning = false;
        scheduledHostCallback = null;
      }
    }
  } else {
    isMessageLoopRunning = false;
  }
};
channel.port1.onmessage = performWorkUntilDeadline;
let schedulePerformWorkUntilDeadline = () => {
  port.postMessage(null);
};
function flushWork(hasTimeRemaining, initialTime) {
  return workLoop(hasTimeRemaining, initialTime);
}
let currentTask;
function workLoop(hasTimeRemaining, initialTime) {
  currentTask = taskQueue[0];
  while (currentTask != null) {
    console.log(currentTask)
    if (
      currentTask.expirationTime > initialTime &&
      (!hasTimeRemaining || shouldYieldToHost())
    ) {
      break;
    }
    const callback = currentTask.callback;
    callback();
    taskQueue.shift()
    currentTask = taskQueue[0];
  }
  if (currentTask != null) {
    return true;
  } else {
    return false;
  }
}
const frameInterval = 5;
function shouldYieldToHost() {
  const timeElapsed = getCurrentTime() - startTime;
  if (timeElapsed < frameInterval) {
    return false;
  }
  return true;
}
requestHostCallback(flushWork)

最后

从讲解 FPS 到 requestAnimationFrame 再到 requestIdleCallback，再到本篇的时间切片，算是为 React 系列的第一个大篇章 —— Scheduler 篇拉开了序幕。我们开始讲 React 的重要组成部分，Scheduler（调度器）。

React 之从 requestIdleCallback 到时间切片

setTimeout 模拟

postMessage 介绍

React v16 实现（rAF + postMessage）

取消使用 rAF

MessageChannel 介绍

React v18 实现（message loop）

时间切片

一个完整可用的简化版

最后

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

React 之从 requestIdleCallback 到时间切片

setTimeout 模拟

postMessage 介绍

React v16 实现（rAF + postMessage）

取消使用 rAF

MessageChannel 介绍

React v18 实现（message loop）

时间切片

一个完整可用的简化版

最后

热门文章

最新文章

相关电子书