300 行代码实现 React 的调度器 Scheduler

冴羽
8,192 阅读8分钟

  1. 本篇已收录到掘金专栏《React 基础与进阶》，该系列目前一共 16 篇。

  2. 欢迎围观我的“朋友圈”、加入“低调务实优秀中国好青年”前端社群，分享技术，带你成长。

前言

说是实现，但其实我们只是在 React Scheduler 源码的基础上进行了简化，省略掉一些繁琐的细节，添加了丰富的注释，保证代码可直接执行。

大家可以复制代码到编辑器中，直接运行，非常适合学习 React 源码用。

如果看注释还不了解，欢迎补充学习这个专栏的文章。

源码 Schedule.js

// 引入最小堆封装代码
import {push, pop, peek} from './ScheduleMinHeap.js';

// 浏览器提供的 API，获取从 time origin（当前文档生命周期的开始节点时间） 之后到当前调用时经过的时间，它以一个恒定的速率慢慢增加的，不会受到系统时间的影响，具体参考：https://juejin.cn/post/7171633315336683528
let getCurrentTime = () => performance.now();

// Scheduler 优先级划分，数字越小优先级越高，0 表示没有优先级
const NoPriority = 0;
const ImmediatePriority = 1;
const UserBlockingPriority = 2;
const NormalPriority = 3;
const LowPriority = 4;
const IdlePriority = 5;

// Scheduler 根据优先级设置的对应 timeout 时间，越小越紧急
// 在 React 中，任务是可以被打断的，但是任务不能一直被打断，所以要设置一个超时时间，过了这个时间就必须立刻执行
// timeout 就表示超时时间
var IMMEDIATE_PRIORITY_TIMEOUT = -1;
var USER_BLOCKING_PRIORITY_TIMEOUT = 250;
var NORMAL_PRIORITY_TIMEOUT = 5000;
var LOW_PRIORITY_TIMEOUT = 10000;
// 为什么是 1073741823，查看：https://juejin.cn/post/7171633315336683528
var IDLE_PRIORITY_TIMEOUT = 1073741823;

// 普通任务队列，它是一个最小堆结构，最小堆查看：https://juejin.cn/post/7168283003037155359
var taskQueue = [];
// 延时任务队列，它同样是一个最小堆结构
var timerQueue = [];
// taskId
var taskIdCounter = 1;

// 任务队列是否正在被遍历执行，workLoop 执行前为 true，执行完成后改为 false
var isPerformingWork = false;
// 是否有正在执行的 requestHostCallback，它会在 requestHostCallback 调用前设为 true，workLoop 执行前改为 false
var isHostCallbackScheduled = false;
// 是否有正在执行的 requestHostTimeout，它会在 requestHostTimeout 执行前设为 true，cancenlHostTimeout 和 handleTimeout 中设为 false
var isHostTimeoutScheduled = false;
// message loop 是否正在执行，它会在 schedulePerformWorkUntilDeadline 前设为 true，在任务队列执行完毕后设为 false
let isMessageLoopRunning = false;

// 记录 requestHostCallback 执行时传入的 callback 函数，也就是 flushWork
let scheduledHostCallback = null;
// 用于 cancelHostTimeout 取消 requestHostTimeout
let taskTimeoutID = -1;

// 记录当前正在执行的任务
var currentTask = null;
var currentPriorityLevel = NormalPriority;

// 这里是调度的开始
function unstable_scheduleCallback(priorityLevel, callback, options) {
  var currentTime = getCurrentTime();

  // 任务被安排调度的时间，相当于去银行时的点击排号机器的那个时间
  var startTime;
  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;
  }

  // 任务不能一直被打断，timeout 表示这个任务的超时时间
  var 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;

  // 这就是储存在任务队列（taskQueue 和 timerQueue）中的任务对象
  var newTask = {
    id: taskIdCounter++,
    callback,
    priorityLevel,
    startTime,
    expirationTime,
    sortIndex: -1,
  };

  // 如果 startTime > currentTime，说明是延时任务，将其放到 timerQueue
  if (startTime > currentTime) {
    newTask.sortIndex = startTime;
    // 这个 push 是封装的最小堆 push 方法，将元素追加到数组后，它会再进行一个排序，保证最小值在数组的第一个
    push(timerQueue, newTask);
    // peek(taskQueue) 获取 taskQueue 的第一个任务，因为是最小堆结构，获取的是最紧急的任务
    // 这个逻辑是在 taskQueue 为空的情况下才会调用，这是因为 taskQueue 不为空的情况下，它会在每个任务执行的时候都会遍历一下 timerQueue，将到期的任务移到 taskQueue
    // newTask === peek(timerQueue) 表示新创建的任务就是最早的要安排调度的延时任务
    if (peek(taskQueue) === null && newTask === peek(timerQueue)) {
      // 保证最多只有一个 requestHostTimeout 在执行
      if (isHostTimeoutScheduled) {
        cancelHostTimeout();
      } else {
        isHostTimeoutScheduled = true;
      }
      // requestHostTimeout 本质是一个 setTimeout，时间到后，执行 handleTimeout
      requestHostTimeout(handleTimeout, startTime - currentTime);
    }
  }
  // 如果是正常任务，将其放到 taskQueue
  else {
    newTask.sortIndex = expirationTime;
    push(taskQueue, newTask);
    // 如果没有正在执行的 requestHostCallback 并且任务队列也没有被执行
    if (!isHostCallbackScheduled && !isPerformingWork) {
      isHostCallbackScheduled = true;
      requestHostCallback(flushWork);
    }
  }

  return newTask;
}

// 你可以把这个函数理解为 requestIdleCallback，都实现了空闲时期执行代码
function requestHostCallback(callback) {
  // 将 callback 函数存为全局变量，传入的是 flushWork 这个函数
  scheduledHostCallback = callback;
  if (!isMessageLoopRunning) {
    isMessageLoopRunning = true;
    schedulePerformWorkUntilDeadline();
  }
}

const channel = new MessageChannel();
const port = channel.port2;
channel.port1.onmessage = performWorkUntilDeadline;
// 借助 Message Channel，让出线程，告诉浏览器登空闲了再执行任务队列
function schedulePerformWorkUntilDeadline() {
  port.postMessage(null);
};

// 批量任务的开始时间
// React 并不是每一个任务执行完都执行 schedulePerformWorkUntilDeadline 让出线程的，而是执行完一个任务，看看过了多久，如果时间不超过 5ms，那就再执行一个任务，等做完一个任务，发现过了 5ms，这才让出线程，所以 React 是一批一批任务执行的，startTime 记录的是这一批任务的开始时间，而不是单个任务的开始时间。
var startTime = -1;
function performWorkUntilDeadline() {
  // scheduledHostCallback 就是 flushWork 这个函数
  if (scheduledHostCallback !== null) {
    const currentTime = getCurrentTime();
    startTime = currentTime;
    const hasTimeRemaining = true;
    let hasMoreWork = true;
    try {
      hasMoreWork = scheduledHostCallback(hasTimeRemaining, currentTime);
    } finally {
      if (hasMoreWork) {
        // 如果在一个时间切片里没有完成所有任务，那就执行 schedulePerformWorkUntilDeadline，让出线程，等浏览器空闲了再继续执行
        schedulePerformWorkUntilDeadline();
      } else {
        isMessageLoopRunning = false;
        scheduledHostCallback = null;
      }
    }
  } else {
    isMessageLoopRunning = false;
  }
};

function flushWork(hasTimeRemaining, initialTime) {
  isHostCallbackScheduled = false;
  // 定时器的目的表面上是为了保证最早的延时任务准时安排调度，实际上是为了保证 timerQueue 中的任务都能被执行。定时器到期后，我们会执行 advanceTimers 和 flushWork，flushWork 中会执行 workLoop，workLoop 中会将 taskQueue 中的任务不断执行，当 taskQueue 执行完毕后，workLoop 会选择 timerQueue 中的最早的任务重新设置一个定时器。所以如果 flushWork 执行了，定时器也就没有必要了，所以可以取消了。
  if (isHostTimeoutScheduled) {
    isHostTimeoutScheduled = false;
    cancelHostTimeout();
  }

  isPerformingWork = true;
  const previousPriorityLevel = currentPriorityLevel;
  try {
      return workLoop(hasTimeRemaining, initialTime);
  } finally {
    currentTask = null;
    currentPriorityLevel = previousPriorityLevel;
    isPerformingWork = false;
  }
}

// 遍历 taskQueue，执行任务
function workLoop(hasTimeRemaining, initialTime) {
  console.log('workLoop start')
  let currentTime = initialTime;
  // 检查 timerQueue 中的任务，将到期的任务转到 taskQueue 中
  advanceTimers(currentTime);
  currentTask = peek(taskQueue);
  while (currentTask !== null) {
    // 如果任务还没有到过期时间并且 shouldYieldToHost 返回 true
    if (currentTask.expirationTime > currentTime && shouldYieldToHost()) {
      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();
      // React 中单个任务在执行的时候，也是可以被打断的，如果单个任务执行的时候被打断，会返回一个函数
      // 这个任务被打断了
      if (typeof continuationCallback === 'function') {
        currentTask.callback = continuationCallback;
      }
      // 这个任务执行完毕
      else {
        if (currentTask === peek(taskQueue)) {
          pop(taskQueue);
        }
      }
      // 检查任务队列
      advanceTimers(currentTime);
    }
    // 说明任务执行完毕
    else {
      pop(taskQueue);
    }
    // 执行下一个任务
    currentTask = peek(taskQueue);
  }

  if (currentTask !== null) {
    return true;
  } else {
    // 如果 taskQueue 空了，timerQueue 中的最先执行的任务还没有到时间，那就执行一个 requestHostTimeout 定时器，保证准时执行
    const firstTimer = peek(timerQueue);
    if (firstTimer !== null) {
      requestHostTimeout(handleTimeout, firstTimer.startTime - currentTime);
    }
    return false;
  }
}

// 检查 timerQueue 中的任务，将到期的任务转到 taskQueue 中
function advanceTimers(currentTime) {
  let timer = peek(timerQueue);
  while (timer !== null) {
     // 任务被取消了
    if (timer.callback === null) {
      pop(timerQueue);
    }
    // //任务到期就转到 taskQueue 中
    else if (timer.startTime <= currentTime) {
      pop(timerQueue);
      timer.sortIndex = timer.expirationTime;
      push(taskQueue, timer);
    } else {
      return;
    }
    timer = peek(timerQueue);
  }
}

// 默认时间切片为 5ms
let frameInterval = 5;

// 判断是否让出线程，主要看这批任务自开始过了多久，超过了切片时间，就让出线程
function shouldYieldToHost() {
  const timeElapsed = getCurrentTime() - startTime;
  if (timeElapsed < frameInterval) {
    return false;
  }

  return true;
}

function requestHostTimeout(callback, ms) {
  taskTimeoutID = setTimeout(() => {
    callback(getCurrentTime());
  }, ms);
}

function cancelHostTimeout() {
  clearTimeout(taskTimeoutID);
  taskTimeoutID = -1;
}

function handleTimeout(currentTime) {
  isHostTimeoutScheduled = false;
  advanceTimers(currentTime);

  if (!isHostCallbackScheduled) {
    if (peek(taskQueue) !== null) {
      isHostCallbackScheduled = true;
      requestHostCallback(flushWork);
    }
    // 延时任务可能被取消了
    else {
      const firstTimer = peek(timerQueue);
      if (firstTimer !== null) {
        requestHostTimeout(handleTimeout, firstTimer.startTime - currentTime);
      }
    }
  }
}

源码 ScheduleMinHeap.js

// 源码地址：https://github.com/facebook/react/blob/main/packages/scheduler/src/SchedulerMinHeap.js

export function push(heap, node) {
  const index = heap.length;
  heap.push(node);

  siftUp(heap, node, index);
}

export function peek(heap) {
  return heap.length === 0 ? null : heap[0];
}

export function pop(heap) {
  if (heap.length === 0) {
    return null;
  }
  const first = heap[0];
  // JavaScript 的 pop 方法删除并返回数组的最后一个元素
  const last = heap.pop();
  if (last !== first) {
    heap[0] = last;
    siftDown(heap, last, 0);
  }
  return first;
}

function siftUp(heap, node, i) {
  let index = i;
  while (index > 0) {
    // 获取父节点的索引位置
    const parentIndex = (index - 1) >>> 1;
    const parent = heap[parentIndex];
    if (compare(parent, node) > 0) {
      // 如果父节点更大，就交换位置
      heap[parentIndex] = node;
      heap[index] = parent;
      index = parentIndex;
    } else {
      // 直到父节点更小，就退出
      return;
    }
  }
}

function siftDown(heap, node, i) {
  let index = i;
  const length = heap.length;
  const halfLength = length >>> 1;
  while (index < halfLength) {
    const leftIndex = (index + 1) * 2 - 1;
    const left = heap[leftIndex];
    const rightIndex = leftIndex + 1;
    const right = heap[rightIndex];
    
    // 如果 left 比 node 小
    if (compare(left, node) < 0) {
      // 如果 right 比 left 还小，说明 right 最小，right 与 node 交换
      if (rightIndex < length && compare(right, left) < 0) {
        heap[index] = right;
        heap[rightIndex] = node;
        index = rightIndex;
      }
      // 说明 left 最小，left 与 node 交换
      else {
        heap[index] = left;
        heap[leftIndex] = node;
        index = leftIndex;
      }
    }
    // 如果 left node 大，但 right 比 node 小，right 与 node 交换
    else if (rightIndex < length && compare(right, node) < 0) {
      heap[index] = right;
      heap[rightIndex] = node;
      index = rightIndex;
    } else {
      // 子元素都比 node 大
      return;
    }
  }
}

function compare(a, b) {
  // 首先比较 sortIndex，其次是 id
  const diff = a.sortIndex - b.sortIndex;
  return diff !== 0 ? diff : a.id - b.id;
}

测试代码

// 模拟函数的执行
const sleep = delay => {
  for (let start = Date.now(); Date.now() - start <= delay;) {}
}

unstable_scheduleCallback(3, () => {console.log(1)})

unstable_scheduleCallback(3, () => {
  console.log(2)
  sleep(10)
}, {
  delay: 10
})

unstable_scheduleCallback(3, () => {console.log(3)}, {
  delay: 10
})

unstable_scheduleCallback(3, () => {
  console.log(4)
  sleep(10)
})

unstable_scheduleCallback(3, () => {console.log(5)})

它的执行结果如下：

image.png

React 系列

该系列带大家从源码的角度深入理解 React 的各个 API 和执行过程。

本篇已收录到掘金专栏《React 基础与进阶》。该系列目前一共 16 篇。

此外我还写过 JavaScript 系列、TypeScript 系列、React 系列、Next.js 系列、冴羽答读者问等 14 个系列文章， 全系列文章目录：github.com/mqyqingfeng…

通过文字建立交流本身就是一种缘分，欢迎围观我的“朋友圈”、加入“低调务实优秀中国好青年”前端社群，分享技术，带你成长。

avatar
文章
阅读
粉丝