【React 18.2 源码学习】Scheduler 调度器—

我们先来回顾下 React 的运行流程。

可以看到 Scheduler 是一个很关键的环节，更新任务的执行都得经过它，下面我们就来详细了解一下他具体是怎么进行调度的。

调度器 Scheduler 运行流程

流程主要分为两个部分，一个是添加任务，一个是执行任务。

添加任务

在 Scheduler 的实现中，有两个队列，一个存放延时任务，另一个存放任务队列（立即执行的任务），
当有新任务产生时，会根据任务是否需要延时放入对应的队列。然后进入任务的执行流程（前提是当前没有正在执行的任务）。如果是延时任务，而且任务队列为空并且当前没有正在进行中的任务，就会根据当前的任务延时的时间开启一个定时器，在定时器结束后将这个延时任务添加到任务队列中（此时延时任务已经延时结束），然后进入任务执行流程。

执行任务

执行任务是一个循环的过程，当一个任务执行完成后会判断任务队列中是否还有任务，如果有任务就取出来继续执行，如果没有则判断延时队列中是否还有任务，延时队列为空则执行任务流程结束。如果延时队列有任务，则根据优先级最高的延时任务剩余的延时时间开启一个定时器，在定时结束后将延时结束的任务添加到任务队列中并开始执行任务的过程。

注意

执行任务这一过程是异步的，会在新的宏任务中执行。可以简单理解为添加任务之后，开启了一个 0 ms 的定时器，在定时器的里面运行执行任务的逻辑。具体是如何的后续源码阶段细看。
优先级是通过时间来判断的。延迟队列中延迟时间越短优先级越高，任务队列中过期时间越早优先级越高
采用了最小堆。因为每次都需要取优先级最高的任务，为了更高效队列是通过最小堆实现的。

手撸一个调度器

下面是一个根据源码实现的一个丐版的 Scheduler 。

const NoPriority = 0;
const ImmediatePriority = 1;
const UserBlockingPriority = 2;
const NormalPriority = 3;
const LowPriority = 4;
const IdlePriority = 5;
// 获取当前时间
function getCurrentTime() { 
  return   Date.now();
}
class Scheduler {
    constructor() {
        this.timerQueue = []; // 延时任务队列
        this.taskQueue = []; // 任务队列
        this.startTime = -1; // 任务开始时间
        this.isPerformingWork = false; // 当前是否在执行任务
    }
    // 开启一个定时器
    requestHostTimeout(cbk, time) {
      setTimeout(()=>{
        cbk.bind(this)( getCurrentTime());
      }, time);
    }

    // 定时结束执行任务
    handleTimeout(curTime) {
      this.advanceTimers(curTime);
      this.schedulePerformWorkUntilDeadline();
    }

    // 判断当前任务是否终止
    shouldYieldToHost() {
      const timeElapsed = getCurrentTime() - startTime;
      if (timeElapsed < frameInterval) {
        return false;
      }
      return true;
    }

    // 将延迟结束的任务添加到任务队列 
    advanceTimers(curTime) {
      let timerTask = this.peek(this.timerQueue);
      while (timerTask) {
        if(timerTask.startTime <= curTime) {
          // 延迟时间结束
          this.pop(this.timerQueue);
          timerTask.sortIndex = timerTask.expirationTime;
          this.push(this.taskQueue, timerTask)
        } else {
          return
        } 
        timerTask = this.peek(this.timerQueue);
      }
    }

    // 将任务添加到队列中并进行调度
    scheduleCallback(priorityLevel, callback, options) {
        // const curTime = Date.now();
        const curTime =   getCurrentTime();
        let timeout;
        switch (priorityLevel) {
            case ImmediatePriority:
              timeout = -1;
              break;
            case UserBlockingPriority:
              timeout = 250;
              break;
            case IdlePriority:
              timeout = 1073741823;
              break;
            case LowPriority:
              timeout = 10000;
              break;
            case NormalPriority:
            default:
              timeout = 5000;
              break;
        }
        let startTime = curTime;
        if(options && typeof options.delay === 'number') {
            startTime += options.delay;
        }
        const expirationTime = startTime + timeout;

        const task = {
            callback,
            priorityLevel,
            startTime,
            expirationTime
        }
        if(startTime > curTime) {
          // 延迟任务加入延迟对列
          task.sortIndex = task.startTime;
          this.push(this.timerQueue,task);
          if(this.peek(this.taskQueue) === null && !this.isPerformingWork) {
            // 全为延迟任务，开启一个定时器，带任务延迟结束开始
            const timerTask = this.peek(this.timerQueue);
            this.requestHostTimeout(this.handleTimeout, timerTask.startTime - curTime)
          }
        } else {
          task.sortIndex = task.expirationTime;
          this.push(this.taskQueue, task);
          // 执行任务
          if(!this.isPerformingWork) {
            this.schedulePerformWorkUntilDeadline();
          }
        }
    }

    // 调度执行任务
    schedulePerformWorkUntilDeadline() {
      this.isPerformingWork = true;
      setTimeout(() => {
        this.startTime = getCurrentTime();
        this.workLoop();
        this.isPerformingWork = false;
      },0)
    }

    // 执行任务
    workLoop() {
      this.advanceTimers();
      let curTask = this.peek(this.taskQueue);
      while(curTask) {
        const callback = curTask.callback;
        if(typeof callback === 'function') {
          const continuationCallback = callback();
          if(typeof continuationCallback === 'function') {
            // 函数未执行完成，重新赋值给任务
            curTask.callback = continuationCallback;
          } else {
            // 任务执行完成
            this.pop(this.taskQueue);
          }
          this.advanceTimers();
        } else {
          // 任务已完成或 无效 移除
          this.pop(this.taskQueue);
        }
        curTask = this.peek(this.taskQueue);
      }
      if (curTask !== null) {
        return this.workLoop();
      } else {
        const firstTimer = this.peek(this.timerQueue);
        if (firstTimer !== null) {
          const curTime =  getCurrentTime();
          this.requestHostTimeout(this.handleTimeout, firstTimer.startTime - curTime);
        }
        return false;
      }
    }

    compare (a, b) {
      return a.sortIndex < b.sortIndex;
    }

    swap(heap,index, idx) {
      [heap[index],heap[idx]] = [heap[idx], heap[index]]
    }

    push(heap, value) {
      // 向上调整
      heap.push(value);
      let index = heap.length - 1;
      let parentIdx = (index - 1) >> 1;
      while(parentIdx >= 0) {
        if(this.compare(heap[index], heap[parentIdx])) {
          this.swap(heap,index, parentIdx);
          index = parentIdx;
          parentIdx = (index - 1) >> 1;
        } else {
          break;
        }
      }
    }

    pop(heap) {
      // 向下调整
        if(heap.length === 1) return heap.pop();
        this.swap(heap, 0, heap.length - 1);
        const val = heap.pop();
        let parentIdx = 0;
        let leftIdx =  parentIdx * 2 + 1;
        let rightIdx = parentIdx * 2 + 2;
        const length = heap.length - 1;
        while(leftIdx < length || rightIdx < length) {
            if(!this.compare(heap[leftIdx], heap[parentIdx]) && !this.compare(heap[rightIdx], heap[parentIdx])) {
                break;
            } else{
                if(rightIdx < length && 
                    this.compare(heap[rightIdx],heap[parentIdx]) && 
                    this.compare(heap[rightIdx],heap[leftIdx])) {
                        this.swap(heap, rightIdx, parentIdx);
                        parentIdx = rightIdx;
                        leftIdx = parentIdx * 2 + 1;
                        rightIdx = parentIdx * 2 + 2;
                    } else if (this.compare(heap[leftIdx],heap[parentIdx])) {
                        this.swap(heap, leftIdx, parentIdx);
                        parentIdx = leftIdx;
                        leftIdx = parentIdx * 2 + 1;
                        rightIdx = parentIdx * 2 + 2;
                    }
            }
        }
        return val;
    }

    peek(heap) {
      return heap[0] || null;
    }
}

const s = new Scheduler();

const task1 = () =>{
  console.log('task1  start');
  console.log('task1 end');
}

const task2 = () =>{
  console.log('task2  start');
  console.log('task2  end');
}

const task3 = () =>{
  console.log('task3  start');
  console.log('task3  end');
}

const task4 = () =>{
  console.log('task4 delay start');
  console.log('task4 delay end');
}

s.scheduleCallback(4, task1);
s.scheduleCallback(6, task2);
s.scheduleCallback(1, task3);
s.scheduleCallback(1, task4 ,{
  delay: 3000
})
// 执行顺序为： task3 task2 task1 task4

源码

调度器 Scheduler 并不是只为 React 服务的，而是作为一个独立的包。因此，如果你的项目也需要调度器的功能可以直接引用 Scheduler 的包。

接下来看看具体的源码（可以结合我前面的流程图以及手撸的丐版）：
任务的优先级一共是 5 种：

先是添加任务：

上面执行的 requestHostCallback 方法就是执行任务的入口

执行 requestHostCallback 后，会将 flushWork 方法赋值给 scheduledHostCallback；
需要注意的是 schedulePerformWorkUntilDeadline 他是根据当前环境对 api 的支持情况赋值的，也是进行异步执行，开始新的宏任务的地方

可以看到，第一个 if 在支持 setImmediate 的环境（如 node.js 、旧 IE）会使用 setImmediate 来开启宏任务。
第二个 if 在支持 MessageChannel 的环境中使用 MessageChannel 来开启宏任务。MessageChannel 会开启一个新的消息通道，并通过 postMessage 发送数据，需要执行的任务会在接收消息的回调函数 ommessage 中执行。
如果以上两种都不支持的话，就会走到 else 开启一个定时器 setTimeout 来执行宏任务。

在设计之初还有两个 api 备选，一个是 requestIdleCallback ，这个 api 会在浏览器每帧空闲的时候运行。没有选的原因是：
1、兼容性不好
2、执行频率不稳定。（切换浏览器 tab 之后，之前 tab 的 ric 的执行频率会大幅降低）
3、应用场景受限制（ric 被局限在低优先级工作中，这与 Scheduler 的多优先级调度不符）
另一个是 requestAnimationFrame，这个 api 的回调会在下一次绘制前执行，一般用于动画更新，因为他的执行与帧有关，执行频率并不高，所以也没有选择这个 api。

schedulePerformWorkUntilDeadline 执行完后，下一次宏任务就会执行 performWorkUntilDeadline 方法

在 performWorkUntilDeadline 中执行 flushWork（前面赋值给了 scheduledHostCallback）。在 flushWork 执行完毕之后，如果还有任务就会开启新的一轮调度。下面看看 flushWork