React scheduler
什么是React scheduler呢？
这就是react可以做到在diff的时候，用来做任务分配的机制。因为js是单线程的，所以如果一次执行任务太多的话，如果在这期间用户过来点击个按钮，输入个数字什么的，浏览器可能毫无反应，这样用户可能会以为浏览器卡死啦。
现在浏览器提供了一个接口requestidlecallback, mdn描述(https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback)。具体就是现在浏览器可以让我们有机会在浏览器空闲的时候，用来执行一段任务。
但是react的scheduler并没有使用该接口，而是自己实现了一个requestidlecallback的ployfill。
为什么没有这么用呢？
据说是因为兼容问题，或者是react目前没有看到浏览器厂商对它强烈的支持，或者是其他原因。
react是使用的requestAnimationFrame来模拟实现的requestidlecallback。
React scheduler 流程
这里通过把所有的任务通过双向链表链接起来，类似如下图：
image.png
然后通过requestAnimationFrame或者setTimeout来获取浏览器在每帧的空闲时间来循环处理所有的任务，直到链表为空为止。
React scheduler 代码
代码文件（node_modules/scheduler/cjs/scheduler.development.js）
unstable_scheduleCallback
// 组成双向链表，开始安排任务
function unstable_scheduleCallback(callback, deprecated_options) {
// currentEventStartTime 初始值为-1，也就是初始使用当前的时间
var startTime =
currentEventStartTime !== -1
? currentEventStartTime
: exports.unstable_now();
// 过期时间
var expirationTime;
// 这里很简单，就是根据不同的优先级，赋予不同的过期时间
if (
typeof deprecated_options === "object" &&
deprecated_options !== null &&
typeof deprecated_options.timeout === "number"
) {
// FIXME: Remove this branch once we lift expiration times out of React.
expirationTime = startTime + deprecated_options.timeout;
} else {
switch (currentPriorityLevel) {
case ImmediatePriority:
expirationTime = startTime + IMMEDIATE_PRIORITY_TIMEOUT;
break;
case UserBlockingPriority:
expirationTime = startTime + USER_BLOCKING_PRIORITY;
break;
case IdlePriority:
expirationTime = startTime + IDLE_PRIORITY;
break;
case LowPriority:
expirationTime = startTime + LOW_PRIORITY_TIMEOUT;
break;
case NormalPriority:
default:
expirationTime = startTime + NORMAL_PRIORITY_TIMEOUT;
}
}
// 组装成新的node
var newNode = {
callback: callback,
priorityLevel: currentPriorityLevel,
expirationTime: expirationTime,
next: null,
previous: null
};
// Insert the new callback into the list, ordered first by expiration, then
// by insertion. So the new callback is inserted any other callback with
// equal expiration.
if (firstCallbackNode === null) {
// This is the first callback in the list.
// 开始安排
firstCallbackNode = newNode.next = newNode.previous = newNode;
ensureHostCallbackIsScheduled();
} else {
var next = null;
var node = firstCallbackNode;
do {
if (node.expirationTime > expirationTime) {
// The new callback expires before this one.
next = node;
break;
}
node = node.next;
} while (node !== firstCallbackNode);
if (next === null) {
// No callback with a later expiration was found, which means the new
// callback has the latest expiration in the list.
// 插在最后面
next = firstCallbackNode;
} else if (next === firstCallbackNode) {
// The new callback has the earliest expiration in the entire list.
// 插在最前面
firstCallbackNode = newNode;
ensureHostCallbackIsScheduled();
}
var previous = next.previous;
previous.next = next.previous = newNode;
newNode.next = next;
newNode.previous = previous;
}
return newNode;
}
这里的unstable_scheduleCallback就是requestIdleCallback的代替者，不过也可以看到源码里边标注了unstable，表示不是稳定的，以后随时会改。
unstable_scheduleCallback的功能很简单，就是根据传入的callback和options，计算出过期时间，然后组成双向任务链表，然后开始通过ensureHostCallbackIsScheduled()来安排任务循环执行。
ensureHostCallbackIsScheduled
然后来看ensureHostCallbackIsScheduled这个函数，这个也很简单，首先判断是否任务已经开始循环安排了，如果是，则退出，如果没有，则重置条件，重新开始去请求循环安排任务。
// 是否已经开始安排任务
function ensureHostCallbackIsScheduled() {
// 有一个callback正在进行
if (isExecutingCallback) {
// Don't schedule work yet; wait until the next time we yield.
return;
}
// firstCallbackNode的过期时间是最早的
// Schedule the host callback using the earliest expiration in the list.
var expirationTime = firstCallbackNode.expirationTime;
if (!isHostCallbackScheduled) {
isHostCallbackScheduled = true;
} else {
// Cancel the existing host callback.
// 取消其它存在的host callback
cancelHostCallback();
}
// 开始安排任务队列
requestHostCallback(flushWork, expirationTime);
}
可以看到这里最后走到了requestHostCallback(flushWork, expirationTime);
这里的flushwork是schedule的一个刷新任务队列函数，等会再看。先看下
requestHostCallback
requestHostCallback
这里requestHostCallback根据传入的callback和过期时间确定下一步执行那些操作，如果当天正在执行任务，或者是过期时间小于0，则通过port.postMessage发送信息，来立即执行任务更新。
这里的port.postMessage是
var channel = new MessageChannel();
var port = channel.port2;
这里可以理解为一个通道，就是当在scheduler中如果想要立即执行任务链表的更新，就可以通过port.postMessage来发送一个信息，通过channel.port1.onmessage开接受信息，并且立即开始执行任务链表的更新，类似一个发布订阅，当想更新链表的时候，只需要发送个信息就可以了。
scheduler里边就是通过MessageChannel来完成通知和执行任务链表更新操作的。
requestHostCallback 里边如果没有到到期时间且还还没有开始通过isAnimationFrameScheduled来订阅浏览器的空闲时间,则通过requestAnimationFrameWithTimeout(animationTick)去订阅。
// 开始安排任务， callback就是刚才的flushwork函数， absoluteTimeout是传入的过期时间
requestHostCallback = function(callback, absoluteTimeout) {
// 准备开始的callback，开始执行的回调函数
scheduledHostCallback = callback;
// 过期时间
timeoutTime = absoluteTimeout;
if (isFlushingHostCallback || absoluteTimeout < 0) {
// ASAP 尽快
// Don't wait for the next frame. Continue working ASAP, in a new event.
port.postMessage(undefined);
} else if (!isAnimationFrameScheduled) {
// isAnimationFrameScheduled 安排
// If rAF didn't already schedule one, we need to schedule a frame.
// TODO: If this rAF doesn't materialize because the browser throttles, we
// might want to still have setTimeout trigger rIC as a backup to ensure
// that we keep performing work.
isAnimationFrameScheduled = true;
requestAnimationFrameWithTimeout(animationTick);
}
};
因为最后都会走到执行任务链表刷新的地方，也就是最后都会走到和port.postMessage(undefined)这里发出的请求，然后通过channel.port1.onmessage这里来处理的时候，所以这里暂时先不看这里，等到最后再看这边的代码，目前先先看下requestAnimationFrameWithTimeout
requestAnimationFrameWithTimeout
这里主要是使用requestAnimationFrame，但是会有requestAnimationFrame不起作用的情况下，使用setTimeout。
// requestAnimationFrame does not run when the tab is in the background. If
// we're backgrounded we prefer for that work to happen so that the page
// continues to load in the background. So we also schedule a 'setTimeout' as
// a fallback.
// TODO: Need a better heuristic for backgrounded work.
var ANIMATION_FRAME_TIMEOUT = 100;
var rAFID;
var rAFTimeoutID;
var requestAnimationFrameWithTimeout = function(callback) {
// schedule rAF and also a setTimeout
rAFID = localRequestAnimationFrame(function(timestamp) {
// cancel the setTimeout
localClearTimeout(rAFTimeoutID);
callback(timestamp);
});
rAFTimeoutID = localSetTimeout(function() {
// cancel the requestAnimationFrame
localCancelAnimationFrame(rAFID);
callback(exports.unstable_now());
}, ANIMATION_FRAME_TIMEOUT);
};
代码也很简单，这里传入的callback是animationTick，去看下animationTick的代码
animationTick
这个函数也很简单，就是保持循环订阅浏览器的空闲时间，同时动态的更新每帧的时间，因为react里边刚开始的默认的每帧的时间是33ms，这里也就是默认30fps，但是react里边可以根据实际的fps来动态的更新每帧的时间，通过这里，
if (nextFrameTime < 8) {
// Defensive coding. We don't support higher frame rates than 120hz.
// If the calculated frame time gets lower than 8, it is probably a bug.
nextFrameTime = 8;
}
// If one frame goes long, then the next one can be short to catch up.
// If two frames are short in a row, then that's an indication that we
// actually have a higher frame rate than what we're currently optimizing.
// We adjust our heuristic dynamically accordingly. For example, if we're
// running on 120hz display or 90hz VR display.
// Take the max of the two in case one of them was an anomaly due to
// missed frame deadlines.
activeFrameTime =
nextFrameTime < previousFrameTime
? previousFrameTime
: nextFrameTime;
可以看到，这里react也做了一个最小的限制，最小的时候，每帧的时间是8ms
var animationTick = function(rafTime) {
if (scheduledHostCallback !== null) {
// Eagerly schedule the next animation callback at the beginning of the
// frame. If the scheduler queue is not empty at the end of the frame, it
// will continue flushing inside that callback. If the queue *is* empty,
// then it will exit immediately. Posting the callback at the start of the
// frame ensures it's fired within the earliest possible frame. If we
// waited until the end of the frame to post the callback, we risk the
// browser skipping a frame and not firing the callback until the frame
// after that.
requestAnimationFrameWithTimeout(animationTick);
} else {
// No pending work. Exit.
isAnimationFrameScheduled = false;
return;
}
// 一帧之内还剩时间rafTime - frameDeadline
var nextFrameTime = rafTime - frameDeadline + activeFrameTime;
if (
nextFrameTime < activeFrameTime &&
previousFrameTime < activeFrameTime
) {
if (nextFrameTime < 8) {
// Defensive coding. We don't support higher frame rates than 120hz.
// If the calculated frame time gets lower than 8, it is probably a bug.
nextFrameTime = 8;
}
// If one frame goes long, then the next one can be short to catch up.
// If two frames are short in a row, then that's an indication that we
// actually have a higher frame rate than what we're currently optimizing.
// We adjust our heuristic dynamically accordingly. For example, if we're
// running on 120hz display or 90hz VR display.
// Take the max of the two in case one of them was an anomaly due to
// missed frame deadlines.
activeFrameTime =
nextFrameTime < previousFrameTime
? previousFrameTime
: nextFrameTime;
} else {
previousFrameTime = nextFrameTime;
}
frameDeadline = rafTime + activeFrameTime;
if (!isMessageEventScheduled) {
isMessageEventScheduled = true;
port.postMessage(undefined);
}
};
可以看到这里最后也是通过port.postMessage(undefined)来触发任务链表队列。
channel.port1.onmessage
现在去看下真正开始更新任务链表的时候，到底做了些什么？
代码也比较简单，最重要的就是这里调用了在开始的ensureHostCallbackIsScheduled传入的requestHostCallback(flushWork, expirationTime)的fulshWork，也就是onmessage里边的prevScheduledCallback(didTimeout)
// We use the postMessage trick to defer idle work until after the repaint.
// 我们使用postMessage 技巧来将空闲工作推迟到重绘之后
var channel = new MessageChannel();
var port = channel.port2;
channel.port1.onmessage = function(event) {
isMessageEventScheduled = false;
// 重制， timeout过期时间
var prevScheduledCallback = scheduledHostCallback;
var prevTimeoutTime = timeoutTime;
scheduledHostCallback = null;
timeoutTime = -1;
var currentTime = exports.unstable_now();
var didTimeout = false;
if (frameDeadline - currentTime <= 0) {
// There's no time left in this idle period. Check if the callback has
// a timeout and whether it's been exceeded.
// 已经执行过了
if (prevTimeoutTime !== -1 && prevTimeoutTime <= currentTime) {
// Exceeded the timeout. Invoke the callback even though there's no
// time left.
didTimeout = true;
} else {
// No timeout.
// 没有执行过
if (!isAnimationFrameScheduled) {
// Schedule another animation callback so we retry later.
isAnimationFrameScheduled = true;
requestAnimationFrameWithTimeout(animationTick);
}
// Exit without invoking the callback.
scheduledHostCallback = prevScheduledCallback;
timeoutTime = prevTimeoutTime;
return;
}
}
if (prevScheduledCallback !== null) {
isFlushingHostCallback = true;
try {
prevScheduledCallback(didTimeout);
} finally {
isFlushingHostCallback = false;
}
}
};
flushWork
终于到了真正开始干活的地方啦，这里也很简单，就是通过循环，在给定的时间里去调用flushFirstCallback()，并且在最后去执行最紧急的callback
function flushWork(didTimeout) {
isExecutingCallback = true;
// currentDidTimeout 初始值为false
var previousDidTimeout = currentDidTimeout;
currentDidTimeout = didTimeout;
try {
if (didTimeout) {
// Yield 退让
// Flush all the expired callbacks without yielding.
while (firstCallbackNode !== null) {
// Read the current time. Flush all the callbacks that expire at or
// earlier than that time. Then read the current time again and repeat.
// This optimizes for as few performance.now calls as possible.
var currentTime = exports.unstable_now();
// 刷新列表
if (firstCallbackNode.expirationTime <= currentTime) {
do {
flushFirstCallback();
} while (
firstCallbackNode !== null &&
firstCallbackNode.expirationTime <= currentTime
);
continue;
}
break;
}
} else {
// Keep flushing callbacks until we run out of time in the frame.
if (firstCallbackNode !== null) {
do {
flushFirstCallback();
// deadline < current, 空闲时间到期
} while (firstCallbackNode !== null && !shouldYieldToHost());
}
}
} finally {
isExecutingCallback = false;
currentDidTimeout = previousDidTimeout;
if (firstCallbackNode !== null) {
// There's still work remaining. Request another callback.
ensureHostCallbackIsScheduled();
} else {
isHostCallbackScheduled = false;
}
// Before exiting, flush all the immediate work that was scheduled.
flushImmediateWork();
}
}
flushFirstCallback
这里就是一些链表的操作，删除或者插入，或者重新去请求安排时间等等，
// 更新第一个任务
function flushFirstCallback() {
var flushedNode = firstCallbackNode;
// Remove the node from the list before calling the callback. That way the
// list is in a consistent state even if the callback throws.
var next = firstCallbackNode.next;
if (firstCallbackNode === next) {
// This is the last callback in the list.
// 最后一个啦，全部设置为空
firstCallbackNode = null;
next = null;
} else {
// 从链表中删掉firstCallbackNode
var lastCallbackNode = firstCallbackNode.previous;
firstCallbackNode = lastCallbackNode.next = next;
next.previous = lastCallbackNode;
}
// 全部设置为空，独立出来
flushedNode.next = flushedNode.previous = null;
// Now it's safe to call the callback.
// 获取各种属性
var callback = flushedNode.callback;
var expirationTime = flushedNode.expirationTime;
var priorityLevel = flushedNode.priorityLevel;
// 当前的等级和过期时间， 简单的交换
var previousPriorityLevel = currentPriorityLevel;
var previousExpirationTime = currentExpirationTime;
currentPriorityLevel = priorityLevel;
currentExpirationTime = expirationTime;
var continuationCallback;
try {
continuationCallback = callback();
} finally {
// 换回来
currentPriorityLevel = previousPriorityLevel;
currentExpirationTime = previousExpirationTime;
}
// A callback may return a continuation. The continuation should be scheduled
// with the same priority and expiration as the just-finished callback.
// 有可能返回一个函数
if (typeof continuationCallback === "function") {
var continuationNode = {
callback: continuationCallback,
priorityLevel: priorityLevel,
expirationTime: expirationTime,
next: null,
previous: null
};
// Insert the new callback into the list, sorted by its expiration. This is
// almost the same as the code in `scheduleCallback`, except the callback
// is inserted into the list *before* callbacks of equal expiration instead
// of after.
// 很简单，插入进去，根据过期时间
if (firstCallbackNode === null) {
// This is the first callback in the list.
// 只有一个
firstCallbackNode = continuationNode.next = continuationNode.previous = continuationNode;
} else {
var nextAfterContinuation = null;
var node = firstCallbackNode;
do {
// 比较过期时间，
if (node.expirationTime >= expirationTime) {
// This callback expires at or after the continuation. We will insert
// the continuation *before* this callback.
nextAfterContinuation = node;
break;
}
node = node.next;
} while (node !== firstCallbackNode);
// 如果没有，它插入到第一个
if (nextAfterContinuation === null) {
// 如果为空，则插入到链表的开头
// No equal or lower priority callback was found, which means the new
// callback is the lowest priority callback in the list.
nextAfterContinuation = firstCallbackNode;
} else if (nextAfterContinuation === firstCallbackNode) {
// The new callback is the highest priority callback in the list.
// 如果有
firstCallbackNode = continuationNode;
ensureHostCallbackIsScheduled();
}
var previous = nextAfterContinuation.previous;
previous.next = nextAfterContinuation.previous = continuationNode;
continuationNode.next = nextAfterContinuation;
continuationNode.previous = previous;
}
}
}
flushImmediateWork
最后更新所有最紧急的任务，
function flushImmediateWork() {
if (
// Confirm we've exited the outer most event handler
currentEventStartTime === -1 &&
firstCallbackNode !== null &&
firstCallbackNode.priorityLevel === ImmediatePriority
) {
isExecutingCallback = true;
try {
do {
flushFirstCallback();
} while (
// Keep flushing until there are no more immediate callbacks
firstCallbackNode !== null &&
firstCallbackNode.priorityLevel === ImmediatePriority
);
} finally {
isExecutingCallback = false;
if (firstCallbackNode !== null) {
// There's still work remaining. Request another callback.
ensureHostCallbackIsScheduled();
} else {
isHostCallbackScheduled = false;
}
}
}
}
总结
这里的代码好像每个react版本的都会变，不过基本的原理基本上都是差不多，变得只不过是些细节。
