• 【React源码】(七）React 调度原理(scheduler)

    在 React 运行时中, 调度中心(位于scheduler包), 是整个 React 运行时的中枢(其实是心脏), 所以理解scheduler调度, 就基本把握了 React 的命门.

    在深入分析之前, 建议回顾一下往期与scheduler相关的文章(这 3 篇文章不长, 共 10 分钟能浏览完):

    • React 工作循环: 从宏观的角度介绍 React 体系中两个重要的循环, 其中任务调度循环就是本文的主角.
    • reconciler 运作流程: 从宏观的角度介绍了react-reconciler包的核心作用, 并把reconciler分为了 4 个阶段. 其中第 2 个阶段注册调度任务串联了scheduler包和react-reconciler包, 其实就是任务调度循环中的一个任务(task).
    • React 中的优先级管理: 介绍了 React 体系中的 3 中优先级的管理, 列出了源码中react-reconciler与scheduler包中关于优先级的转换思路. 其中SchedulerPriority控制任务调度循环中循环的顺序.

    了解上述基础知识之后, 再谈scheduler原理, 其实就是在大的框架下去添加实现细节, 相对较为容易. 下面就正式进入主题.

    调度实现

    调度中心最核心的代码, 在SchedulerHostConfig.default.js中.

    内核

    该 js 文件一共导出了 8 个函数, 最核心的逻辑, 就集中在了这 8 个函数中 :

    1. export let requestHostCallback; // 请求及时回调: port.postMessage
    2.  
    3. export let cancelHostCallback; // 取消及时回调: scheduledHostCallback = null
    4.  
    5. export let requestHostTimeout; // 请求延时回调: setTimeout
    6.  
    7. export let cancelHostTimeout; // 取消延时回调: cancelTimeout
    8.  
    9. export let shouldYieldToHost; // 是否让出主线程(currentTime >= deadline && needsPaint): 让浏览

    器能够执行更高优先级的任务(如ui绘制, 用户输入等)从源码来看, 几乎没有用到

    1. export let requestPaint; // 请求绘制: 设置 needsPaint = true
    2.  
    3. export let getCurrentTime; // 获取当前时间
    4.  
    5. export let forceFrameRate; // 强制设置 yieldInterval (让出主线程的周期). 这个函数虽然存在, 但是

    我们知道 react 可以在 nodejs 环境中使用, 所以在不同的 js 执行环境中, 这些函数的实现会有区别. 下面基于普通浏览器环境, 对这 8 个函数逐一分析 :

    1. 调度相关: 请求或取消调度

    这 4 个函数源码很简洁, 非常好理解, 它们的目的就是请求执行(或取消)回调函数. 现在重点介绍其中的及时回调(延时回调的 2 个函数暂时属于保留 api, 17.0.2 版本其实没有用上)

    1.  
    2. // 接收 MessageChannel 消息
    3.  
    4. const performWorkUntilDeadline = () => {
    5.  
    6. // ...省略无关代码
    7.  
    8. if (scheduledHostCallback !== null) {
    9.  
    10. const currentTime = getCurrentTime();
    11.  
    12. // 更新deadline
    13.  
    14. deadline = currentTime + yieldInterval;
    15.  
    16. // 执行callback
    17.  
    18. scheduledHostCallback(hasTimeRemaining, currentTime);
    19.  
    20. } else {
    21.  
    22. isMessageLoopRunning = false;
    23.  
    24. }
    25.  
    26. };
    27.  
    28. const channel = new MessageChannel();
    29.  
    30. const port = channel.port2;
    31.  
    32. channel.port1.onmessage = performWorkUntilDeadline;
    33.  
    34. // 请求回调
    35.  
    36. requestHostCallback = function(callback) {
    37.  
    38. // 1. 保存callback
    39.  
    40. scheduledHostCallback = callback;
    41.  
    42. if (!isMessageLoopRunning) {
    43.  
    44. isMessageLoopRunning = true;
    45.  
    46. // 2. 通过 MessageChannel 发送消息
    47.  
    48. port.postMessage(null);
    49.  
    50. }
    51.  
    52. };
    53.  
    54. // 取消回调
    55.  
    56. cancelHostCallback = function() {
    57.  
    58. scheduledHostCallback = null;
    59.  
    60. };

    很明显, 请求回调之后scheduledHostCallback = callback, 然后通过MessageChannel发消息的方式触发performWorkUntilDeadline函数, 最后执行回调scheduledHostCallback.

    此处需要注意: MessageChannel在浏览器事件循环中属于宏任务, 所以调度中心永远是异步执行回调函数.

    1. 时间切片(time slicing)相关: 执行时间分割, 让出主线程(把控制权归还浏览器, 浏览器可以处理用户输入, UI 绘制等紧急任务).
     

    1. const localPerformance = performance;
    2.  
    3. // 获取当前时间
    4.  
    5. getCurrentTime = () => localPerformance.now();
    6.  
    7. // 时间切片周期, 默认是5ms(如果一个task运行超过该周期, 下一个task执行之前, 会把控制权归还浏览器)
    8.  
    9. let yieldInterval = 5;
    10.  
    11. let deadline = 0;
    12.  
    13. const maxYieldInterval = 300;
    14.  
    15. let needsPaint = false;
    16.  
    17. const scheduling = navigator.scheduling;
    18.  
    19. // 是否让出主线程
    20.  
    21. shouldYieldToHost = function() {
    22.  
    23. const currentTime = getCurrentTime();
    24.  
    25. if (currentTime >= deadline) {
    26.  
    27. if (needsPaint || scheduling.isInputPending()) {
    28.  
    29. // There is either a pending paint or a pending input.
    30.  
    31. return true;
    32.  
    33. }
    34.  
    35. // There's no pending input. Only yield if we've reached the max
    36.  
    37. // yield interval.
    38.  
    39. return currentTime >= maxYieldInterval; // 在持续运行的react应用中, currentTime肯定大于300ms, 这个判断只在初始化过程中才有可能返回false
    40.  
    41. } else {
    42.  
    43. // There's still time left in the frame.
    44.  
    45. return false;
    46.  
    47. }
    48.  
    49. };
    50.  
    51. // 请求绘制
    52.  
    53. requestPaint = function() {
    54.  
    55. needsPaint = true;
    56.  
    57. };
    58.  
    59. // 设置时间切片的周期
    60.  
    61. forceFrameRate = function(fps) {
    62.  
    63. if (fps < 0 || fps > 125) {
    64.  
    65. // Using console['error'] to evade Babel and ESLint
    66.  
    67. console['error'](
    68.  
    69. 'forceFrameRate takes a positive int between 0 and 125, ' +
    70.  
    71. 'forcing frame rates higher than 125 fps is not supported',
    72.  
    73. );
    74.  
    75. return;
    76.  
    77. }
    78.  
    79. if (fps > 0) {
    80.  
    81. yieldInterval = Math.floor(1000 / fps);
    82.  
    83. } else {
    84.  
    85. // reset the framerate
    86.  
    87. yieldInterval = 5;
    88.  
    89. }
    90.  
    91. };
     

    这 4 个函数代码都很简洁, 其功能在注释中都有解释.
     

    注意shouldYieldToHost的判定条件:
     

    • currentTime >= deadline: 只有时间超过deadline之后才会让出主线程(其中deadline = currentTime + yieldInterval). 
  
      • yieldInterval默认是5ms, 只能通过forceFrameRate函数来修改(事实上在 v17.0.2 源码中, 并没有使用到该函数).
      • 如果一个task运行时间超过5ms, 下一个task执行之前, 会把控制权归还浏览器.
    • navigator.scheduling.isInputPending(): 这 facebook 官方贡献给 Chromium 的 api, 现在已经列入 W3C 标准(具体解释), 用于判断是否有输入事件(包括: input 框输入事件, 点击事件等).
     

    介绍完这 8 个内部函数, 最后浏览一下完整回调的实现performWorkUntilDeadline(逻辑很清晰, 在注释中解释):
     

     

    1. const performWorkUntilDeadline = () => {
    2.  
    3. if (scheduledHostCallback !== null) {
    4.  
    5. const currentTime = getCurrentTime(); // 1. 获取当前时间
    6.  
    7. deadline = currentTime + yieldInterval; // 2. 设置deadline
    8.  
    9. const hasTimeRemaining = true;
    10.  
    11. try {
    12.  
    13. // 3. 执行回调, 返回是否有还有剩余任务
    14.  
    15. const hasMoreWork = scheduledHostCallback(hasTimeRemaining, currentTime);
    16.  
    17. if (!hasMoreWork) {
    18.  
    19. // 没有剩余任务, 退出
    20.  
    21. isMessageLoopRunning = false;
    22.  
    23. scheduledHostCallback = null;
    24.  
    25. } else {
    26.  
    27. port.postMessage(null); // 有剩余任务, 发起新的调度
    28.  
    29. }
    30.  
    31. } catch (error) {
    32.  
    33. port.postMessage(null); // 如有异常, 重新发起调度
    34.  
    35. throw error;
    36.  
    37. }
    38.  
    39. } else {
    40.  
    41. isMessageLoopRunning = false;
    42.  
    43. }
    44.  
    45. needsPaint = false; // 重置开关
    46.  
    47. };
     

    分析到这里, 可以得到调度中心的内核实现图:
     

     

     

    说明: 这个流程图很简单, 源码量也很少(总共不到 80 行), 但是它代表了scheduler的核心, 所以精华其实并不一定需要很多代码.
     

    任务队列管理
     

    通过上文的分析, 我们已经知道请求和取消调度的实现原理. 调度的目的是为了消费任务, 接下来就具体分析任务队列是如何管理与实现的.
     

    在Scheduler.js中, 维护了一个taskQueue, 任务队列管理就是围绕这个taskQueue展开.
     

     

    1. // Tasks are stored on a min heap
    2.  
    3. var taskQueue = [];
    4.  
    5. var timerQueue = [];
     

    注意:
     

    • taskQueue是一个小顶堆数组, 关于堆排序的详细解释, 可以查看React 算法之堆排序.
    • 源码中除了taskQueue队列之外还有一个timerQueue队列. 这个队列是预留给延时任务使用的, 在 react@17.0.2 版本里面, 从源码中的引用来看, 算一个保留功能, 没有用到.
     

    创建任务
     

    在unstable_scheduleCallback函数中(源码链接):
     

     

    1. // 省略部分无关代码
    2.  
    3. function unstable_scheduleCallback(priorityLevel, callback, options) {
    4.  
    5. // 1. 获取当前时间
    6.  
    7. var currentTime = getCurrentTime();
    8.  
    9. var startTime;
    10.  
    11. if (typeof options === 'object' && options !== null) {
    12.  
    13. // 从函数调用关系来看, 在v17.0.2中,所有调用 unstable_scheduleCallback 都未传入options
    14.  
    15. // 所以省略延时任务相关的代码
    16.  
    17. } else {
    18.  
    19. startTime = currentTime;
    20.  
    21. }
    22.  
    23. // 2. 根据传入的优先级, 设置任务的过期时间 expirationTime
    24.  
    25. var timeout;
    26.  
    27. switch (priorityLevel) {
    28.  
    29. case ImmediatePriority:
    30.  
    31. timeout = IMMEDIATE_PRIORITY_TIMEOUT;
    32.  
    33. break;
    34.  
    35. case UserBlockingPriority:
    36.  
    37. timeout = USER_BLOCKING_PRIORITY_TIMEOUT;
    38.  
    39. break;
    40.  
    41. case IdlePriority:
    42.  
    43. timeout = IDLE_PRIORITY_TIMEOUT;
    44.  
    45. break;
    46.  
    47. case LowPriority:
    48.  
    49. timeout = LOW_PRIORITY_TIMEOUT;
    50.  
    51. break;
    52.  
    53. case NormalPriority:
    54.  
    55. default:
    56.  
    57. timeout = NORMAL_PRIORITY_TIMEOUT;
    58.  
    59. break;
    60.  
    61. }
    62.  
    63. var expirationTime = startTime + timeout;
    64.  
    65. // 3. 创建新任务
    66.  
    67. var newTask = {
    68.  
    69. id: taskIdCounter++,
    70.  
    71. callback,
    72.  
    73. priorityLevel,
    74.  
    75. startTime,
    76.  
    77. expirationTime,
    78.  
    79. sortIndex: -1,
    80.  
    81. };
    82.  
    83. if (startTime > currentTime) {
    84.  
    85. // 省略无关代码 v17.0.2中不会使用
    86.  
    87. } else {
    88.  
    89. newTask.sortIndex = expirationTime;
    90.  
    91. // 4. 加入任务队列
    92.  
    93. push(taskQueue, newTask);
    94.  
    95. // 5. 请求调度
    96.  
    97. if (!isHostCallbackScheduled && !isPerformingWork) {
    98.  
    99. isHostCallbackScheduled = true;
    100.  
    101. requestHostCallback(flushWork);
    102.  
    103. }
    104.  
    105. }
    106.  
    107. return newTask;
    108.  
    109. }
     

    逻辑很清晰(在注释中已标明), 重点分析task对象的各个属性:
     

    1. var newTask = {
    2.  
    3. id: taskIdCounter++, // id: 一个自增编号
    4.  
    5. callback, // callback: 传入的回调函数
    6.  
    7. priorityLevel, // priorityLevel: 优先级等级
    8.  
    9. startTime, // startTime: 创建task时的当前时间
    10.  
    11. expirationTime, // expirationTime: task的过期时间, 优先级越高 expirationTime = startTime + timeout 越小
    12.  
    13. sortIndex: -1,
    14.  
    15. };
     

    newTask.sortIndex = expirationTime; // sortIndex: 排序索引, 全等于过期时间. 保证过期时间越小, 越紧急的任务排在最前面
     

    消费任务
     

    创建任务之后, 最后请求调度requestHostCallback(flushWork)(创建任务源码中的第 5 步), flushWork函数作为参数被传入调度中心内核等待回调. requestHostCallback函数在上文调度内核中已经介绍过了, 在调度中心中, 只需下一个事件循环就会执行回调, 最终执行flushWork.
     

    1. // 省略无关代码
    2.  
    3. function flushWork(hasTimeRemaining, initialTime) {
    4.  
    5. // 1. 做好全局标记, 表示现在已经进入调度阶段
    6.  
    7. isHostCallbackScheduled = false;
    8.  
    9. isPerformingWork = true;
    10.  
    11. const previousPriorityLevel = currentPriorityLevel;
    12.  
    13. try {
    14.  
    15. // 2. 循环消费队列
    16.  
    17. return workLoop(hasTimeRemaining, initialTime);
    18.  
    19. } finally {
    20.  
    21. // 3. 还原全局标记
    22.  
    23. currentTask = null;
    24.  
    25. currentPriorityLevel = previousPriorityLevel;
    26.  
    27. isPerformingWork = false;
    28.  
    29. }
    30.  
    31. }
     

    flushWork中调用了workLoop. 队列消费的主要逻辑是在workLoop函数中, 这就是React 工作循环一文中提到的任务调度循环.
     

    1.  
    2. // 省略部分无关代码
    3.  
    4. function workLoop(hasTimeRemaining, initialTime) {
    5.  
    6. let currentTime = initialTime; // 保存当前时间, 用于判断任务是否过期
    7.  
    8. currentTask = peek(taskQueue); // 获取队列中的第一个任务
    9.  
    10. while (currentTask !== null) {
    11.  
    12. if (
    13.  
    14. currentTask.expirationTime > currentTime &&
    15.  
    16. (!hasTimeRemaining || shouldYieldToHost())
    17.  
    18. ) {
    19.  
    20. // 虽然currentTask没有过期, 但是执行时间超过了限制(毕竟只有5ms, shouldYieldToHost()返回true). 停止继续执行, 让出主线程
    21.  
    22. break;
    23.  
    24. }
    25.  
    26. const callback = currentTask.callback;
    27.  
    28. if (typeof callback === 'function') {
    29.  
    30. currentTask.callback = null;
    31.  
    32. currentPriorityLevel = currentTask.priorityLevel;
    33.  
    34. const didUserCallbackTimeout = currentTask.expirationTime <= currentTime;
    35.  
    36. // 执行回调
    37.  
    38. const continuationCallback = callback(didUserCallbackTimeout);
    39.  
    40. currentTime = getCurrentTime();
    41.  
    42. // 回调完成, 判断是否还有连续(派生)回调
    43.  
    44. if (typeof continuationCallback === 'function') {
    45.  
    46. // 产生了连续回调(如fiber树太大, 出现了中断渲染), 保留currentTask
    47.  
    48. currentTask.callback = continuationCallback;
    49.  
    50. } else {
    51.  
    52. // 把currentTask移出队列
    53.  
    54. if (currentTask === peek(taskQueue)) {
    55.  
    56. pop(taskQueue);
    57.  
    58. }
    59.  
    60. }
    61.  
    62. } else {
    63.  
    64. // 如果任务被取消(这时currentTask.callback = null), 将其移出队列
    65.  
    66. pop(taskQueue);
    67.  
    68. }
    69.  
    70. // 更新currentTask
    71.  
    72. currentTask = peek(taskQueue);
    73.  
    74. }
    75.  
    76. if (currentTask !== null) {
    77.  
    78. return true; // 如果task队列没有清空, 返回true. 等待调度中心下一次回调
    79.  
    80. } else {
    81.  
    82. return false; // task队列已经清空, 返回false.
    83.  
    84. }
    85.  
    86. }
     

    workLoop就是一个大循环, 虽然代码也不多, 但是非常精髓, 在此处实现了时间切片(time slicing)和fiber树的可中断渲染. 这 2 大特性的实现, 都集中于这个while循环.
     

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

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

    时间切片原理
     

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

    可中断渲染原理
     

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

    节流防抖 {#throttle-debounce}
     

    通过上文的分析, 已经覆盖了scheduler包中的核心原理. 现在再次回到react-reconciler包中, 在调度过程中的关键路径中, 我们还需要理解一些细节.
     

    在reconciler 运作流程中总结的 4 个阶段中, 注册调度任务属于第 2 个阶段, 核心逻辑位于ensureRootIsScheduled函数中. 现在我们已经理解了调度原理, 再次分析ensureRootIsScheduled(源码地址):
     

    1. // ... 省略部分无关代码
    2.  
    3. function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
    4.  
    5. // 前半部分: 判断是否需要注册新的调度
    6.  
    7. const existingCallbackNode = root.callbackNode;
    8.  
    9. const nextLanes = getNextLanes(
    10.  
    11. root,
    12.  
    13. root === workInProgressRoot ? workInProgressRootRenderLanes : NoLanes,
    14.  
    15. );
    16.  
    17. const newCallbackPriority = returnNextLanesPriority();
    18.  
    19. if (nextLanes === NoLanes) {
    20.  
    21. return;
    22.  
    23. }
    24.  
    25. // 节流防抖
    26.  
    27. if (existingCallbackNode !== null) {
    28.  
    29. const existingCallbackPriority = root.callbackPriority;
    30.  
    31. if (existingCallbackPriority === newCallbackPriority) {
    32.  
    33. return;
    34.  
    35. }
    36.  
    37. cancelCallback(existingCallbackNode);
    38.  
    39. }
    40.  
    41. // 后半部分: 注册调度任务 省略代码...
    42.  
    43. // 更新标记
    44.  
    45. root.callbackPriority = newCallbackPriority;
    46.  
    47. root.callbackNode = newCallbackNode;
    48.  
    49. }
     

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

    1. 在task注册完成之后, 会设置fiberRoot对象上的属性(fiberRoot是 react 运行时中的重要全局对象, 可参考React 应用的启动过程), 代表现在已经处于调度进行中
    2. 再次进入ensureRootIsScheduled时(比如连续 2 次setState, 第 2 次setState同样会触发reconciler运作流程中的调度阶段), 如果发现处于调度中, 则需要一些节流和防抖措施, 进而保证调度性能. 
  
      1. 节流(判断条件: existingCallbackPriority === newCallbackPriority, 新旧更新的优先级相同, 如连续多次执行setState), 则无需注册新task(继续沿用上一个优先级相同的task), 直接退出调用.
      2. 防抖(判断条件: existingCallbackPriority !== newCallbackPriority, 新旧更新的优先级不同), 则取消旧task, 重新注册新task.
     

    总结
     

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

                
  • 

                    相关阅读:
    
                    
在Ubuntu20.04中安装中文输入法                            
    
JAVA学习实战 reactor线程模型                            
    
Linux应用开发基础知识——电阻屏和电容屏(八)                            
    
本地demo服务器搭建计划——（二）服务中心consul安装&防火墙配置                            
    
前端AJAX入门到实战，学习前端框架前必会的（ajax+node.js+webpack+git）（三）                            
    
整合vue elementui springboot mybatisplus前后端分离的 简单增加功能 删改查未实现                            
    
反射与枚举                            
    
excel表格怎么设置密码？excel文件加密的两个方法                            
    
Linux环境开发工具yum、makefile的使用 【Linux】                            
    
公共经济学考试题库完整                            
    
                        
                
    • 
                
  • 
                    原文地址：https://blog.csdn.net/weixin_44828588/article/details/126485031
                
    •