React18源码: task任务调度和时间分片

任务队列管理

• 调度的目的是为了消费任务，接下来就具体分析任务队列是如何管理与实现的

• 在 Scheduler.js 中，维护了一个 taskQueue,

• 任务队列管理就是围绕这个 taskQueue 展开

  // Tasks are stored on a min heap
  var taskQueue - [];
  var timerQueue = [];
  

• 注意

  • taskQueue一个堆数
  • 源码中除了 taskQueue 队列之外还有一个 timerQueue 队列, 这个队列是预留给延时任务使用的

创建任务

• 在 unstable_scheduleCallback 函数中

  // 省略部分无关代码
  function unstable_scheduleCallback(prioritylevel, callback, options) {// 1. 获取当前时间var currentTime = getCurrentTime();var startTime;if (typeof options === 'object' && options !== null) {//从函数调用关系来看，，所有调用 unstable_scheduleCallback 都未传入options// 所以省略延时任务相关的代码} else {startTime = currentTime;}//  2. 根据传入的优先级，设置任务的过期时间 expirationTimevar timeout;switch (priorityLevel) {case ImmediatePriority:timeout = IMMEDIATE_PRIORITY_TIMEOUT;break;case UserBlockingPriority:timeout = USER_BLOCKING_PRIORITY_TIMEOUT;break;case IdlePriority:timeout = IDLE_PRIORITY_TIMEOUT;break;case LowPriority:timeout = LOW_PRIORITY_TIMEOUT;break;case NormalPriority:default:timeout = NORMAL_PRIORITY_TIMEOUT;break}var expirationTime = startTime + timeout;// 3.创建新任务var newTask = {id: taskIdCounter ++,callback,priorityLevel,startTime,expirationTime,sortIndex: -1,}if (startTime > currentTime) {} else {newTask.sortIndex = expirationTime;// 4. 加入任务队列push(taskQueue, newTask);// 5.请求调度if (!isHostCallbackScheduled && !isPerformingWork) {isHostCallbackScheduled = true;requestHostCallback(flushWork);}}return newTask;
  }
  

消费任务

• 创建任务之后，最后请求调度 requestHostCallback(flushwork)(创建任务源码中的第5步)

• flushWork 函数作为参数被传入调度中心内核等待回调

• requestHostCallback 函数是调度内核中的一个

• 在调度中心中只需下一个事件循环就会执行回调，最终执行 flushwork

  // 省略无关代码
  function flushWork(hasTimeRemaining, initialTime) {//1.做好全局标记，表示现在已经进入调度阶段isHostCallbackScheduled = false;isPerformingWork - true;const previousPrioritylevel = currentPriorityLevel;try {// 2.循环消费队列return workLoop(hasTimeRemaining, initialTime);} finally {// 3.还原全局标记currentTask = null;currentPriorityLevel = previousPriorityLevel;isPerformingWork = false;}
  }
  

• flushwork中调用了 workLoop 队列消费的主要逻辑是在workLoop函数中

• 这就是前面提到的任务调度循环

  //省略部分无关代码
  function workLoop(hasTimeRemaining, initialTime) {let currentTime = initialTime; //保存当前时间，用于判断任务是否过期currentTask = peek(taskQueue); //获取队列中的第一个任务while (currentTask !== null) {if(currentTask.expirationTime > currentTime &&(!hasTimeRemaining || shouldYieldToHost())) {// 虽然currentTask没有过期，但是执行时间超过了限制（毕竟只有5ms， shouldYieldToHost()返回true)break;}const callback = currentTask.callback;if (typeof callback === 'function') {currentTask. callback = null;currentPrioritylevel = currentTask.prioritylevel;const didUserCallbackTimeout = currentTask.expirationTime <= currentTime;// 执行回调const continuationCallback = callback(didUserCallbackTimeout);currentTime = getCurrentTime();// 回调完成，判断是否还有连续（派生）回调if (typeof continuationCallback === 'function') {// 产生了连续回调（如fiber树太大，出现了中断渲染），保留currentTaskcurrentTask.callback = continuationCallback;} else {// 把currentTask移出队列if (currentTask === peek(taskQueue)) {pop(taskQueue);}}} else {// 如果任务被取消（这时currentTosk.callback ～ null)，将其移出队列pop(taskQueue);}// 更currentTaskcurrentTask = peek(taskQueue);}if (currentTask !== null) {return true; // 如果 task 队列没有清空，返回 true。寻待调度中心下一次回调} else {return false; // task 队列已经清空，返回false.}
  }
  

• workLoop 就是一个大循环，虽然代码也不多，但是非常精髓

• 在此处实现了时间切片(time slicing)和fiber树的可中断渲染

• 这2大特性的实现，都集中于这个while循环

• 每一次while循环的退出就是一个时间切片，深入分析while循环的退出条件：

  • 1.队列被完全清空：这种情况就是很正常的情况，一气呵成，没有遇到任何阻碍.
  • 2.执行超时：在消费taskQueue时，在执行 task.callback之前，都会检测是否超时，所以超时检测是以task为单位
    • 如果某个 task.callback 执行时间太长（如：fiber树很大，或逻辑很重）也会造成超时
    • 所以在执行task.cal1back过程中，也需要一种机制检测是否超时，如果超时了就立刻暂停task.callback的执行.

时间切片原理

• 消费任务队列的过程中，可以消费1~n个task,甚至清空整个queue.
• 但是在每一次具体执行task.callback之前都要进行超时检测，如果超时可以立即退出循环并等待下一次调用.

可中断渲染原理

• 在时间切片的基础之上，如果单个task.callback执行时间就很长（假设200ms)
• 就需要task.callback自己能够检测是否超时，所以在fiber树构造过程中
• 每构造完成一个单元，都会检测一次超时，如遇超时就退出fiber树构造循环，并返回一个新的回调函数
• 就是 continuationCallback 并等待下一次回调继续未完成的fiber树构造

节流防抖{#throttle-debounce}

• 通过以上分析，已经覆盖了 scheduler 包中的核心原理

• 现在再次回到 react-reconciler包中，在调度过程中的关键路径中，还需要理解一些细节

• 在 Renconciler 运行流程中总结的4个阶段中，注册调度任务属于第2个阶段

• 核心逻辑位于ensureRootIsScheduled函数中

  // 省略部分无关代码
  function ensureRootIsscheduled(root: FiberRoot, currentTime: number) {// 前半部分：判断是否需要注册新的调度const existingcallbackNode = root.callbackNode;const nextLanes = getNextLanes(root,root === workInProgressRoot ? workInProgressRootRenderLanes : NoLanes,);const newCallbackPriority = returnNextLanesPriority();if (nextLanes === NoLanes) {return;}// 节流防抖if (existingcallbackNode !== null) {const existingcallbackpriority = root.callbackpriority;if (existingCallbackPriority === newCallbackPriority){return;}cancelCallback(existingcallbackNode);}// 后半部分：注册调度任务省略代码// 更新标记root.callbackPriority = newcallbackPriority;root.callbackNode = newcallbackNode;
  }
  

• 正常情况下，ensureRootIsScheduled 函数会与scheduler包通信，最后注册一个task并等待回调.

• 1.在task注册完成之后，会设置fiberRoot对象上的属性，代表现在已经处于调度进行中

• 2.再次进入ensureRootIsScheduled时

  • 比如连续2次 setState,第2次 setState同样会触发
  • reconciler运作流程中的调度阶段，如果发现处于调度中
  • 则需要一些节流和防抖措施，进而保证调度性能.
  • a.节流
    • 判断条件：existingCallbackPriority == newCallbackPriority
    • 新旧更新的优先级相同，如连续多次执行setState
    • 则无需注册新task(继续沿用上一个优先级相同的task),直接退出调用
  • b.防抖
    • 判断条件： existingCallbackPriority !== newCallbackPriority
    • 新旧更新的优先级不同，则取消旧task, 重新注册新task

• 总结

  • 主要分析了scheduler包中调度原理
  • 也就是React两大工作循环中的任务调度循环
  • 时间切片和可中断渲染等特性在任务调度循环中的实现
  • scheduler包是React运行时的心脏，为了提升调度性能
  • 注册task之前，在react-reconciler包中做了节流和防抖等措施