大家好，我卡颂。

Scheduler(调度器)是React重要的组成部分。

同时，他也是个独立的包，任何间断、可中断的流程都能够用Scheduler来调度，比方：

const work = {count: 100};function doWork(work) {  work.count--;  console.log('do work!')}

work满足两个条件：

  1. 工作是间断的。一共须要执行100次，每次执行时调用doWork
  2. 工作是可中断的。中断复原后，接着中断前的work.count继续执行就行

满足这两个条件的工作都能够用Scheduler来调度。

调度后，Scheduler外部会生成对应task，并在正确的机会执行task.callback：

const task1 = {  // 过期工夫 等于 以后工夫 + 优先级对应工夫  expirationTime: currentTime + priority,  callback: doWork.bind(null, work)}

本文会解说Scheduler的实现原理。晓得你不喜爱看大段的代码，所以本文没有一行代码。文末有Scheduler的源码地址，感兴趣的话能够去看看。

开整～

工作流程概览

Scheduler的工作原理如下图，接下来会具体解释：

在Scheduler中有两个容易混同的概念：

  1. delay

delay代表task须要提早执行的工夫。配置了delay的task会先进入timerQueue中。

当delay对应工夫到期后，该task会转移到taskQueue中。

  1. expirationTime

expirationTime代表task的过期工夫。

不是所有task都会配置delay，没有配置delay的task会间接进入taskQueue。这就导致taskQueue中可能存在多个task。

如何决定哪个task.callback先执行呢？Scheduler依据task.expirationTime作为排序根据，值越小优先级越高。

如果task.expirationTime小于以后工夫，不仅优先级最高，而且task.callback的执行不会被中断。

总结一下task的几种状况：

  1. 配置delay且delay未到期：task肯定不会执行
  2. 配置delay且到期，或者未配置delay的task，同时task.expirationTime未到期：依据task.expirationTime排序后，按程序执行
  3. task.expirationTime到期的task：优先级最高，且同步、不可中断

工作流程详解

将流程概览图替换为Scheduler中具体方法后，如下：

残缺工作流程如下：

  1. 执行Scheduler.scheduleCallback生成task

依据是否传递delay参数，生成的task会进入timerQueue或taskQueue。

  1. 当timerQueue中第一个task提早的工夫到期后，执行advanceTimers将到期的task从timerQueue中移到taskQueue中

其中，timerQueue、taskQueue的数据结构为小顶堆实现的优先级队列。

  1. 接下来，执行requestHostCallback办法，他会在新的宏工作中执行workLoop办法

在宏工作中执行回调的办法很多，Scheduler在浏览器环境默认应用MessageChannel实现。

如果不反对MessageChannel，会降级到setTimeout。Node或老版IE下会应用setImmediate。

  1. workLoop办法会循环生产taskQueue中的task（即执行task.callback），直到满足如下条件之一，中断循环：
  • taskQueue中不存在task
  • 工夫切片用尽
  1. 循环中断后，如果taskQueue不为空，则进入步骤3。如果timerQueue不为空，则进入步骤2

总结

总结一下，Scheduler的残缺执行流程包含两个循环：

  1. taskQueue的生产（从timerQueue中移入或执行scheduleCallback生成）到生产的过程（即图中灰色局部），这是个异步循环
  2. taskQueue的具体生产过程（即workLoop办法的执行），这是个同步循环

如果你想理解React中如何应用Scheduler，能够参考100行代码实现React外围调度性能

欢送退出人类高质量前端框架群，带飞