React 之从 requestIdleCallback 到时间切片

冴羽
9,965 阅读7分钟

本文为稀土掘金技术社区首发签约文章，14天内禁止转载，14天后未获授权禁止转载，侵权必究！

本篇是 React 基础与进阶系列第 10 篇，关注专栏

前言

在上篇《React 之 requestIdleCallback 来了解一下》，我们讲解了 requestIdleCallback 这个 API，它可以实现在浏览器空闲的时候执行代码，这就与 React 的理念非常相似，都希望执行的时候不影响到关键事件，比如动画和输入响应，但因为兼容性、requestIdleCallback 定位于执行后台和低优先级任务、执行频率等问题，React 在具体的实现中并未采用 requestIdleCallback，本篇我们来讲讲 React 是如何实现类似于 requestIdleCallback，在空闲时期执行代码的效果，并由此讲解时间切片的背后实现。

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 系列

  1. React 之 createElement 源码解读
  2. React 之元素与组件的区别
  3. React 之 Refs 的使用和 forwardRef 的源码解读
  4. React 之 Context 的变迁与背后实现
  5. React 之 Race Condition
  6. React 之 Suspense
  7. React 之从视觉暂留到 FPS、刷新率再到显卡、垂直同步再到16ms的故事
  8. React 之 requestAnimationFrame 执行机制探索
  9. React 之 requestIdleCallback 来了解一下

React 系列的预热系列，带大家从源码的角度深入理解 React 的各个 API 和执行过程，全目录不知道多少篇，预计写个 50 篇吧。

avatar
文章
阅读
粉丝