scheduler调度原理

487 阅读3分钟

schedular 入口 reactDOM下的 scheduleUpdateOnFiber()

scheduleUpdateOnFiber()==>ensureRootIsScheduled(root, eventTime)==> scheduleCallback()==>Scheduler_scheduleCallback() scheduler暴露给reconciler的接口 SchedulerWithReactIntegration.new.js

function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
...
  newCallbackNode = scheduleCallback(
    schedulerPriorityLevel,
    performConcurrentWorkOnRoot.bind(null, root),
  );
  ...
root.callbackNode = newCallbackNode;
}

Scheduler_scheduleCallback = unstable_scheduleCallback

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;
  }

  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; // 过期时间

  var newTask = { // 封装成一个任务对象 callback就是每个任务的回调
    id: taskIdCounter++,
    callback,
    priorityLevel,
    startTime, // 开始时间
    expirationTime,// 过期时间
    sortIndex: -1, // 小顶堆排序
  };
  if (enableProfiling) {
    newTask.isQueued = false;
  }

  if (startTime > currentTime) { // 未过期的任务 通过startTime排序 加入到timerQueue
    // This is a delayed task.
    newTask.sortIndex = startTime;
    push(timerQueue, newTask);
    if (peek(taskQueue) === null && newTask === peek(timerQueue)) { // taskQueue为空
      // 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); //setimeout(cb,time) handleTimeout就是讲timerQueue转到taskQueue
    }
  } else {  // 当前为已过期任务 直接加入taskQueue
    newTask.sortIndex = expirationTime;
    push(taskQueue, newTask);
    if (enableProfiling) {
      markTaskStart(newTask, currentTime);
      newTask.isQueued = true;
    }
    // Schedule a host callback, if needed. If we're already performing work,
    // wait until the next time we yield.
    if (!isHostCallbackScheduled && !isPerformingWork) {
      isHostCallbackScheduled = true;
      requestHostCallback(flushWork);    
    }
  }

  return newTask;
}

最终调用 requestHostCallback

 const channel = new MessageChannel();
  const port = channel.port2;
  channel.port1.onmessage = performWorkUntilDeadline;

  requestHostCallback = function(callback) {
    scheduledHostCallback = callback;
    if (!isMessageLoopRunning) {
      isMessageLoopRunning = true;
      port.postMessage(null);
    }
  };

通过MessageChannel(宏任务) 浏览器执行一次宏任务后再执行一UIRender(看浏览器策略,有可能不执行)详见 eventLoop 同步任务执行完执行performWorkUntilDeadline

 const performWorkUntilDeadline = () => {
  if (scheduledHostCallback !== null) { // 如果为空 循环结束
    const currentTime = getCurrentTime();
    // Yield after `yieldInterval` ms, regardless of where we are in the vsync
    // cycle. This means there's always time remaining at the beginning of
    // the message event.
    deadline = currentTime + yieldInterval; // yieldInterval = 5 一个循环5ms
    const hasTimeRemaining = true;
    try {
      const hasMoreWork = scheduledHostCallback( // 这里就是scheduler中断的原因,如果还有任务没有执行 就返回true scheduledHostCallback = flushWork
        hasTimeRemaining,
        currentTime,
      ); 
      if (!hasMoreWork) {
        isMessageLoopRunning = false;
        scheduledHostCallback = null;
      } else { //继续执行下一个循环 执行下次循环前浏览器可能会执行一下UIRender
        // If there's more work, schedule the next message event at the end
        // of the preceding one.
        port.postMessage(null);
      }
    } catch (error) {
      // If a scheduler task throws, exit the current browser task so the
      // error can be observed.
      port.postMessage(null);
      throw error;
    }
  } else {
    isMessageLoopRunning = false;
  }
  // Yielding to the browser will give it a chance to paint, so we can
  // reset this.
  needsPaint = false;
};

scheduledHostCallback = flushWork ==> workLoop

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

// We'll need a host callback the next time work is scheduled.
isHostCallbackScheduled = false;
if (isHostTimeoutScheduled) {
  // We scheduled a timeout but it's no longer needed. Cancel it.
  isHostTimeoutScheduled = false;
  cancelHostTimeout();
}

isPerformingWork = true;
const previousPriorityLevel = currentPriorityLevel;
try {
  if (enableProfiling) {
    try {
      return workLoop(hasTimeRemaining, initialTime); // hasMoreWork 的取值 如果中断任务 表明还有任务 返回true 
    } 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 {
  currentTask = null;
  currentPriorityLevel = previousPriorityLevel;
  isPerformingWork = false;
  if (enableProfiling) {
    const currentTime = getCurrentTime();
    markSchedulerSuspended(currentTime);
  }
}
}

function workLoop(hasTimeRemaining, initialTime) {
let currentTime = initialTime;
advanceTimers(currentTime);
currentTask = peek(taskQueue);
while (
  currentTask !== null &&
  !(enableSchedulerDebugging && isSchedulerPaused)
) {
  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 = null;
    currentPriorityLevel = currentTask.priorityLevel;
    const didUserCallbackTimeout = currentTask.expirationTime <= currentTime;
    if (enableProfiling) {
      markTaskRun(currentTask, currentTime);
    }
    const continuationCallback = callback(didUserCallbackTimeout); // 最终执行callback
    currentTime = getCurrentTime();
    if (typeof continuationCallback === 'function') {
      currentTask.callback = continuationCallback;
      if (enableProfiling) {
        markTaskYield(currentTask, currentTime);
      }
    } else {
      if (enableProfiling) {
        markTaskCompleted(currentTask, currentTime);
        currentTask.isQueued = false;
      }
      if (currentTask === peek(taskQueue)) {
        pop(taskQueue);
      }
    }
    advanceTimers(currentTime);
  } else {
    pop(taskQueue);
  }
  currentTask = peek(taskQueue);
}
// Return whether there's additional work
if (currentTask !== null) { // 如果有task ,就中断后继续
  return true;
} else { 
  const firstTimer = peek(timerQueue);
  if (firstTimer !== null) { // 去timerQueue里面获取
    requestHostTimeout(handleTimeout, firstTimer.startTime - currentTime);
  }
  return false; // 中断这次循环
}
}