- Published on
React Scheduler Task Scheduling
React Scheduler Task Scheduling
Scheduler 的核心源码位于 packages/scheduler/src/forks/Scheduler.js
scheduleCallback
该函数的主要目的就是用调度任务,该方法的分析如下:
let getCurrentTime = () => performance.now()
/* Performance 接口可以获取到当前页面中与性能相关的信息 */
/* Performance.now() 返回一个表示从性能测量时刻开始经过的毫秒数 */
// 有两个队列分别存储普通任务和延时任务
// 里面采用了一种叫做小顶堆的算法,保证每次从队列里面取出来的都是优先级最高(时间即将过期)
var taskQueue = [] // 存放普通任务
var timerQueue = [] // 存放延时任务
var maxSigned31BitInt = 1073741823
/* Timeout 对应的值 */
// Times out immediately
var IMMEDIATE_PRIORITY_TIMEOUT = -1
// Evetunally 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
/**
*
* @param {*} priorityLevel 优先级等级
* @param {*} callback 具体要做的任务
* @param {*} options { delay: number } 这是一个对象,该对象有 delay 属性,表示要延迟的时间
* @returns
*/
function unstable_scheduleCallback(priorityLevel, callback, options) {
// 获取当前的时间
var currentTime = getCurrentTime()
var startTime
// 整个这个 if.. else 就是在设置起始时间,如果有延时,起始时间需要添加上这个延时
if (typeof options === 'object' && options !== null) {
var delay = options.delay
// 如果设置了延时时间,那么 startTime 就为当前时间 + 延时时间
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
}
// 接下来就计算出过期时间
// 计算出来的时间有些比当前时间要早(IMMEDIATE_PRIORITY_TIMEOUT ),绝大部分比当前的时间要晚一些
// 下文有图解搭配
var expirationTime = startTime + timeout
// 创建一个新的任务
var newTask = {
id: taskIdCounter++, // 任务 id
callback, // 该任务具体要做的事情
priorityLevel, // 任务的优先级别
startTime, // 任务开始时间
expirationTime, // 任务的过期时间
sortIndex: -1, // 用于后面在小顶堆(这是一种算法,可以始终从任务队列中拿出最优先的任务)进行排序的索引
}
/*
GPT:在 React 源代码中,enableProfiling 是一个标志,用于在开发环境中启用额外的性能追踪和分析特性。这些特性可以帮助开发者了解应用程序的性能瓶颈,特别是在组件渲染和更新时的性能表现。
*/
if (enableProfiling) {
newTask.isQueued = false
}
if (startTime > currentTime) {
// This is a delayed task.
// 说明这是一个延时任务
newTask.sortIndex = startTime
// 将该任务推入到 timerQueue 的任务队列中
push(timerQueue, newTask)
if (peek(taskQueue) === null && newTask === peek(timerQueue)) {
// 进入此 if,说明 taskQueue 里面的任务已经执行完毕了
// 并且从 timerQueue 里面取出一个最新的任务又是当前任务
// All tasks are delayed, and this is the task with the earliest delay.
// 下面的 if.. else 就是一个开关
if (isHostTimeoutScheduled) {
// Cancel an existing timeout.
cancelHostTimeout()
} else {
isHostTimeoutScheduled = true
}
// Schedule a timeout.
// 如果是延时任务,调用 requestHostTimeout 进行任务的调度
requestHostTimeout(handleTimeout, startTime - currentTime)
}
} else {
// 说明不是延时任务
newTask.sortIndex = expirationTime // 设置了 sortIndex 后,可以在任务队列里面进行一个排序
// 推入到 taskQueue 任务队列
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.
// 最终调用 requestHostCallback 进行任务的调度
if (!isHostCallbackScheduled && !isPerformingWork) {
isHostCallbackScheduled = true
requestHostCallback(flushWork)
}
}
// 向外部返回任务
return newTask
}
该方法主要注意以下几个关键点:
- 关于任务队列有两个,一个
taskQueue
,另一个是timerQueue
,taskQueue
存放普通任务,timerQueue
存放延时任务,任务队列内部用到了小顶堆的算法,保证始终放进去(push
)的任务能够进行正常的排序,回头通过peek
取出任务时,始终取出的是时间优先级最高的那个任务 - 根据传入的不同的
priorityLevel
,会进行不同的timeout
的设置,任务的timeout
时间也就不一样了,有的比当前时间还要小,这个代表立即需要执行的,绝大部分的时间比当前时间大。
- 不同的任务,最终调用的函数不一样
- 普通任务:
requestHostCallback(flushWork)
- 延时任务:
requestHostTimeout(handleTimeout, startTime - currentTime)
- 普通任务:
requestHostCallback & schedulePerformWorkUntilDeadline
requestHostCallback
/**
*
* @param {*} callback 是在调用的时候传入的 flushWork
* requestHostCallback 这个函数没有做什么事情,主要就是调用 schedulePerformWorkUntilDeadline
*/
function requestHostCallback(callback) {
scheduledHostCallback = callback
// scheduledHostCallback ---> flushWork
if (!isMessageLoopRunning) {
isMessageLoopRunning = true
schedulePerformWorkUntilDeadline() // 实例化 MessageChannel 进行后面的调度
}
}
schedulePerformWorkUntilDeadline
/* 实例化 MessageChannel 进行后面的调度 */
let schedulePerformWorkUntilDeadline // undefined
if (typeof localSetImmediate === 'function') {
// Node.js and old IE.
// https://github.com/facebook/react/issues/20756
schedulePerformWorkUntilDeadline = () => {
localSetImmediate(performWorkUntilDeadline)
}
} else if (typeof MessageChannel !== 'undefined') {
// 大多数情况下,使用的是 MessageChannel
const channel = new MessageChannel()
const port = channel.port2
channel.port1.onmessage = performWorkUntilDeadline
schedulePerformWorkUntilDeadline = () => {
port.postMessage(null)
}
} else {
// setTimeout 进行兜底
schedulePerformWorkUntilDeadline = () => {
localSetTimeout(performWorkUntilDeadline, 0)
}
}
requestHostCallback
主要就是调用了schedulePerformWorkUntilDeadline
schedulePerformWorkUntilDeadline
一开始是undefiend
,根据不同的环境选择不同的生成宏任务的方式
performWorkUntilDeadline
let startTime = -1
const performWorkUntilDeadline = () => {
// scheduledHostCallback ---> flushWork
if (scheduledHostCallback !== null) {
// 获取当前的时间
const currentTime = getCurrentTime()
// Keep track of the start time so we can measure how long the main thread
// has been blocked.
// 这里的 startTime 并非 unstable_scheduleCallback 方法里面的 startTime
// 而是一个全局变量,默认值为 -1
// 用来测量任务的执行时间,从而能够知道主线程被阻塞了多久
startTime = currentTime
const hasTimeRemaining = true // 默认还有剩余时间
// If a scheduler task throws, exit the current browser task so the
// error can be observed.
//
// Intentionally not using a try-catch, since that makes some debugging
// techniques harder. Instead, if `scheduledHostCallback` errors, then
// `hasMoreWork` will remain true, and we'll continue the work loop.
let hasMoreWork = true // 默认还有需要做的任务
try {
// scheduledHostCallback ---> flushWork(true, 开始时间): boolean
// 如果是 true,代表工作没做完
// false 代表没有任务了
hasMoreWork = scheduledHostCallback(hasTimeRemaining, currentTime)
} finally {
if (hasMoreWork) {
// If there's more work, schedule the next message event at the end
// of the preceding one.
// 那么就使用 messageChannel 进行一个 message 事件的调度,就将任务放入到任务队列里面
schedulePerformWorkUntilDeadline()
} else {
// 说明任务做完了
isMessageLoopRunning = false
scheduledHostCallback = null // scheduledHostCallback 之前为 flushWork,设置为 null
}
}
} else {
isMessageLoopRunning = false
}
// Yielding to the browser will give it a chance to paint, so we can
// reset this.
needsPaint = false
}
- 该方法实际上主要就是在调用
scheduledHostCallback(flushWork)
,调用之后,返回一个布尔值,根据这个布尔值来判断是否还有剩余的任务,如果还有,就是用MessageChannel
进行一个宏任务的包装,放入到任务队列里面
flushWork & workLoop
flushWork
/**
*
* @param {*} hasTimeRemaining 是否有剩余的时间,一开始是 true
* @param {*} initialTime 做这一个任务时开始执行的时间
* @returns
*/
function flushWork(hasTimeRemaining, initialTime) {
// ...
try {
if (enableProfiling) {
try {
// 核心实际上是这一句,调用 workLoop
return workLoop(hasTimeRemaining, initialTime)
} catch (error) {
// ...
}
} else {
// 核心实际上是这一句,调用 workLoop
return workLoop(hasTimeRemaining, initialTime)
}
} finally {
// ...
}
}
workLoop
/**
*
* @param {*} hasTimeRemaining 是否有剩余的时间,一开始是 true
* @param {*} initialTime 做这一个任务时开始执行的时间
* @returns
*/
function workLoop(hasTimeRemaining, initialTime) {
let currentTime = initialTime
// 该方法实际上是用来遍历 timerQueue,判断是否有已经到期了的任务
// 如果有,将这个任务放入到 taskQueue
advanceTimers(currentTime)
// 从 taskQueue 里面取一个任务出来
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.
// currentTask.expirationTime > currentTime 表示任务还没有过期
// hasTimeRemaining 代表是否有剩余时间
// shouldYieldToHost 任务是否应该暂停,归还主线程
// 那么我们就跳出 while
break
}
// 没有进入到上面的 if,说明这个任务到过期时间,并且有剩余时间来执行,没有到达需要浏览器渲染的时候
// 那我们就执行该任务即可
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)
currentTime = getCurrentTime()
if (typeof continuationCallback === 'function') {
// If a continuation is returned, immediately yield to the main thread
// regardless of how much time is left in the current time slice.
// $FlowFixMe[incompatible-use] found when upgrading Flow
currentTask.callback = continuationCallback
if (enableProfiling) {
// $FlowFixMe[incompatible-call] found when upgrading Flow
markTaskYield(currentTask, currentTime)
}
advanceTimers(currentTime)
return true
} else {
if (enableProfiling) {
// $FlowFixMe[incompatible-call] found when upgrading Flow
markTaskCompleted(currentTask, currentTime)
// $FlowFixMe[incompatible-use] found when upgrading Flow
currentTask.isQueued = false
}
if (currentTask === peek(taskQueue)) {
pop(taskQueue)
}
advanceTimers(currentTime)
}
} else {
// 直接弹出
pop(taskQueue)
}
// 再从 taskQueue 里面拿一个任务出来
currentTask = peek(taskQueue)
}
// Return whether there's additional work
if (currentTask !== null) {
// 如果不为空,代表还有更多的任务,那么回头外部的 hasMoreWork 拿到的就也是 true
return true
} else {
// taskQueue 这个队列是空了,那么我们就从 timerQueue 里面去看延时任务
const firstTimer = peek(timerQueue)
if (firstTimer !== null) {
requestHostTimeout(handleTimeout, firstTimer.startTime - currentTime)
}
// 没有进入上面的 if,说明 timerQueue 里面的任务也完了,返回 false,回头外部的 hasMoreWork 拿到的就也是 false
return false
}
}
flushWork
主要就是在调用workLoop
workLoop
首先有一个while
循环,该while
循环保证了能够从任务队列中不停的取任务出来
while (currentTask !== null && !(enableSchedulerDebugging && isSchedulerPaused)) {
// ...
}
- 当然,不是说一直从任务队列里面取任务出来执行就完事儿,每次取出一个任务后,还需要一系列的判断
if (
currentTask.expirationTime > currentTime &&
(!hasTimeRemaining || shouldYieldToHost())
) {
break;
}
currentTask.expirationTime > currentTime
表示任务还没有过期hasTimeRemaining
代表是否有剩余时间shouldYieldToHost
任务是否应该暂停,归还主线程- 如果进入
if
,说明因为某些原因不能再执行任务,需要立即归还主线程,那么我们就跳出while
shouldYieldToHost
function shouldYieldToHost() {
// getCurrentTime 获取当前时间
// startTime 是我们任务开始时的时间,一开始是 -1,之后任务开始时,将任务开始时的时间赋值给了它
const timeElapsed = getCurrentTime() - startTime
// frameInterval 默认设置的是 5ms
if (timeElapsed < frameInterval) {
// 主线程只被阻塞了一点点时间,远远没达到需要归还的时候
// The main thread ha sonly been blocked for a really short amount of time;
// smaller than a single frame. Don't yield yet.
return false
}
// 如果没有进入上面的 if,说明主线程已经被阻塞了一段时间了
// 需要归还主线程
// The main thread has been blocked for a non-negligible amount of time. We
// may want to yeild control of the main thread, so the borwser 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 whild remaining responsive. We'll
// eventually yeild regardless. since there could be a pending paint that
// wasn't accompanied by a call to 'requestPaint', or other main hread tasks
// like network events.
if (enableIsInputPending) {
if (needsPaint) {
// There's a pending paint (signaled by `requestPaint`). Yield now.
return true
}
if (timeElapsed < continuousInputInterval) {
// We haven't blocked the thread for that long. Only yield if there's a
// pending discrete input (e.g. click). It's OK if there's pending
// continuous input (e.g. mouseover).
if (isInputPending !== null) {
return isInputPending()
}
} else if (timeElapsed < maxInterval) {
// Yield if there's either a pending discrete or continuous input.
if (isInputPending !== null) {
return isInputPending(continuousOptions)
}
} else {
// We've blocked the thread for a long time. Even if there's no pending
// input, there may be some other scheduled work that we don't know about,
// like a network event. Yield now.
return true
}
}
// `isInputPending` isn't available. Yield now.
return true
}
- 首先计算
timeElapsed
,然后判断是否超时,没有的话就返回false
,表示不需要归还,否则就返回true
,表示需要归还。 frameInterval
默认设置的是 5ms
advanceTimers
function advanceTimers(currentTime) {
// Check for tasks that are no longer delayed and add them to the queue.
// 从 timerQueue 里面获取一个任务
let timer = peek(timerQueue)
// 遍历整个 timerQueue
while (timer !== null) {
if (timer.callback === null) {
// 这个任务没有对应的要执行的 callback,直接从这个队列弹出
pop(timerQueue)
} else if (timer.startTime <= currentTime) {
// 进入这个分支,说明当前的任务已经不再是延时任务
// 我们需要将其转移到 taskQueue
pop(timerQueue)
timer.sortIndex = timer.expirationTime
push(taskQueue, timer) // 推入到 taskQueue
// ...
} else {
// Remaining timers are pending
return
}
// 从 timerQueue 里面再取一个新的进行判断
timer = peek(timerQueue)
}
}
- 该方法就是遍历整个
timerQueue
,查看是否有已经过期的方法,如果有,不是说直接执行,而是将这个过期的方法添加到taskQueue
里面。