深入"時(shí)間管理大師" —— React Scheduler

let newCallbackNode;
// 同步
if (newCallbackPriority === SyncLane) {
  // 執(zhí)行 scheduleSyncCallback 方法
  // 只不過(guò)要區(qū)分下 legacy 模式還是 concurrent 模式
  // scheduleSyncCallback 自己有個(gè) syncQueue, 用來(lái)承載同步任務(wù)
  // 并交由 flushSyncCallbacks 處理這些同步任務(wù)后, 再交由下面 scheduleCallback
  // 以最高優(yōu)先級(jí)讓 Scheduler 調(diào)度
  if (root.tag === LegacyRoot) {
    scheduleLegacySyncCallback(performSyncWorkOnRoot.bind(null, root));
  } else {
    scheduleSyncCallback(performSyncWorkOnRoot.bind(null, root));
  }

  // 這里我們只談 scheduleCallback, 即以最高優(yōu)先級(jí)
  // ImmediateSchedulerPriority 來(lái)執(zhí)行同步任務(wù)
  if (supportsMicrotasks) {
    scheduleMicrotask(flushSyncCallbacks);
  } else {
    scheduleCallback(ImmediateSchedulerPriority, flushSyncCallbacks);
  }
  newCallbackNode = null;
} else {
  // 異步
  let schedulerPriorityLevel;
  // 需要將 lane 轉(zhuǎn)換為 Scheduler 可識(shí)別的優(yōu)先級(jí)
  switch (lanesToEventPriority(nextLanes)) {
    case DiscreteEventPriority:
      schedulerPriorityLevel = ImmediateSchedulerPriority;
      break;
    case ContinuousEventPriority:
      schedulerPriorityLevel = UserBlockingSchedulerPriority;
      break;
    case DefaultEventPriority:
      schedulerPriorityLevel = NormalSchedulerPriority;
      break;
    case IdleEventPriority:
      schedulerPriorityLevel = IdleSchedulerPriority;
      break;
    default:
      schedulerPriorityLevel = NormalSchedulerPriority;
      break;
  }
  // 通過(guò) scheduleCallback 將任務(wù)及其優(yōu)先級(jí)傳入到 Scheduler 中
  newCallbackNode = scheduleCallback(
    schedulerPriorityLevel,
    performConcurrentWorkOnRoot.bind(null, root)
  );
}

export const NoPriority = 0; // 沒(méi)有任何優(yōu)先級(jí)
export const ImmediatePriority = 1; // 立即執(zhí)行的優(yōu)先級(jí), 級(jí)別最高
export const UserBlockingPriority = 2; // 用戶阻塞級(jí)別的優(yōu)先級(jí), 比如用戶輸入, 拖拽這些
export const NormalPriority = 3; // 正常的優(yōu)先級(jí)
export const LowPriority = 4; // 低優(yōu)先級(jí)
export const IdlePriority = 5; // 最低階的優(yōu)先級(jí), 可以被閑置的那種

function unstable_scheduleCallback(priorityLevel, callback, options) {
  /*
   * (1
   */
  var currentTime = getCurrentTime();

  // timerQueue 根據(jù) startTime 排序
  // 任務(wù)進(jìn)來(lái)的時(shí)候, 開(kāi)始時(shí)間默認(rèn)是當(dāng)前時(shí)間, 如果進(jìn)入調(diào)度的時(shí)候傳了延遲時(shí)間
  // 開(kāi)始時(shí)間則是當(dāng)前時(shí)間與延遲時(shí)間的和
  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;
  }

  /*
   * (2
   */
  // taskQueue 根據(jù) expirationTime 排序
  var timeout;
  switch (priorityLevel) {
    case ImmediatePriority:
      timeout = IMMEDIATE_PRIORITY_TIMEOUT; // -1
      break;
    case UserBlockingPriority:
      timeout = USER_BLOCKING_PRIORITY_TIMEOUT; // 250
      break;
    case IdlePriority:
      timeout = IDLE_PRIORITY_TIMEOUT; // 1073741823 (2^30 - 1)
      break;
    case LowPriority:
      timeout = LOW_PRIORITY_TIMEOUT; // 10000
      break;
    case NormalPriority:
    default:
      timeout = NORMAL_PRIORITY_TIMEOUT; // 5000
      break;
  }

  // 計(jì)算任務(wù)的過(guò)期時(shí)間, 任務(wù)開(kāi)始時(shí)間 + timeout
  // 若是立即執(zhí)行的優(yōu)先級(jí)(IMMEDIATE_PRIORITY_TIMEOUT(-1))
  // 它的過(guò)期時(shí)間是 startTime - 1, 意味著立刻就過(guò)期
  var expirationTime = startTime + timeout;

  /*
   * (3
   */
  // 創(chuàng)建調(diào)度任務(wù)
  var newTask = {
    id: taskIdCounter++,
    callback, // 調(diào)度的任務(wù)
    priorityLevel, // 任務(wù)優(yōu)先級(jí)
    startTime, // 任務(wù)開(kāi)始的時(shí)間, 表示任務(wù)何時(shí)才能執(zhí)行
    expirationTime, // 任務(wù)的過(guò)期時(shí)間
    sortIndex: -1, // 在小頂堆隊(duì)列中排序的依據(jù)
  };

  if (enableProfiling) {
    newTask.isQueued = false;
  }

  /*
   * (4
   */
  // startTime > currentTime 說(shuō)明任務(wù)無(wú)需立刻執(zhí)行
  // 故放到 timerQueue 中
  if (startTime > currentTime) {
    // timerQueue 是通過(guò) startTime 判斷優(yōu)先級(jí)的,
    // 故將 startTime 設(shè)為 sortIndex 作為優(yōu)先級(jí)依據(jù)
    newTask.sortIndex = startTime;
    push(timerQueue, newTask);

    // 如果 taskQueue 是空的, 并且當(dāng)前任務(wù)優(yōu)先級(jí)最高
    // 那么這個(gè)任務(wù)就應(yīng)該優(yōu)先被設(shè)為 isHostTimeoutScheduled
    if (peek(taskQueue) === null && newTask === peek(timerQueue)) {
      // 如果超時(shí)調(diào)度已經(jīng)在執(zhí)行了, 就取消掉
      // 因?yàn)楫?dāng)前這個(gè)任務(wù)是最高優(yōu)的, 需要先處理當(dāng)前這個(gè)任務(wù)
      if (isHostTimeoutScheduled) {
        cancelHostTimeout();
      } else {
        isHostTimeoutScheduled = true;
      }
      // Schedule a timeout.
      requestHostTimeout(handleTimeout, startTime - currentTime);
    }
  } else {
    // startTime <= currentTime 說(shuō)明任務(wù)已過(guò)期
    // 需將任務(wù)放到 taskQueue
    newTask.sortIndex = expirationTime;
    push(taskQueue, newTask);

    if (enableProfiling) {
      markTaskStart(newTask, currentTime);
      newTask.isQueued = true;
    }

    // 如果目前正在對(duì)某個(gè)過(guò)期任務(wù)進(jìn)行調(diào)度,
    // 當(dāng)前任務(wù)需要等待下次時(shí)間片讓出時(shí)才能執(zhí)行
    if (!isHostCallbackScheduled && !isPerformingWork) {
      isHostCallbackScheduled = true;
      requestHostCallback(flushWork);
    }
  }

  return newTask;
}

let getCurrentTime;
const hasPerformanceNow =
  typeof performance === "object" && typeof performance.now === "function";

if (hasPerformanceNow) {
  const localPerformance = performance;
  getCurrentTime = () => localPerformance.now();
} else {
  const localDate = Date;
  const initialTime = localDate.now();
  getCurrentTime = () => localDate.now() - initialTime;
}

DOMHighResTimeStamp Performance::now() const {
  return MonotonicTimeToDOMHighResTimeStamp(tick_clock_->NowTicks());
}

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

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

function handleTimeout(currentTime) {
  isHostTimeoutScheduled = false;
  // 更新 timerQueue 和 taskQueue 兩個(gè)序列
  // 如果發(fā)現(xiàn) timerQueue 有過(guò)期的, 就放到 taskQueue 中
  advanceTimers(currentTime);

  // 檢查是否已經(jīng)開(kāi)始調(diào)度
  // 如果正在調(diào)度, 就什么都不做
  if (!isHostCallbackScheduled) {
    // 如果 taskQueue 中有任務(wù), 那就先去執(zhí)行已過(guò)期的任務(wù)
    if (peek(taskQueue) !== null) {
      isHostCallbackScheduled = true;
      requestHostCallback(flushWork);
    } else {
      // 如果沒(méi)有過(guò)期任務(wù), 那就接著對(duì)最高優(yōu)的第一個(gè)未過(guò)期的任務(wù)
      // 繼續(xù)重復(fù)這個(gè)過(guò)程, 直到它可以被放置到 taskQueue
      const firstTimer = peek(timerQueue);
      if (firstTimer !== null) {
        requestHostTimeout(handleTimeout, firstTimer.startTime - currentTime);
      }
    }
  }
}

function advanceTimers(currentTime) {
  let timer = peek(timerQueue);
  while (timer !== null) {
    if (timer.callback === null) {
      // Timer was cancelled.
      pop(timerQueue);

      // 開(kāi)始時(shí)間小于等于當(dāng)前時(shí)間, 說(shuō)明已過(guò)期,
      // 從 taskQueue 移走, 放到 taskQueue
    } else if (timer.startTime <= currentTime) {
      pop(timerQueue);
      // taskQueue 是通過(guò) expirationTime 判斷優(yōu)先級(jí)的,
      // expirationTime 越小, 說(shuō)明越緊急, 它就應(yīng)該放在 taskQueue 的最前面
      timer.sortIndex = timer.expirationTime;
      push(taskQueue, timer);

      if (enableProfiling) {
        markTaskStart(timer, currentTime);
        timer.isQueued = true;
      }
    } else {
      // 開(kāi)始時(shí)間大于當(dāng)前時(shí)間, 說(shuō)明未過(guò)期, 任務(wù)仍然保留在 timerQueue
      // 任務(wù)進(jìn)來(lái)的時(shí)候, 開(kāi)始時(shí)間默認(rèn)是當(dāng)前時(shí)間, 如果進(jìn)入調(diào)度的時(shí)候傳了延遲時(shí)間, 開(kāi)始時(shí)間則是當(dāng)前時(shí)間與延遲時(shí)間的和
      // 開(kāi)始時(shí)間越早, 說(shuō)明會(huì)越早開(kāi)始, 排在最小堆的前面
      // Remaining timers are pending.
      return;
    }
    timer = peek(timerQueue);
  }
}

let schedulePerformWorkUntilDeadline;

if (typeof setImmediate === "function") {
  schedulePerformWorkUntilDeadline = () => {
    setImmediate(performWorkUntilDeadline);
  };
} else {
  const channel = new MessageChannel();
  const port = channel.port2;

  // port1 接收調(diào)度信號(hào), 來(lái)執(zhí)行 performWorkUntilDeadline(受)
  channel.port1.onmessage = performWorkUntilDeadline;

  // port 是調(diào)度者(攻)
  schedulePerformWorkUntilDeadline = () => {
    port.postMessage(null);
  };
}

function requestHostCallback(callback) {
  scheduledHostCallback = callback;
  if (!isMessageLoopRunning) {
    isMessageLoopRunning = true;

    // postMessage, 告訴 port1 來(lái)執(zhí)行 performWorkUntilDeadline 方法
    schedulePerformWorkUntilDeadline();
  }
}

//
const performWorkUntilDeadline = () => {
  if (scheduledHostCallback !== null) {
    const currentTime = getCurrentTime();
    // 時(shí)間分片
    deadline = currentTime + yieldInterval;
    const hasTimeRemaining = true;

    let hasMoreWork = true;
    try {
      // scheduledHostCallback 去執(zhí)行真正的任務(wù)
      // 如果返回 true, 說(shuō)明當(dāng)前任務(wù)被中斷了
      // 會(huì)再讓調(diào)度者調(diào)度一個(gè)執(zhí)行者繼續(xù)執(zhí)行任務(wù)
      // 下面講 workLoop 方法時(shí)會(huì)說(shuō)到中斷恢復(fù)的邏輯, 先留個(gè)坑
      hasMoreWork = scheduledHostCallback(hasTimeRemaining, currentTime);
    } finally {
      if (hasMoreWork) {
        // 如果任務(wù)中斷了(沒(méi)執(zhí)行完), 就說(shuō)明 hasMoreWork 為 true
        // 這塊類似于遞歸, 就再申請(qǐng)一個(gè)調(diào)度者來(lái)繼續(xù)執(zhí)行該任務(wù)
        schedulePerformWorkUntilDeadline();
      } else {
        // 否則當(dāng)前任務(wù)就執(zhí)行完了
        // 關(guān)閉 isMessageLoopRunning
        // 并將 scheduledHostCallback 置為 null
        isMessageLoopRunning = false;
        scheduledHostCallback = null;
      }
    }
  } else {
    isMessageLoopRunning = false;
  }
  // Yielding to the browser will give it a chance to paint, so we can
  // reset this.
  needsPaint = false;
};

function flushWork(hasTimeRemaining, initialTime) {
  if (enableProfiling) {
    markSchedulerUnsuspended(initialTime);
  }

  // 由于 requestHostCallback 并不一定立即執(zhí)行傳入的回調(diào)函數(shù)
  // 所以 isHostCallbackScheduled 狀態(tài)可能會(huì)維持一段時(shí)間
  // 等到 flushWork 開(kāi)始處理任務(wù)時(shí), 則需要釋放該狀態(tài)以支持其他的任務(wù)被 schedule 進(jìn)來(lái)
  isHostCallbackScheduled = false;

  // 因?yàn)橐呀?jīng)在執(zhí)行 taskQueue 的任務(wù)了
  // 所以不需要等 timerQueue 中的任務(wù)過(guò)期了
  if (isHostTimeoutScheduled) {
    isHostTimeoutScheduled = false;
    cancelHostTimeout();
  }

  isPerformingWork = true;
  const previousPriorityLevel = currentPriorityLevel;
  try {
    if (enableProfiling) {
      try {
        return workLoop(hasTimeRemaining, initialTime);
      } catch (error) {
        if (currentTask !== null) {
          const currentTime = getCurrentTime();
          markTaskErrored(currentTask, currentTime);
          currentTask.isQueued = false;
        }
        throw error;
      }
    } else {
      // No catch in prod code path.
      return workLoop(hasTimeRemaining, initialTime);
    }
  } finally {
    // 執(zhí)行完任務(wù)后還原這些全局狀態(tài)
    currentTask = null;
    currentPriorityLevel = previousPriorityLevel;
    isPerformingWork = false;
    if (enableProfiling) {
      const currentTime = getCurrentTime();
      markSchedulerSuspended(currentTime);
    }
  }
}

function workLoop(hasTimeRemaining, initialTime) {
  let currentTime = initialTime;

  // 因?yàn)槭莻€(gè)異步的, 需要再次調(diào)整一下 timerQueue 跟 taskQueue
  advanceTimers(currentTime);

  // 最緊急的過(guò)期任務(wù)
  currentTask = peek(taskQueue);
  while (
    currentTask !== null &&
    !(enableSchedulerDebugging && isSchedulerPaused) // 用于 debugger, 不管
  ) {
    // 任務(wù)中斷!!!
    // 時(shí)間片到了, 但 currentTask 未過(guò)期, 跳出循環(huán)
    // 當(dāng)前任務(wù)就被中斷了, 需要放到下次 workLoop 中執(zhí)行
    if (
      currentTask.expirationTime > currentTime &&
      (!hasTimeRemaining || shouldYieldToHost())
    ) {
      // This currentTask hasn't expired, and we've reached the deadline.
      break;
    }

    const callback = currentTask.callback;
    if (typeof callback === "function") {
      // 清除掉 currentTask.callback
      // 如果下次迭代 callback 為空, 說(shuō)明任務(wù)執(zhí)行完了
      currentTask.callback = null;

      currentPriorityLevel = currentTask.priorityLevel;

      // 已過(guò)期
      const didUserCallbackTimeout = currentTask.expirationTime <= currentTime;

      if (enableProfiling) {
        markTaskRun(currentTask, currentTime);
      }

      // 執(zhí)行任務(wù)
      const continuationCallback = callback(didUserCallbackTimeout);
      currentTime = getCurrentTime();

      // 如果產(chǎn)生了連續(xù)回調(diào), 說(shuō)明出現(xiàn)了中斷
      // 故將新的 continuationCallback 賦值 currentTask.callback
      // 這樣下次恢復(fù)任務(wù)時(shí), callback 就接上趟了
      if (typeof continuationCallback === "function") {
        currentTask.callback = continuationCallback;

        if (enableProfiling) {
          markTaskYield(currentTask, currentTime);
        }
      } else {
        if (enableProfiling) {
          markTaskCompleted(currentTask, currentTime);
          currentTask.isQueued = false;
        }
        // 如果 continuationCallback 不是 Function 類型, 說(shuō)明任務(wù)完成!!!
        // 否則, 說(shuō)明這個(gè)任務(wù)執(zhí)行完了, 可以被彈出了
        if (currentTask === peek(taskQueue)) {
          pop(taskQueue);
        }
      }

      // 上面執(zhí)行任務(wù)會(huì)消耗一些時(shí)間, 再次重新更新兩個(gè)隊(duì)列
      advanceTimers(currentTime);
    } else {
      // 上面的 if 清空了 currentTask.callback, 所以
      // 如果 callback 為空, 說(shuō)明這個(gè)任務(wù)就執(zhí)行完了, 可以被彈出了
      pop(taskQueue);
    }

    // 如果當(dāng)前任務(wù)執(zhí)行完了, 那么就把下一個(gè)最高優(yōu)的任務(wù)拿出來(lái)執(zhí)行, 直到清空了 taskQueue
    // 如果當(dāng)前任務(wù)沒(méi)執(zhí)行完, currentTask 實(shí)際還是當(dāng)前的任務(wù), 只不過(guò) callback 變成了 continuationCallback
    currentTask = peek(taskQueue);
  }

  // 任務(wù)恢復(fù)!!!
  // 上面說(shuō)到 ddl 到了, 但 taskQueue 還沒(méi)執(zhí)行完(也就是任務(wù)被中斷了)
  // 就返回 true, 這就是恢復(fù)任務(wù)的標(biāo)志
  if (currentTask !== null) {
    return true;
  } else {
    // 若任務(wù)完成!!!, 去 timerQueue 中找需要最早開(kāi)始執(zhí)行的那個(gè)任務(wù)
    // 進(jìn)行 requestHostTimeout 調(diào)度那一套
    const firstTimer = peek(timerQueue);
    if (firstTimer !== null) {
      requestHostTimeout(handleTimeout, firstTimer.startTime - currentTime);
    }
    return false;
  }
}

function shouldYieldToHost() {
  if (
    enableIsInputPending &&
    navigator !== undefined &&
    navigator.scheduling !== undefined &&
    navigator.scheduling.isInputPending !== undefined
  ) {
    const scheduling = navigator.scheduling;
    const currentTime = getCurrentTime();
    if (currentTime >= deadline) {
      // There's no time left. We may want to yield control of the main
      // thread, so the browser can perform high priority tasks. The main ones
      // are painting and user input. If there's a pending paint or a pending
      // input, then we should yield. But if there's neither, then we can
      // yield less often while remaining responsive. We'll eventually yield
      // regardless, since there could be a pending paint that wasn't
      // accompanied by a call to `requestPaint`, or other main thread tasks
      // like network events.
      // 需要繪制或者有高優(yōu)先級(jí)的 I/O, 必須得讓出主線程
      if (needsPaint || scheduling.isInputPending()) {
        // There is either a pending paint or a pending input.
        return true;
      }
      // There's no pending input. Only yield if we've reached the max
      // yield interval.
      return currentTime >= maxYieldInterval;
    } else {
      // There's still time left in the frame.
      return false;
    }
  } else {
    // `isInputPending` is not available. Since we have no way of knowing if
    // there's pending input, always yield at the end of the frame.

    // task 執(zhí)行超過(guò)了 ddl 就應(yīng)該讓出主進(jìn)程了
    return getCurrentTime() >= deadline;
  }
}

function unstable_cancelCallback(task) {
  if (enableProfiling) {
    if (task.isQueued) {
      const currentTime = getCurrentTime();
      markTaskCanceled(task, currentTime);
      task.isQueued = false;
    }
  }

  // Null out the callback to indicate the task has been canceled. (Can't
  // remove from the queue because you can't remove arbitrary nodes from an
  // array based heap, only the first one.)
  task.callback = null;
}

function forceFrameRate(fps) {
  if (fps < 0 || fps > 125) {
    // Using console['error'] to evade Babel and ESLint
    console["error"](
      "forceFrameRate takes a positive int between 0 and 125, " +
        "forcing frame rates higher than 125 fps is not supported"
    );
    return;
  }
  if (fps > 0) {
    yieldInterval = Math.floor(1000 / fps);
  } else {
    // reset the framerate
    yieldInterval = 5;
  }
}