React為什麼需要Scheduler排程器原理詳解

requestIdleCallback(fn,timeout)

var schedulePerformWorkUntilDeadline;
//node與舊版IE中執行
if (typeof localSetImmediate === 'function') {
  // Node.js and old IE.
  // There's a few reasons for why we prefer setImmediate.
  //
  // Unlike MessageChannel, it doesn't prevent a Node.js process from exiting.
  // (Even though this is a DOM fork of the Scheduler, you could get here
  // with a mix of Node.js 15+, which has a MessageChannel, and jsdom.)
  // https://github.com/facebook/react/issues/20756
  //
  // But also, it runs earlier which is the semantic we want.
  // If other browsers ever implement it, it's better to use it.
  // Although both of these would be inferior to native scheduling.
  schedulePerformWorkUntilDeadline = function () {
    localSetImmediate(performWorkUntilDeadline);
  };
} else if (typeof MessageChannel !== 'undefined') {
  //判斷瀏覽器能否執行MessageChannel物件，同屬非同步宏任務，優先順序高於setTimeout
  // DOM and Worker environments.
  // We prefer MessageChannel because of the 4ms setTimeout clamping.
  var channel = new MessageChannel();
  var port = channel.port2;
  channel.port1.onmessage = performWorkUntilDeadline;
  schedulePerformWorkUntilDeadline = function () {
    port.postMessage(null);
  };
} else {
  //如果當前非舊IE與node環境並且不具備MessageChannel則使用setTimeout執行回撥函數
  // We should only fallback here in non-browser environments.
  schedulePerformWorkUntilDeadline = function () {
    localSetTimeout(performWorkUntilDeadline, 0);
  };
}

// Times out immediately
var IMMEDIATE_PRIORITY_TIMEOUT = -1;//已經過期
// Eventually times out
var USER_BLOCKING_PRIORITY_TIMEOUT = 250;//將要過期
var NORMAL_PRIORITY_TIMEOUT = 5000;//一般優先順序任務
var LOW_PRIORITY_TIMEOUT = 10000;//低優先順序任務
// Never times out
var IDLE_PRIORITY_TIMEOUT = maxSigned31BitInt;//最低優先順序

function unstable_scheduleCallback(priorityLevel, callback, options) {
  var currentTime = exports.unstable_now();
  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;
  }
  var timeout;
  //根據不同優先順序對應時間給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;
  //新任務初始化
  var newTask = {
    id: taskIdCounter++,
    callback: callback,
    priorityLevel: priorityLevel,
    startTime: startTime,
    expirationTime: expirationTime,
    sortIndex: -1
  };
   //如果startTime大於currentTime則說明優先順序低，為延遲任務
  if (startTime > currentTime) {
    // This is a delayed task.
    //將startTime存入新任務，用於任務排序(執行順序)
    newTask.sortIndex = startTime;
    //採用小頂堆，將新任務插入延遲任務佇列進行排序
    //當前startTime > currentTime所以當前任務為延遲任務插入延遲任務佇列
    push(timerQueue, newTask);
    //若可執行任務佇列為空或者新任務為延遲任務的第一個
    if (peek(taskQueue) === null && newTask === peek(timerQueue)) {
      // All tasks are delayed, and this is the task with the earliest delay.
      if (isHostTimeoutScheduled) {
        // Cancel an existing timeout.
        //取消延時排程
        cancelHostTimeout();
      } else {
        isHostTimeoutScheduled = true;
      } // Schedule a timeout.
      requestHostTimeout(handleTimeout, startTime - currentTime);
    }
  } else {
    newTask.sortIndex = expirationTime;
    //推入可執行佇列
    push(taskQueue, newTask);
    // wait until the next time we yield.
    //當前可排程無插隊任務
    if (!isHostCallbackScheduled && !isPerformingWork) {
      isHostCallbackScheduled = true;
      requestHostCallback(flushWork);//執行
    }
  }
  return newTask;
}