什么是 `Time Slicing`（时间切片）？拆解 React 内部如何计算一帧内剩余的可用时间

引言：用户体验的瓶颈与并发革命的曙光

在现代Web应用中，用户对交互体验的要求越来越高。复杂的用户界面、实时数据更新、丰富的动画效果以及大规模数据处理已成为常态。然而，浏览器的主线程是单线程的，这意味着在任何给定时刻，只能执行一项任务。如果一项JavaScript任务耗时过长，例如一次大型组件树的渲染或复杂的数据计算，它就会阻塞主线程，导致UI停止响应，动画卡顿，甚至出现“页面无响应”的提示。这种现象，我们称之为“UI阻塞”或“掉帧”。

传统的Web渲染模式是同步的。一旦JavaScript开始执行渲染任务，它就会一直运行，直到任务完成，然后才将控制权交还给浏览器进行UI更新。这对于小型、简单的应用来说尚可接受，但在面对日益复杂的应用场景时，这种模式的弊端暴露无遗。

为了解决这一根本性问题，前端框架和库开始探索“并发”（Concurrency）的理念。并发并非并行，而是在单线程环境下，通过精妙的调度策略，让多个任务看起来像是同时进行。其核心思想是将一个长时间运行的任务拆分成多个小块，在每一帧内只执行一小部分工作，然后将控制权交还给浏览器，让它有机会更新UI、响应用户输入。这种将长时间任务切分成可中断、可恢复的小时间片的技术，正是我们今天深入探讨的“时间切片”（Time Slicing）。

React，作为当今最流行的前端库之一，自16.x版本引入Fiber架构以来，一直在积极拥抱并发模式。它的目标是让应用能够优先处理用户可见的、高优先级的任务（如用户输入、动画），而将低优先级的任务（如不重要的后台更新）推迟到浏览器空闲时执行。这一切的基础，都离不开对时间切片技术的精巧运用，以及对一帧内可用时间如何精确计算的深刻理解。

浏览器工作原理：理解前端性能的基石

要理解React的时间切片，我们首先需要对浏览器的工作原理，尤其是事件循环和渲染流程有一个清晰的认识。

1. 事件循环（Event Loop）与任务队列

JavaScript在浏览器中运行在一个单线程的环境中，这个线程通常被称为“主线程”。所有UI渲染、用户交互、网络请求处理以及JavaScript代码执行都发生在这个主线程上。为了协调这些不同类型的任务，浏览器引入了“事件循环”（Event Loop）机制。

事件循环不断地检查两个主要的任务队列：

• 宏任务队列（Macrotask Queue）：包含如setTimeout、setInterval、setImmediate（Node.js）、I/O、UI渲染事件（如点击、滚动）以及requestAnimationFrame和MessageChannel的回调。
• 微任务队列（Microtask Queue）：包含如Promise的回调（then、catch、finally）、MutationObserver的回调以及queueMicrotask。

事件循环的基本流程如下：

1. 从宏任务队列中取出一个宏任务并执行。
2. 执行过程中，如果遇到微任务，将其添加到微任务队列。
3. 宏任务执行完毕后，检查微任务队列，并执行所有可用的微任务，直到微任务队列为空。
4. 执行完所有微任务后，浏览器可能会进行UI渲染（如果需要）。
5. 然后，再次从宏任务队列中取出一个宏任务，重复上述步骤。

这个循环确保了即使有大量任务，浏览器也能保持响应，因为它会在每个宏任务之间有机会处理用户输入和UI更新。

2. 渲染流水线（Rendering Pipeline）与帧率

浏览器为了将Web内容呈现在屏幕上，需要经过一系列的步骤，这被称为“渲染流水线”：

1. JavaScript：通常用于触发视觉变化（例如，修改DOM、CSS）。
2. Style（样式计算）：计算DOM元素的最终样式。
3. Layout（布局）：计算元素在屏幕上的几何位置和大小。
4. Paint（绘制）：将元素的可见部分（如背景、文本、边框）绘制到屏幕的像素上。
5. Composite（合成）：将所有绘制好的图层合并到一起，最终显示在屏幕上。

理想情况下，浏览器应以每秒60帧（60 FPS）的速率更新屏幕，以提供流畅的用户体验。这意味着每一帧的预算时间大约是 1000ms / 60帧 ≈ 16.67ms。如果JavaScript执行任务的时间超过这个预算，就会导致掉帧，用户就会感知到卡顿。

(想象中的浏览器帧预算图示，左侧是JavaScript/Style/Layout/Paint/Composite，右侧是16.67ms的预算)

在每一帧的16.67ms预算中，不仅包含JavaScript的执行时间，还包括样式计算、布局、绘制和合成的时间。这意味着留给JavaScript执行任务的时间实际上可能更少。

3. 浏览器提供的调度API

为了帮助开发者更好地管理任务和优化性能，浏览器提供了一些关键的API：

• requestAnimationFrame(callback) (rAF)：

  • 作用：告诉浏览器你希望执行一个动画，并且让浏览器在下一次重绘之前调用指定的函数来更新动画。
  • 特点：回调函数会在浏览器执行渲染前执行，且浏览器会保证在每一帧内只调用一次（如果条件允许）。它是执行视觉更新的最佳时机，因为它可以与浏览器的刷新率同步，避免不必要的计算和重绘。
  • 调度：属于宏任务，但其优先级和执行时机非常特殊，它在渲染步骤之前执行。

• requestIdleCallback(callback, { timeout }) (rIC)：

  • 作用：在浏览器空闲时执行低优先级的任务。
  • 特点：当一帧中还有剩余时间，或者用户输入/动画处理完毕后，浏览器可能会调用requestIdleCallback的回调。如果指定了timeout，则即使浏览器不空闲，也会在超时后强制执行。
  • 调度：属于宏任务，优先级最低，通常在渲染之后。React Scheduler在某些环境下会尝试使用requestIdleCallback，但由于其兼容性问题和执行时机的不确定性（可能长时间不执行），React内部更多地依赖MessageChannel作为更可控的宏任务调度方式。

• MessageChannel：

  • 作用：提供了一个同步的双向通信通道，可以用于创建宏任务。
  • 特点：postMessage方法可以在port1发送消息，然后port2的onmessage事件监听器会在下一个宏任务队列中被触发。这使得它成为一种比setTimeout(fn, 0)更精确且不受延迟抖动影响的宏任务调度方式。
  • 调度：属于宏任务，其优先级高于setTimeout(fn, 0)，并且比requestIdleCallback更可预测。React Scheduler在不支持requestIdleCallback或需要更精确调度时，会优先使用MessageChannel作为调度宏任务的fallback。

理解这些API是理解React如何调度任务和计算可用时间的基础。React的调度器会巧妙地结合这些机制，以实现其并发特性。

React的演进：从同步栈到并发纤程

React的核心工作是构建和更新用户界面。它的关键创新之一是Virtual DOM和协调（Reconciliation）过程，但最初的实现存在性能瓶颈。

1. Virtual DOM与协调（Reconciliation）

React引入Virtual DOM是为了提高渲染效率。当组件的状态或属性发生变化时，React不会直接操作真实的DOM。相反，它会：

1. 创建一个新的Virtual DOM树（一个JavaScript对象树），表示组件最新的UI状态。
2. 将新的Virtual DOM树与上一次渲染的Virtual DOM树进行比较（这个过程称为“协调”或“diffing”）。
3. 计算出最小的DOM操作集，这些操作可以高效地将真实DOM更新到最新状态。
4. 将这些DOM操作批量应用到真实的DOM上。

这种机制减少了直接操作DOM的次数，因为DOM操作通常是昂贵的。然而，在React 15及更早版本中，协调过程是同步的，并且是不可中断的。这意味着一旦React开始比较两棵Virtual DOM树，它就会一直执行下去，直到计算出所有DOM更新，然后才会将控制权交还给浏览器。如果组件树非常庞大或更新非常频繁，这个同步过程可能会耗费几十甚至上百毫秒，从而导致主线程长时间阻塞，造成UI卡顿。

2. Fiber架构的诞生

为了解决同步协调的局限性，React团队彻底重写了核心算法，引入了Fiber架构。Fiber是React并发模式的基石，它将React的渲染工作从一个不可中断的栈帧（Stack Frame）模型，转换成一个可中断、可恢复的“工作单元”（Work Unit）模型。

Fiber是什么？

从概念上讲，一个Fiber就是一个JavaScript对象，它代表了一个组件实例、一个DOM元素或者一个普通的JavaScript对象。每个Fiber节点都保存着与该工作单元相关的信息，包括：

• type: 组件类型（函数组件、类组件、原生DOM元素等）。
• stateNode: 对应的真实DOM节点或组件实例。
• child: 第一个子Fiber。
• sibling: 下一个兄弟Fiber。
• return: 父Fiber。
• pendingProps / memoizedProps: 待处理的props和已缓存的props。
• pendingState / memoizedState: 待处理的state和已缓存的state。
• effectTag: 标记该Fiber节点需要执行的副作用（如插入、更新、删除DOM）。
• expirationTime 或 lane: 表示该Fiber的更新优先级和过期时间。这是实现时间切片的关键。

双缓存（Double Buffering）机制

Fiber架构采用了类似于图形渲染中的双缓存技术：

1. current 树：表示当前屏幕上已经渲染的UI状态的Fiber树。
2. workInProgress 树：在后台构建的，代表即将要渲染到屏幕上的新UI状态的Fiber树。

当React需要进行更新时，它会在不影响current树（即当前屏幕显示内容）的情况下，在后台构建workInProgress树。这个构建过程是可中断的。当workInProgress树构建完成后，如果渲染成功，React会通过一个简单的指针切换，将workInProgress树替换为current树，从而一次性地将所有更新提交到DOM，实现高效且一致的UI更新。

如何通过Fiber实现可中断的渲染？

Fiber架构的关键在于，每个Fiber节点都可以被视为一个独立的工作单元。React在遍历Fiber树时，不是一次性地处理完所有节点，而是在处理完一个或一组Fiber节点后，检查当前帧是否还有剩余时间。

如果时间允许，它就继续处理下一个Fiber节点；如果时间不足，它就暂停当前的渲染工作，将控制权交还给浏览器，等待下一帧或浏览器空闲时再继续。由于每个Fiber节点都保存了足够的信息来恢复工作状态，因此暂停和恢复是无缝的。

这个“检查时间是否允许”和“暂停/恢复”的机制，正是时间切片的核心。它使得React的渲染过程从一个同步的、深度优先遍历变成了异步的、优先级驱动的遍历，从而允许高优先级任务（如用户输入）打断低优先级任务（如后台渲染），极大地提升了用户体验的响应性。

时间切片的核心机制：React调度器（Scheduler）

React的并发模式得以实现，其背后有一个至关重要的模块——React调度器（Scheduler）。调度器是React实现时间切片的核心引擎，它负责管理和协调React内部任务的执行。

1. 调度器的作用与目标

React调度器的主要目标是：

• 管理任务的优先级：根据任务的紧急程度（例如，用户输入相关的任务优先级最高，不重要的后台任务优先级最低），为任务分配不同的优先级。
• 与浏览器协同：在每一帧内合理分配时间，确保React的工作不会长时间阻塞主线程，同时让浏览器有机会进行UI更新和响应用户输入。
• 实现任务的可中断、可恢复：利用Fiber架构的特性，在必要时暂停当前正在进行的渲染工作，并在后续合适的时机恢复。

2. 任务优先级（Task Priority Levels）

调度器通过为不同类型的任务分配不同的优先级来决定它们的执行顺序和截止时间。React内部定义了一系列优先级，从最高到最低大致如下：

优先级名称	描述	对应Lane（简化）
Sync	同步执行，最高优先级，不可中断，例如点击事件、聚焦等。	SyncLane
UserBlocking	用户输入引起的更新，例如文本输入，需要在短时间内响应，不可中断时间短。	InputContinuousLane
High	持续性动画、手势等，需要快速响应。	AnimationLane
Normal	大多数非紧急的UI更新，例如数据加载完成后的渲染。	DefaultLane
Low	可以延迟执行的任务，例如不重要的后台更新、数据预取。	TransitionLane
Idle	在浏览器空闲时执行的任务，优先级最低，可能会被无限期推迟。	IdleLane

这些优先级并不是固定的时间值，而是相对的。调度器会根据当前任务的优先级，来决定它能够占用多少帧时间，以及在何时应该让出主线程。例如，UserBlocking任务会得到一个非常短的截止时间，以确保它能尽快完成；而Idle任务则可能只有一个非常长的默认截止时间，或者根本没有截止时间，直到浏览器空闲。

3. 工作循环（Work Loop）的宏观视图

React调度器的核心是一个工作循环，它不断地从任务队列中取出任务并执行。这个过程与浏览器事件循环紧密协作。

简化后的调度流程如下：

1. scheduleCallback(priority, callback, options): 当React内部有任务需要调度时（例如，setState或ReactDOM.render），它会调用调度器提供的scheduleCallback方法。这个方法会根据优先级创建一个任务对象，并将其添加到调度器的任务队列中。
2. requestHostCallback(callback): 调度器发现有任务需要执行时，会调用requestHostCallback。这个函数的作用是向浏览器注册一个宏任务，以便在主线程空闲时执行实际的工作。
   • 在大多数现代浏览器中，React调度器会优先使用MessageChannel来调度宏任务，因为它比setTimeout(fn, 0)更精确且优先级更高。
   • 如果MessageChannel不可用，它会退回到setTimeout(fn, 0)。
   • 在支持requestIdleCallback的环境下，对于Idle优先级的任务，调度器可能会使用requestIdleCallback。
3. performWorkUntilDeadline(): 这是在浏览器宏任务中实际执行任务的函数。它会不断地从调度器的任务队列中取出最高优先级的任务，并执行其回调函数。在执行每个任务的回调之前或之后，它会检查当前帧是否还有剩余时间，以及是否有更高优先级的任务等待。
   • 如果时间不足或有更高优先级任务，它会暂停当前任务的执行，并在下一个宏任务中重新调度自己。
   • 如果所有任务都执行完毕，或者当前任务被暂停，performWorkUntilDeadline就会结束，等待下一个宏任务调度。

4. 调度器内部数据结构：最小堆

为了高效地管理不同优先级的任务，React调度器内部使用了一个最小堆（Min-Heap）来存储任务。

• 任务的排序依据：任务的“过期时间”（expirationTime）。过期时间越小，表示任务越紧急，优先级越高。
• TimerQueue 和 TaskQueue：
  • TimerQueue：存储那些还没有到执行时间的任务（例如，setTimeout或requestIdleCallback带有timeout选项）。这些任务会根据它们的开始时间排序。
  • TaskQueue：存储那些已经到执行时间，或者可以立即执行的任务。这些任务会根据它们的expirationTime（即计算出的截止时间）排序，过期时间越早的任务越靠前。

当调度器需要执行任务时，它总是从TaskQueue中取出具有最小expirationTime（即最高优先级）的任务。这个数据结构确保了高优先级任务总是能优先被处理。

// 简化版的任务结构 (实际React Scheduler更复杂)
class Task {
  constructor(callback, expirationTime, priorityLevel) {
    this.callback = callback;
    this.expirationTime = expirationTime; // 任务的截止时间
    this.priorityLevel = priorityLevel; // 任务的优先级
    this.id = nextTaskId++;
    this.isScheduled = false; // 是否已调度
  }
}

// 简化版的最小堆实现 (用于TaskQueue)
class MinHeap {
  constructor() {
    this.heap = [];
  }

  // 插入任务
  push(task) {
    this.heap.push(task);
    this._bubbleUp(this.heap.length - 1);
  }

  // 弹出最小任务 (优先级最高)
  pop() {
    if (this.heap.length === 0) return null;
    if (this.heap.length === 1) return this.heap.pop();

    const min = this.heap[0];
    this.heap[0] = this.heap.pop();
    this._sinkDown(0);
    return min;
  }

  // 查看最小任务但不弹出
  peek() {
    return this.heap.length > 0 ? this.heap[0] : null;
  }

  // 辅助方法：上浮
  _bubbleUp(index) {
    const element = this.heap[index];
    while (index > 0) {
      const parentIndex = Math.floor((index - 1) / 2);
      const parent = this.heap[parentIndex];
      if (element.expirationTime >= parent.expirationTime) break;
      this.heap[index] = parent;
      index = parentIndex;
    }
    this.heap[index] = element;
  }

  // 辅助方法：下沉
  _sinkDown(index) {
    const length = this.heap.length;
    const element = this.heap[index];
    while (true) {
      const leftChildIndex = 2 * index + 1;
      const rightChildIndex = 2 * index + 2;
      let swap = null;
      let leftChild, rightChild;

      if (leftChildIndex < length) {
        leftChild = this.heap[leftChildIndex];
        if (leftChild.expirationTime < element.expirationTime) {
          swap = leftChildIndex;
        }
      }
      if (rightChildIndex < length) {
        rightChild = this.heap[rightChildIndex];
        if (
          (swap === null && rightChild.expirationTime < element.expirationTime) ||
          (swap !== null && rightChild.expirationTime < leftChild.expirationTime)
        ) {
          swap = rightChildIndex;
        }
      }

      if (swap === null) break;
      this.heap[index] = this.heap[swap];
      index = swap;
    }
    this.heap[index] = element;
  }

  get size() {
    return this.heap.length;
  }
}

// 在实际Scheduler中，TaskQueue就是一个MinHeap实例
const taskQueue = new MinHeap();

通过这种精密的调度机制，React能够在复杂的应用场景下，依然保持UI的流畅和响应性。而所有这些都依赖于对帧内可用时间的精准计算。

精准控时：React如何计算一帧内剩余的可用时间

这是React时间切片机制中最为核心和精妙的部分。调度器必须在执行任务时，持续监控时间的消耗，并在适当的时候暂停工作，将控制权交还给浏览器。

1. 核心挑战

React调度器面临的核心挑战是：如何在不阻塞主线程的前提下，尽可能多地完成工作？ 这需要一个智能的机制来判断“当前是否还有时间继续工作”以及“何时应该暂停”。

2. shouldYield 函数的哲学

在React的调度器中，判断是否需要暂停工作的关键逻辑封装在 shouldYield（或类似功能的函数）中。它的核心思想是：

• 避免“饥饿”：即使时间已经不足，也必须保证最高优先级的任务最终能够完成，不能无限期地被推迟。
• 及时让步：在大多数情况下，当预设的时间预算用尽时，应该立即暂停，将控制权交还给浏览器，以确保UI的流畅性。

3. 时间预算的设定：frameInterval 与 maxYieldInterval

React调度器并不会尝试占用整个16.67ms的帧预算。它会设定一个更保守、更短的时间片（或称“切片”）作为其工作预算。

• frameInterval (或 yieldInterval)：

  • 这是React调度器在一次连续执行中，允许自己工作的理想最大时长。
  • React内部通常将其设定为大约 5ms。
  • 为什么是5ms而不是16.67ms？
    • 浏览器自身工作：16.67ms是整个帧的预算，其中包含了浏览器进行样式计算、布局、绘制和合成的时间。如果JavaScript占用了大部分时间，浏览器就没有足够的时间完成自己的渲染工作。
    • 其他脚本和任务：页面上可能还有其他JavaScript脚本或浏览器扩展在运行，它们也需要CPU时间。
    • UI更新的缓冲：留出一些缓冲时间可以更好地应对突发性的高负载，保证UI更新有足够的空间。
    • 用户输入响应：即使在React内部工作，也需要保证浏览器能够及时响应用户的输入事件。
  • 这意味着，React期望在5ms内完成当前批次的高优先级工作，如果超过了，就应该考虑暂停。

• maxYieldInterval (强制中断上限)：

  • 这是为了防止某些极端情况下，即使低优先级任务已经耗时很长（例如，几百毫秒），但由于没有更高优先级任务，shouldYield仍然返回false，导致任务无限期运行。
  • React内部通常将其设定为大约 300ms。
  • 即使没有达到frameInterval的截止时间，如果一个任务已经连续运行了maxYieldInterval，调度器也会强制暂停，以防止主线程长时间被霸占，给用户一个更长的响应时间，但至少不会是无限期阻塞。

4. 关键计时指标：currentTime 与 deadline

为了实现精准控时，React调度器依赖于高性能的计时API：

• performance.now()：
  • 这是浏览器提供的高精度时间戳API，返回自页面加载以来经过的毫秒数，精度可达微秒。
  • React使用它来获取当前时间，以计算任务的执行时长和剩余时间。
• currentTime: 当前时间，通过performance.now()获取。
• startTime: 当前工作批次开始的时间。
• deadline: 当前工作批次的截止时间，计算方式为 startTime + frameInterval。

5. shouldYield 的详细逻辑拆解

现在我们来深入探讨shouldYield（或其在React Scheduler中的等效逻辑）是如何判断是否需要暂停的。

其核心判断逻辑通常包含以下几个方面：

1. 是否有更高优先级的同步任务等待？

   • 这是最高级别的检查。如果此时有Sync或UserBlocking级别（例如，用户刚刚输入了文本，或者点击了一个需要立即响应的按钮）的任务等待，那么无论当前任务的剩余时间如何，都应该立即中断，优先处理高优先级任务。这是为了确保用户交互的即时响应。
   • 在React Fiber中，这通常通过检查一个全局的hasPendingSyncWork或currentEventStartTime来判断。

2. 当前时间是否已超出预设的帧时间预算（deadline）？

   • 这是最常见的暂停条件。如果 performance.now() 已经超过了 startTime + frameInterval，那么意味着当前帧的“切片”时间已用尽，应该暂停。
   • currentTime > deadline

3. 是否有更高优先级的任务在等待队列中？

   • 即使当前任务还没有达到其自身的deadline，但如果调度器发现任务队列中有一个更高优先级（更早的expirationTime）的任务已经准备好执行，那么也应该暂停当前任务，让出CPU给更高优先级的任务。
   • 这需要通过peek()操作查看任务队列中的下一个任务。

4. 是否达到了maxYieldInterval强制中断上限？

   • 这是一个兜底机制。如果一个低优先级任务运行了很长时间，甚至超过了maxYieldInterval（例如，300ms），即使没有达到其frameInterval的deadline，也应该强制中断。这可以避免低优先级任务在某些特定情况下霸占主线程过久。

5. 当前任务的优先级是否为Idle？

   • Idle优先级的任务具有特殊的处理方式。它们被期望在浏览器完全空闲时才执行，并且是可被无限期推迟的。对于Idle任务，shouldYield的判断可能会更严格，或者当有任何其他待处理任务时，Idle任务就应该立即暂停。

shouldYield 简化模拟伪代码：

为了更好地理解，我们用伪代码来模拟shouldYield函数的逻辑。

// 全局状态或调度器实例的成员变量
let currentTaskStartTime = performance.now(); // 当前任务批次开始时间
const frameInterval = 5; // 每次时间切片的预算，单位ms
const maxYieldInterval = 300; // 强制中断的上限，单位ms
let nextHostCallback = null; // 存储即将执行的宏任务回调
let isMessageChannelScheduled = false; // 标记MessageChannel是否已调度

// 模拟的优先级队列 (使用我们之前定义的MinHeap)
const taskQueue = new MinHeap();

// 模拟的当前正在执行的任务
let currentExecutingTask = null;

// 调度宏任务的辅助函数 (使用MessageChannel作为默认)
const channel = new MessageChannel();
channel.port1.onmessage = () => {
  isMessageChannelScheduled = false;
  if (nextHostCallback) {
    nextHostCallback();
  }
};
function requestHostCallback(callback) {
  nextHostCallback = callback;
  if (!isMessageChannelScheduled) {
    isMessageChannelScheduled = true;
    channel.port2.postMessage(null);
  }
}

// 获取当前任务的截止时间
function getTaskDeadline() {
  // 实际React会根据任务优先级动态计算
  // 这里简化为固定frameInterval
  return currentTaskStartTime + frameInterval;
}

// 核心判断函数：是否应该让出主线程
function shouldYieldToHost() {
  const currentTime = performance.now();

  // 1. 检查是否有更高优先级的同步任务等待 (这里简化为全局标志)
  // 实际React有更复杂的Lane模型来处理优先级
  if (hasPendingSyncWork()) { // 假设存在一个函数来检查同步工作
      return true;
  }

  // 2. 检查是否达到当前任务批次的截止时间 (5ms预算)
  // 如果当前时间已经超过了当前批次开始时间 + frameInterval，则应该暂停
  if (currentTime >= getTaskDeadline()) {
    // 3. 额外检查：是否有更高优先级的任务在等待队列中
    // 即使当前任务还没达到其自身的截止时间，但如果队列中有更紧急的任务，也应让步
    const nextTask = taskQueue.peek();
    if (nextTask && nextTask.expirationTime < currentTaskStartTime + frameInterval) {
        // 如果下一个任务的截止时间比当前批次的截止时间更早，说明它更紧急
        return true;
    }

    // 4. 考虑 maxYieldInterval 强制中断
    // 如果一个任务已经连续执行了很长时间，强制中断
    if (currentTime - currentTaskStartTime > maxYieldInterval) {
        return true;
    }

    // 5. 特殊处理 Idle 优先级任务
    if (currentExecutingTask && currentExecutingTask.priorityLevel === PRIORITY_LEVEL.Idle) {
        // Idle任务在任何时候都应该尽可能让步
        return true;
    }

    // 默认情况下，如果时间到了，就让步
    return true;
  }

  // 如果时间还没到，并且没有其他更高优先级或强制中断条件，则可以继续工作
  return false;
}

// 调度器的主要工作循环
function performWorkUntilDeadline() {
  // 更新当前任务批次的开始时间
  currentTaskStartTime = performance.now();

  let hasMoreWork = false;
  let nextTask = taskQueue.peek();

  // 循环执行任务，直到没有任务或者需要让出主线程
  while (nextTask !== null) {
    // 检查是否应该让出主线程
    if (shouldYieldToHost()) {
      hasMoreWork = true; // 还有任务没做完，需要重新调度
      break; // 暂停当前循环，让出主线程
    }

    // 取出并执行当前任务 (优先级最高的任务)
    currentExecutingTask = taskQueue.pop();
    if (currentExecutingTask) {
      const callbackResult = currentExecutingTask.callback(); // 执行任务回调
      if (callbackResult === true) {
        // 如果回调返回true，表示任务未完成，需要重新入队
        // 这里简化处理，实际Scheduler会根据返回的优先级和时间重新调度
        // currentExecutingTask.expirationTime = someNewExpirationTime;
        // taskQueue.push(currentExecutingTask);
        hasMoreWork = true;
      }
    }
    nextTask = taskQueue.peek(); // 获取下一个任务
  }
  currentExecutingTask = null; // 当前任务执行完毕或暂停

  // 如果还有未完成的任务，则重新调度 performWorkUntilDeadline
  if (hasMoreWork) {
    requestHostCallback(performWorkUntilDeadline);
  }
}

// 模拟调度一个任务
function scheduleWork(callback, priorityLevel) {
  const expirationTime = calculateExpirationTime(priorityLevel); // 根据优先级计算截止时间
  const newTask = new Task(callback, expirationTime, priorityLevel);
  taskQueue.push(newTask);

  // 确保工作循环被启动
  requestHostCallback(performWorkUntilDeadline);
}

// 模拟的优先级常量
const PRIORITY_LEVEL = {
    Sync: 0,
    UserBlocking: 1,
    High: 2,
    Normal: 3,
    Low: 4,
    Idle: 5
};

// 模拟计算任务截止时间 (实际React更复杂，考虑不同Lane)
function calculateExpirationTime(priorityLevel) {
    const currentTime = performance.now();
    switch (priorityLevel) {
        case PRIORITY_LEVEL.Sync: return currentTime; // 立即执行
        case PRIORITY_LEVEL.UserBlocking: return currentTime + 50; // 50ms内响应
        case PRIORITY_LEVEL.High: return currentTime + 100; // 100ms内响应
        case PRIORITY_LEVEL.Normal: return currentTime + 5000; // 5秒内响应
        case PRIORITY_LEVEL.Low: return currentTime + 10000; // 10秒内响应
        case PRIORITY_LEVEL.Idle: return currentTime + Infinity; // 浏览器空闲时
        default: return currentTime + 5000;
    }
}

// 模拟一个同步工作检查函数
let _hasPendingSyncWork = false;
function hasPendingSyncWork() {
    return _hasPendingSyncWork;
}
function setPendingSyncWork(value) {
    _hasPendingSyncWork = value;
    if (value) {
        // 如果有同步工作，可能需要立即触发调度
        requestHostCallback(performWorkUntilDeadline);
    }
}

// --- 示例用法 ---
console.log("Scheduler starting...");

scheduleWork(() => {
    console.log("Executing Normal Priority Task 1 - Part 1");
    let i = 0;
    while(i < 1000000 && !shouldYieldToHost()) { i++; } // 模拟耗时计算
    if (i < 1000000) {
        console.log("Normal Task 1 paused, done with " + i + " iterations.");
        return true; // 表示任务未完成，需要重新调度
    }
    console.log("Executing Normal Priority Task 1 - Completed. Iterations: " + i);
    return false; // 任务完成
}, PRIORITY_LEVEL.Normal);

scheduleWork(() => {
    console.log("Executing Low Priority Task 2");
    // 模拟一个更长的耗时任务
    let i = 0;
    while(i < 5000000 && !shouldYieldToHost()) { i++; }
    if (i < 5000000) {
        console.log("Low Task 2 paused, done with " + i + " iterations.");
        return true;
    }
    console.log("Executing Low Priority Task 2 - Completed. Iterations: " + i);
    return false;
}, PRIORITY_LEVEL.Low);

// 模拟一个高优先级用户输入事件
setTimeout(() => {
    console.log("--- User Blocking Event triggered! ---");
    setPendingSyncWork(true); // 标记有同步工作
    scheduleWork(() => {
        console.log("Executing User Blocking Task 3 - Part 1");
        // 模拟一个非常快的任务
        let i = 0;
        while(i < 10000 && !shouldYieldToHost()) { i++; }
        console.log("Executing User Blocking Task 3 - Completed.");
        setPendingSyncWork(false); // 同步工作完成
        return false;
    }, PRIORITY_LEVEL.UserBlocking);
}, 20); // 20ms后模拟用户输入

代码解释：

1. currentTaskStartTime 记录了当前批次工作开始的时间，用于计算deadline。
2. frameInterval 和 maxYieldInterval 定义了时间切片的预算和强制中断的上限。
3. requestHostCallback 模拟了向浏览器注册宏任务（这里使用MessageChannel）。
4. shouldYieldToHost() 是核心函数，它集合了之前提到的所有判断条件：
   • 检查是否有同步工作（hasPendingSyncWork()）。
   • 检查是否达到frameInterval的截止时间。
   • 检查任务队列中是否有更高优先级的任务。
   • 检查是否达到maxYieldInterval。
   • 考虑当前任务是否为Idle优先级。
5. performWorkUntilDeadline() 是调度器的主循环。它在每次迭代中，在执行任务之前或之后调用 shouldYieldToHost() 来判断是否需要暂停。如果需要暂停，它会设置hasMoreWork = true并中断循环，然后重新调度自身在下一个宏任务中继续执行。
6. Task 类和 MinHeap 实现了优先级队列。
7. scheduleWork 函数将任务添加到队列并启动调度。
8. 示例用法展示了不同优先级的任务如何被调度，以及一个模拟的用户阻塞事件如何打断低优先级任务。

通过这种精细的计时和判断机制，React调度器能够动态地决定在何时暂停渲染工作，何时将控制权交还给浏览器，从而确保即使在执行复杂任务时，应用也能保持高度的响应性。

实践中的时间切片：React的渲染与提交

了解了调度器如何计算和管理时间后，我们再来看看它如何在React的实际渲染流程中发挥作用。React的更新过程分为两个主要阶段：渲染阶段（Render Phase）和提交阶段（Commit Phase）。

1. 可中断的渲染阶段（Render Phase）

渲染阶段是React构建workInProgress Fiber树的过程。在这个阶段，React会：

• 遍历Fiber树：从Root Fiber开始，深度优先遍历（先beginWork，再completeWork）。
• 执行组件的render方法或函数组件体：计算新的Virtual DOM（或JSX），并构建新的Fiber节点。
• 执行生命周期方法：如类组件的getDerivedStateFromProps、shouldComponentUpdate等。
• 标记副作用：在Fiber节点上设置effectTag，记录需要对真实DOM进行的修改（插入、更新、删除等）。
• 计算优先级（Lane）：每个Fiber节点都会有一个expirationTime或lane（React 18引入的更精细的优先级模型），指示这个更新的优先级。

时间切片在这里发挥作用：

在渲染阶段，每次处理完一个Fiber节点（或一小批Fiber节点）后，React就会调用调度器的shouldYieldToHost()函数。

• 如果shouldYieldToHost()返回false（即还有时间继续工作），React会继续处理下一个Fiber节点。
• 如果shouldYieldToHost()返回true（即时间已用尽或有更高优先级任务），React会暂停当前的渲染工作。它会记录下当前处理到的Fiber节点，然后将控制权交还给浏览器。当调度器在下一个宏任务中再次获得控制权时，它会从上次暂停的地方继续渲染。

这种可中断的特性是Fiber架构的核心优势。它意味着一个长时间的渲染任务可以被分解成许多小块，穿插在浏览器的每一帧中执行，从而避免了主线程的长时间阻塞。

2. 不可中断的提交阶段（Commit Phase）

当整个workInProgress Fiber树构建完毕，并且所有更新都已计算完成，或者渲染阶段被高优先级任务打断后，React会进入提交阶段。

提交阶段是同步且不可中断的。 在这个阶段，React会：

• 应用DOM更新：根据渲染阶段收集到的effectTag，批量地、高效地将所有DOM操作（插入、更新、删除）应用到真实的DOM上。
• 执行生命周期方法和副作用：
  • 类组件的getSnapshotBeforeUpdate、componentDidMount、componentDidUpdate、componentWillUnmount。
  • 函数组件的useEffect、useLayoutEffect回调。
• 切换current树：将workInProgress树标记为新的current树。

为什么提交阶段必须同步完成？

• UI一致性：如果在提交阶段发生中断，可能会导致DOM处于不一致的中间状态，用户可能会看到部分更新、部分未更新的UI，造成视觉上的闪烁或错误。
• 副作用的原子性：DOM操作和生命周期方法通常是具有副作用的，它们需要在一个原子操作中完成，以确保应用的逻辑正确性。
• 浏览器限制：真实的DOM操作本身就是同步的，并且通常是相对快速的（如果批处理得当），因此将其分片处理的收益不大，反而增加了复杂性。

因此，提交阶段的耗时也需要控制在16.67ms的帧预算内。如果提交阶段本身耗时过长，仍然可能导致掉帧。React通过精巧的算法（如批量DOM更新）来优化提交阶段的性能。

并发模式带来的开发者体验与最佳实践

React的并发模式和时间切片技术虽然是底层实现，但也通过高层API暴露给开发者，带来了全新的编程范式和优化用户体验的能力。

1. startTransition：标记低优先级更新

startTransition是一个新的API，它允许你将某些状态更新标记为“过渡”（transition）。被标记为过渡的更新会被视为低优先级任务，React会尝试在浏览器空闲时或不阻塞用户输入的情况下执行它们。

import { startTransition, useState } from 'react';

function SearchInput() {
  const [query, setQuery] = useState('');
  const [searchResults, setSearchResults] = useState([]);

  const handleChange = (e) => {
    const newQuery = e.target.value;
    setQuery(newQuery); // 立即更新输入框，高优先级

    // 将搜索结果的更新标记为过渡，低优先级
    startTransition(() => {
      // 模拟一个耗时的搜索操作
      const results = performExpensiveSearch(newQuery);
      setSearchResults(results);
    });
  };

  return (
    <div>
      <input type="text" value={query} onChange={handleChange} />
      {/* 显示搜索结果 */}
      <ul>
        {searchResults.map((result) => (
          <li key={result.id}>{result.name}</li>
        ))}
      </ul>
    </div>
  );
}

在这个例子中，当用户输入文本时，setQuery(newQuery)会立即执行，更新输入框的内容，确保用户输入的即时反馈（高优先级）。而setSearchResults(results)则被包裹在startTransition中，这意味着React会将其视为一个可以被中断或推迟的低优先级任务。如果用户在搜索结果尚未出来之前又输入了新的字符，React会优先处理新的输入，而中断或废弃旧的搜索结果渲染。

2. useDeferredValue：延迟更新值

useDeferredValue是一个Hook，它允许你延迟更新一个值。当原始值频繁变化时，它会提供一个“延迟”版本的值，这个延迟值的更新会被React降级为低优先级。

import { useDeferredValue, useState } from 'react';

function TypeaheadSearch() {
  const [query, setQuery] = useState('');
  // 延迟版本的query，它的更新优先级较低
  const deferredQuery = useDeferredValue(query);

  // SearchResults 组件会使用 deferredQuery 进行搜索
  // 它的渲染会被标记为低优先级
  return (
    <div>
      <input type="text" value={query} onChange={(e) => setQuery(e.target.value)} />
      <SearchResults query={deferredQuery} />
    </div>
  );
}

function SearchResults({ query }) {
  // 模拟耗时操作，当 query 变化时进行搜索
  const results = useExpensiveSearch(query); // 假设这是一个耗时的自定义Hook
  return (
    <ul>
      {results.map((result) => (
        <li key={result.id}>{result.name}</li>
      ))}
    </ul>
  );
}

在这个例子中，query会立即更新，确保输入框的流畅。而deferredQuery的更新会被延迟，SearchResults组件的重新渲染也会因此被降级为低优先级。这样，即使搜索结果的渲染很慢，也不会阻塞输入框的响应。

3. Suspense：配合并发模式进行数据获取与UI协调

Suspense是React并发模式的另一个重要组成部分，它允许组件“暂停”渲染，直到其所需的数据准备就绪。结合并发模式，React可以在数据加载时显示一个回退UI（如加载指示器），并在数据就绪后无缝切换到实际内容。

import { Suspense } from 'react';

function App() {
  return (
    <Suspense fallback={<LoadingSpinner />}>
      <ProfilePage />
    </Suspense>
  );
}

function ProfilePage() {
  // 假设这是一个异步加载用户数据的组件
  // 如果数据未就绪，它会抛出一个Promise，Suspense会捕获并显示fallback
  const userData = use(fetchUserData());
  return (
    <div>
      <h1>{userData.name}</h1>
      <ProfileDetails data={userData.details} />
    </div>
  );
}

在并发模式下，当ProfilePage组件因为数据未就绪而“挂起”时，React不会阻塞主线程。它会尝试渲染fallback，同时在后台继续加载数据。当数据加载完成后，React会再次尝试渲染ProfilePage，并且由于时间切片，这个过程也是非阻塞的。

4. 注意事项：副作用的清除与避免非纯计算

并发模式和时间切片虽然强大，但也对开发者的代码提出了新的要求：

• 渲染阶段必须是纯净的：由于渲染阶段可能被中断、暂停、甚至重新开始，因此在这个阶段（组件的render方法、函数组件体）不应该有任何副作用。所有副作用都应该放在useEffect或useLayoutEffect中。
• useEffect 和 useLayoutEffect 的区分：
  • useLayoutEffect：在DOM更新后、浏览器绘制前同步执行，适合执行会读取或修改DOM布局的副作用（例如，测量DOM元素大小）。
  • useEffect：在浏览器绘制后异步执行，适合执行不会影响DOM布局的副作用（例如，数据获取、事件监听）。
• 清除副作用：确保useEffect的回调函数返回一个清理函数，以正确处理组件卸载或依赖项变化时的副作用清理。

遵循这些最佳实践，可以确保你的React应用在并发模式下运行稳定且高效。

展望：并发模式的未来与更流畅的用户体验

React的并发模式和时间切片技术是Web前端发展的重要里程碑。它将前端性能优化的重心从仅仅“更快地执行代码”转向“更智能地调度代码”。通过将耗时任务切片，并根据优先级灵活调度，React极大地提升了用户界面的响应性和流畅性，尤其是在处理复杂交互和大数据量应用时。

展望未来，React的并发模式还将支持更多高级特性，例如：

• Selective Hydration（选择性水合）：允许在服务器渲染的HTML中，优先水合（使其可交互）用户正在交互的部分，而不是等待整个页面水合完成。
• Server Components（服务器组件）：将一些组件的渲染工作完全放到服务器端进行，减少客户端JavaScript的负载，进一步提升初始加载性能。

这些进步都建立在时间切片和并发调度的基础之上。React团队持续的创新，旨在让开发者能够更轻松地构建出既功能强大又拥有卓越用户体验的Web应用。通过对这些底层机制的深入理解，开发者将能更好地利用React的强大能力，为用户带来真正无缝、流畅的数字体验。