Scheduler （主逻辑）

是 Scheduler 的主要逻辑文件。

而主逻辑部分在 调度器回调 中。

• 任务优先级 ： 该数据在 任务优先级 文件中列出
• 时间切片 ： 使用 window.postMessage 或 MessageChannel 拆分任务，避免阻塞主线程（每 5ms 做哟让出控制权）

信息

移除了源码中的 $FlowFixMe Flow 的错误抑制

一、 不稳定的方法：调度器回调

执行流程

1.任务结构

每个任务都是一个对象，包含以下核心属性：

TypeScript

interface newTask {
  // 唯一的标识
  id: number;
  // 任务执行的回调函数（如 Fiber 工作单元）
  callback: Function;
  // 优先等级（如 UserBlockingPriority ）
  priorityLevel: number;
  // 过期时间（能接受的执行最晚时间）
  expirationTime: number;
  // 排序索引（用于列队排序，值越小越优先）
  sortIndex: number;
}

• sortIndex 通常等于 expirationTime ，确保列队按「过期时间」生序排列（优先级高的任务先出队）

2.源码

function unstable_scheduleCallback(
  priorityLevel: PriorityLevel,
  callback: Callback,
  options?: { delay: number },
): Task {
  // 当前的时间
  var currentTime = getCurrentTime();
  // 开始时间
  var startTime;

  // 判定当前的配置参数是否为含 `delay` 属性的对象
  if (typeof options === 'object' && options !== null) {
    var delay = options.delay; // 使用该延迟设定任务的开始时间
    if (typeof delay === 'number' && delay > 0) {
      startTime = currentTime + delay;
    } else {
      startTime = currentTime;
    }
  } else {
    startTime = currentTime;
  }

  // 超时时间
  var timeout;
  // 根据任务的等级设定超时时间
  switch (priorityLevel) {
    case ImmediatePriority:
      // Times out immediately
      // 立即超时
      timeout = -1;
      break;
    case UserBlockingPriority:
      // Eventually times out
      // 最终超时
      timeout = userBlockingPriorityTimeout;
      break;
    case IdlePriority:
      // Never times out
      // 永不超时
      timeout = maxSigned31BitInt;
      break;
    case LowPriority:
      // Eventually times out
      // 最终超时
      timeout = lowPriorityTimeout;
      break;
    case NormalPriority:
    default:
      // Eventually times out
      // 最终超时
      timeout = normalPriorityTimeout;
      break;
  }
  // 到期时间
  var expirationTime = startTime + timeout;

  // 新的任务
  var newTask: Task = {
    id: taskIdCounter++,
    callback,
    priorityLevel,
    startTime,
    expirationTime,
    // 用于延迟任务排序
    sortIndex: -1,
  };
  // 启用性能分析
  if (enableProfiling) {
    newTask.isQueued = false; // 已排队
  }

  if (startTime > currentTime) {
    // This is a delayed task.
    // 这是一个延迟任务
    newTask.sortIndex = startTime;
    push(timerQueue, newTask); // 将延迟任务推到定时器堆中
    // 如果当前任务堆为空且当前任务在定时器堆中为堆顶
    if (peek(taskQueue) === null && newTask === peek(timerQueue)) {
      // All tasks are delayed, and this is the task with the earliest delay.
      // 所有任务都已延迟，这是延迟最早的任务
      if (isHostTimeoutScheduled) {
        // Cancel an existing timeout.
        // 取消现有定时任务
        cancelHostTimeout();
      } else {
        isHostTimeoutScheduled = true;
      }
      // Schedule a timeout.
      // 安排一个定时任务
      requestHostTimeout(handleTimeout, startTime - currentTime);
    }
  } else {
    newTask.sortIndex = expirationTime;
    push(taskQueue, newTask); // 立即执行任务入任务堆中
    if (enableProfiling) {
      // 标记开始
      markTaskStart(newTask, currentTime);
      newTask.isQueued = true;
    }
    // Schedule a host callback, if needed. If we're already performing work,
    // 如果需要，安排宿主回调。如果我们已经在执行工作
    // wait until the next time we yield.
    // 等到下一次让步时再继续。
    if (!isHostCallbackScheduled && !isPerformingWork) {
      isHostCallbackScheduled = true;
      requestHostCallback();
    }
  }

  // 返回新的任务
  return newTask;
}

二、 不稳定的方法：以优先级运行

function unstable_runWithPriority<T>(
  priorityLevel: PriorityLevel,
  eventHandler: () => T,
): T {
  switch (priorityLevel) {
    case ImmediatePriority:
    case UserBlockingPriority:
    case NormalPriority:
    case LowPriority:
    case IdlePriority:
      break;
    default:
      priorityLevel = NormalPriority;
  }
  // 把当前的优先级设定为先前的优先级
  var previousPriorityLevel = currentPriorityLevel;
  // 把使用该方法的优先级设定为当前优先级
  currentPriorityLevel = priorityLevel;

  try {
    return eventHandler();
  } finally {
    currentPriorityLevel = previousPriorityLevel;
  }
}

三、不稳定的方法：执行下一个

function unstable_next<T>(eventHandler: () => T): T {
  var priorityLevel: PriorityLevel;
  switch (currentPriorityLevel) {
    case ImmediatePriority:
    case UserBlockingPriority:
    case NormalPriority:
      // Shift down to normal priority
      // 降低到普通优先级
      priorityLevel = NormalPriority;
      break;
    default:
      // Anything lower than normal priority should remain at the current level.
      // 低于正常优先级的事项应保持在当前级别
      priorityLevel = currentPriorityLevel;
      break;
  }

  var previousPriorityLevel = currentPriorityLevel;
  currentPriorityLevel = priorityLevel;

  try {
    return eventHandler();
  } finally {
    currentPriorityLevel = previousPriorityLevel;
  }
}

四、 不稳定的方法： wrap 回调

function unstable_wrapCallback<T: (...Array<mixed>) => mixed>(callback: T): T {
 var parentPriorityLevel = currentPriorityLevel;
 return function () {
   // This is a fork of runWithPriority, inlined for performance.
   // 这是 runWithPriority 的一个分支，为了性能而进行了内联。
   var previousPriorityLevel = currentPriorityLevel;
   currentPriorityLevel = parentPriorityLevel;

   try {
     return callback.apply(this, arguments);
   } finally {
     currentPriorityLevel = previousPriorityLevel;
   }
 };
}

五、 不稳定的方法： 获取当前的时间

根据当前设备是否支持 window.performance 来初始化方法。

// 具体实现好像根据使用环境是否支持 `window.performance` 而不同
let getCurrentTime: () => number | DOMHighResTimeStamp;

const hasPerformanceNow =
  typeof performance === 'object' && typeof performance.now === 'function';
if (hasPerformanceNow) {
  const localPerformance = performance;
  getCurrentTime = () => localPerformance.now();
} else {
  const localDate = Date;
  const initialTime = localTime.now();
  getCurrentTime = () => localDate.now() - initialTime;
}

六、 不稳定的方法：取消回调

将某个任务设定为取消状态。

由于任务是以二叉堆的数据结构进行的储存，不能直接修改堆数据（除非在堆顶）。所以将该任务的回调设置为 null ，就相当于打了标记，执行到该任务时直接跳过。

function unstable_cancelCallback(task: Task) {
  if (enableProfiling) {
    if (task.isQueued) {
      const currentTime = getCurrentTime();
      markTaskCanceled(task, currentTime);
      task.isQueued = false;
    }
  }

  // Null out the callback to indicate the task has been canceled. (Can't
  // 将回调置为 null 以表示任务已取消。
  // remove from the queue because you can't remove arbitrary nodes from an
  // （无法从队列中移除，因为不能从基于数组的
  // array based heap, only the first one.)
  // 堆中移除任意节点，只能移除第一个节点。）
  task.callback = null;
}

七、 不稳定的方法：获取当前的等级

function unstable_getCurrentPriorityLevel(): PriorityLevel {
  return currentPriorityLevel;
}

八、 不稳定的方法：时间切片

为了避免阻塞主线程， shouldYieldToHost 判断是否需要让给主线程（即是否超过时间切片阀值）。

• 时间乏值通常为 5ms，即执行的时间超过了 5ms 时，返回 true ，暂停当前任务，让出主线程给浏览器（如渲染 UI、响应用户输入）
• 时间切片阀值会根据浏览器环境动态调整（如后台标签阀值更大）

function shouldYieldToHost(): boolean {
  // 某些条件
  if (!enableAlwaysYieldScheduler && enableRequestPaint && needsPaint) {
    // 让步
    return true;
  }
  const timeElapsed = getCurrentTime() - startTime;
  if (timeElapsed < frameInterval) {
    // The main thread has only been blocked for a really short amount of time;
    // 主线程只被阻塞了很短的时间
    // smaller than a single frame. Don't yield yet.
    // 小于单帧的时间。暂时不要让出控制权
    return false;
  }

  return true;
}

九、 不稳定的方法：是否必须绘制

function requestPaint() {
  if (enableRequestPaint) {
    needsPaint = true;
  }
}

十、不稳定的方法：强制帧率

function forceFrameRate(fps: number) {
  if (fps < 0 || fps > 125) {
    // Using console['error'] to evade Babel and ESLint
    // 使用 console['error'] 来规避 Babel 和 ESLint
    console['error'](
      'forceFrameRate takes a positive int between 0 and 125, ' +
        'forcing frame rates higher than 125 fps is not supported',
    );
    return;
  }
  if (fps > 0) {
    frameInterval = Math.floor(1000 / fps);
  } else {
    // reset the framerate
    // 重置帧率
    frameInterval = frameYieldMs;
  }
}

十一、 内部工具

1. 申请主线程回调

// 主方法
function requestHostCallback() {
  // 是否是循环执行的消息
  if (!isMessageLoopRunning) {
    isMessageLoopRunning = true;
    schedulePerformWorkUntilDeadline();
  }
}

2. 未转让执行权前执行者

// 在截止日期前完成工作
const performWorkUntilDeadline = () => {
  if (enableRequestPaint) {
    needsPaint = false;
  }
  if (isMessageLoopRunning) {
    const currentTime = getCurrentTime();
    // Keep track of the start time so we can measure how long the main thread
    // has been blocked.
    // 跟踪开始时间，以便我们可以测量主线程被阻塞了多久
    startTime = currentTime;

    // If a scheduler task throws, exit the current browser task so the
    // 如果调度器任务抛出异常，则退出当前浏览器任务，以便可以观察到错误。
    // error can be observed.
    //
    // Intentionally not using a try-catch, since that makes some debugging
    // 故意不使用 try-catch，因为那会让一些调试技术变得更困难
    // techniques harder. Instead, if `flushWork` errors, then `hasMoreWork` will
    // 相反，如果 `flushWork` 出错，`hasMoreWork` 将保持为 true
    // remain true, and we'll continue the work loop.
    // 我们将继续工作循环
    let hasMoreWork = true;
    try {
      hasMoreWork = flushWork(currentTime);
    } finally {
      if (hasMoreWork) {
        // If there's more work, schedule the next message event at the end
        // 如果还有更多工作，请在前一个消息事件结束时安排下一个消息事件。
        // of the preceding one.
        schedulePerformWorkUntilDeadline();
      } else {
        isMessageLoopRunning = false;
      }
    }
  }
};

3. 安排执行宏任务

// 按计划执行工作直到截止时间 （这是一个可函数）
let schedulePerformWorkUntilDeadline;

if (typeof localSetImmediate === 'function') {
  // Node.js and old IE.
  // Node.js 和旧版 IE
  // There's a few reasons for why we prefer setImmediate.
  // 我们更倾向于使用 setImmediate 有几个原因
  //
  // Unlike MessageChannel, it doesn't prevent a Node.js process from exiting.
  // 与 MessageChannel 不同，它不会阻止 Node.js 进程退出
  // (Even though this is a DOM fork of the Scheduler, you could get here
  // （尽管这是 Scheduler 的一个 DOM 分支，但你可能会在
  // with a mix of Node.js 15+, which has a MessageChannel, and jsdom.)
  // Node.js 15 中用到 MessageChannel 和 jsdom 的组合后遇到这里。）
  // https://github.com/facebook/react/issues/20756
  //
  // But also, it runs earlier which is the semantic we want.
  // 另外，它执行得更早，这符合我们的语义需求
  // If other browsers ever implement it, it's better to use it.
  // 如果其他浏览器将来实现它，使用它会更好
  // Although both of these would be inferior to native scheduling.
  // 尽管这两者都不如原生调度方式
  schedulePerformWorkUntilDeadline = () => {
    localSetImmediate(performWorkUntilDeadline);
  };
} else if (typeof MessageChannel !== 'undefined') {
  // DOM and Worker environments.
  // DOM 和 Worker 环境
  // We prefer MessageChannel because of the 4ms setTimeout clamping.
  // 我们更倾向于使用 MessageChannel，因为 setTimeout 最低延迟为 4 毫秒
  const channel = new MessageChannel();
  const port = channel.port2;
  channel.port1.onmessage = performWorkUntilDeadline;
  schedulePerformWorkUntilDeadline = () => {
    port.postMessage(null);
  };
} else {
  // We should only fallback here in non-browser environments.
  // 我们只有在非浏览器环境下才应该回退到这里。
  schedulePerformWorkUntilDeadline = () => {
    localSetTimeout(performWorkUntilDeadline, 0);
  };
}

4. 刷新工作

function flushWork(initialTime: number) {
  if (enableProfiling) {
    // 测试性能时，标记调度器为未暂停状态
    markSchedulerUnsuspended(initialTime);
  }
  // We'll need a host callback the next time work is scheduled.
  // 安排下次工作时需要主机回调
  isHostCallbackScheduled = false;
  if (isHostTimeoutScheduled) {
    // We scheduled a timeout but it's no longer needed. Cancel it.
    // 我们安排了一个暂停，但现在不需要了。取消它。
    isHostTimeoutScheduled = false;
    cancelHostTimeout(); // 取消已设定的定时任务
  }

  isPerformingWork = true;
  // 当前的优先级（变成了先前的优先级）
  const previousPriorityLevel = currentPriorityLevel;
  try {
    if (enableProfiling) {
      try {
        // 循环执行
        return workLoop(initialTime);
      } catch (error) {
        if (currentTask !== null) {
          const currentTime = getCurrentTime();

          markTaskErrored(currentTask, currentTime);
          currentTask.isQueued = false;
        }
        throw error;
      }
    } else {
      // No catch in prod code path.
      // 生产代码路径没有捕获到错误
      // 循环执行
      return workLoop(initialTime);
    }
  } finally {
    currentTask = null; // 当前任务为空
    currentPriorityLevel = previousPriorityLevel; // 当前等级为上一个等级
    isPerformingWork = false; // 当前未在执行
    if (enableProfiling) {
      const currentTime = getCurrentTime();
      // 标记调度程序已暂停
      markSchedulerSuspended(currentTime);
    }
  }
}

5. 内循环执行

循环执行，这里是 Scheduler 任务执行的核心逻辑。

function workLoop(initialTime: number) {
  let currentTime = initialTime;
  advanceTimers(currentTime); // 任务进行步进
  currentTask = peek(taskQueue); // 当前的任务
  while (currentTask !== null) {
    //  禁止了始终启用调度器
    if (!enableAlwaysYieldScheduler) {
      if (currentTask.expirationTime > currentTime && shouldYieldToHost()) {
        // This currentTask hasn't expired, and we've reached the deadline.
        // 当前任务尚未过期，但我们已达到截止日期
        break;
      }
    }
    const callback = currentTask.callback;
    if (typeof callback === 'function') {
      currentTask.callback = null;
      currentPriorityLevel = currentTask.priorityLevel;
      const didUserCallbackTimeout = currentTask.expirationTime <= currentTime;
      if (enableProfiling) {
        markTaskRun(currentTask, currentTime);
      }
      const continuationCallback = callback(didUserCallbackTimeout);
      currentTime = getCurrentTime();
      if (typeof continuationCallback === 'function') {
        // If a continuation is returned, immediately yield to the main thread
        // 如果返回了一个继续操作
        // regardless of how much time is left in the current time slice.
        // 无论当前时间片还剩多少时间，都立即让出给主线程
        currentTask.callback = continuationCallback;
        if (enableProfiling) {
          markTaskYield(currentTask, currentTime);
        }
        advanceTimers(currentTime);
        return true;
      } else {
        if (enableProfiling) {
          markTaskCompleted(currentTask, currentTime);
          currentTask.isQueued = false;
        }
        if (currentTask === peek(taskQueue)) {
          pop(taskQueue);
        }
        advanceTimers(currentTime);
      }
    } else {
      // 当回调被移除时，该任务亦直接移除
      pop(taskQueue);
    }
    currentTask = peek(taskQueue); // 检出堆顶
    //  始终启用让步调度器
    if (enableAlwaysYieldScheduler) {
      if (currentTask === null || currentTask.expirationTime > currentTime) {
        // This currentTask hasn't expired we yield to the browser task.
        // 当前任务尚未过期，我们让出给浏览器任务。
        break;
      }
    }
  }
  // Return whether there's additional work
  // 返回是否有额外工作
  if (currentTask !== null) {
    return true;
  } else {
    // 检出定时器列队堆顶
    const firstTimer = peek(timerQueue);
    if (firstTimer !== null) {
      // 请求定时任务
      requestHostTimeout(handleTimeout, firstTimer.startTime - currentTime);
    }
    return false;
  }
}

6. 步进任务

将定时器列队中的任务（尚未被取消的）从堆顶开始取出，若任务的开始时间比当前时间要早（任务过期）则取出放置到任务列队。

直到定时器最小堆的堆顶的开始时间比当前时间要晚，则停止转移任务。

function advanceTimers(currentTime: number) {
  // Check for tasks that are no longer delayed and add them to the queue.
  // 检查不再延迟的任务，并将它们添加到队列中。
  let timer = peek(timerQueue); // peek 在堆文件导出

  while (timer !== null) {
    if (timer.callback === null) {
      // Timer was cancelled.
      // 定时器被取消
      pop(timerQueue);
    } else if (timer.startTime <= currentTime) {
      // Timer fired. Transfer to the task queue.
      // 定时器触发。转移到任务列队
      // 从定时器列队取出堆顶任务
      pop(timerQueue);
      timer.sortIndex = timer.expirationTime; // 到期时间
      // 将任务放置到执行任务列队
      push(taskQueue, timer);
      if (enableProfiling) {
        // 如果允许测试性能，标记任务开始
        markTaskStart(timer, currentTime);
        timer.isQueued = true; // 标记任务已排队
      }
    } else {
      // Remaining timers are pending.
      // 剩余计时器正在等待中
      return;
    }
    // 捡出下一个定时器列队项
    timer = peek(timerQueue);
  }
}

7. 申请主线程定时任务

function requestHostTimeout(
  callback: (currentTime: number) => void,
  ms: number,
) {
  taskTimeoutID = localSetTimeout(() => {
    callback(getCurrentTime());
  }, ms);
}

8. 处理定时任务

根据设定的值处理将给定的时间做定时任务。

function handleTimeout(currentTime: number) {
  // 定时任务已安排
  isHostTimeoutScheduled = false;
  // 使用时间将任务进行步进
  advanceTimers(currentTime);
  // 若当前主机回调未调度
  if (!isHostCallbackScheduled) {
    // 查看任务列队是否为空
    if (peek(taskQueue) !== null) {
      // 任务列队不为空，设置当前任务继续
      isHostCallbackScheduled = true;
      // 请求主机回调
      requestHostCallback();
    } else {
      //  任务列队为空，则检测定时器列队
      const firstTimer = peek(timerQueue);
      // 定时器列队不为空则执行 `requestHostTimeout`
      if (firstTimer !== null) {
        requestHostTimeout(handleTimeout, firstTimer.startTime - currentTime);
      }
    }
  }
}

9. 取消主线程定时任务

function cancelHostTimeout() {

 localClearTimeout(taskTimeoutID); // 清理定时器
 taskTimeoutID = ((-1: any): TimeoutID); // 重置执行任务 ID
}

十二、 其他数据

在文件的头部定义了包用的变量与常量。

// Max 31 bit integer. The max integer size in V8 for 32-bit systems.
// 最大 31 位整数。在 32 位系统中的 V8 中，整数的最大尺寸
// Math.pow(2, 30) - 1
// 0b111111111111111111111111111111
// 最大有符号31位整数
var maxSigned31BitInt = 1073741823;

// Tasks are stored on a min heap
// 任务储存在最小堆中
var taskQueue: Array<Task> = [];
// 定时器列队
var timerQueue: Array<Task> = [];

// Incrementing id counter. Used to maintain insertion order.
// 递增 ID 计数器。用于保持插入顺序
var taskIdCounter = 1;

// 当前的任务堆
var currentTask = null;
// 当前的优先级
var currentPriorityLevel: PriorityLevel = NormalPriority;

// This is set while performing work, to prevent re-entrance.
// 这是在执行工作时设置的，用于防止重入
var isPerformingWork = false;
// 主机回调已调度
var isHostCallbackScheduled = false;
// 是否在处理定时任务
var isHostTimeoutScheduled = false;

// 需要绘制
var needsPaint = false;

// Capture local references to native APIs, in case a polyfill overrides them.
// 捕获对本地 API 的本地引用，以防止 polyfill 覆盖它们。
const localSetTimeout = typeof setTimeout === 'function' ? setTimeout : null;
// 本地清理定时任务方法
const localClearTimeout =
  typeof clearTimeout === 'function' ? clearTimeout : null;
// 本地立即设置
const localSetImmediate =
  typeof setImmediate !== 'undefined' ? setImmediate : null; // IE and Node.js + jsdom

十三、补充知识之 MessageChannel

const { port1, port2 } = new MessageChannel();

// 注册处理器
port1.onmessage = () => {
  console.log('我是一个回调方法');
};

setTimeout(() => {
  // 我向端口 1 发送了消息，以让其注册的回调方法被执行
  port2.pushMessage(null);
}, 12580);

• possMessage 会将消息放入 宏任务列队
• 下一次事件循环时， onmessage 被执行
• 这个过程 比 setTimeout(fn, 0) 更快，更可控