当前位置：首页 > news >正文

如何与别的网站做友情链接网络产品运营与推广

news 2025/7/12 21:29:20

如何与别的网站做友情链接,网络产品运营与推广,前端做项目有哪些网站,广告平面设计师的工作内容任务队列管理调度的目的是为了消费任务，接下来就具体分析任务队列是如何管理与实现的在 Scheduler.js 中，维护了一个 taskQueue, 任务队列管理就是围绕这个 taskQueue 展开 // Tasks are stored on a min heap var taskQueue - []; var timerQueue …

任务队列管理

调度的目的是为了消费任务，接下来就具体分析任务队列是如何管理与实现的
在 Scheduler.js 中，维护了一个 taskQueue,

任务队列管理就是围绕这个 taskQueue 展开

// Tasks are stored on a min heap
var taskQueue - [];
var timerQueue = [];

注意
- taskQueue一个堆数
- 源码中除了 taskQueue 队列之外还有一个 timerQueue 队列, 这个队列是预留给延时任务使用的

创建任务

在 unstable_scheduleCallback 函数中

// 省略部分无关代码
function unstable_scheduleCallback(prioritylevel, callback, options) {// 1. 获取当前时间var currentTime = getCurrentTime();var startTime;if (typeof options === 'object' && options !== null) {//从函数调用关系来看，，所有调用 unstable_scheduleCallback 都未传入options// 所以省略延时任务相关的代码} else {startTime = currentTime;}//  2. 根据传入的优先级，设置任务的过期时间 expirationTimevar 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;// 3.创建新任务var newTask = {id: taskIdCounter ++,callback,priorityLevel,startTime,expirationTime,sortIndex: -1,}if (startTime > currentTime) {} else {newTask.sortIndex = expirationTime;// 4. 加入任务队列push(taskQueue, newTask);// 5.请求调度if (!isHostCallbackScheduled && !isPerformingWork) {isHostCallbackScheduled = true;requestHostCallback(flushWork);}}return newTask;
}

消费任务

创建任务之后，最后请求调度 requestHostCallback(flushwork)(创建任务源码中的第5步)
flushWork 函数作为参数被传入调度中心内核等待回调
requestHostCallback 函数是调度内核中的一个

在调度中心中只需下一个事件循环就会执行回调，最终执行 flushwork

// 省略无关代码
function flushWork(hasTimeRemaining, initialTime) {//1.做好全局标记，表示现在已经进入调度阶段isHostCallbackScheduled = false;isPerformingWork - true;const previousPrioritylevel = currentPriorityLevel;try {// 2.循环消费队列return workLoop(hasTimeRemaining, initialTime);} finally {// 3.还原全局标记currentTask = null;currentPriorityLevel = previousPriorityLevel;isPerformingWork = false;}
}

flushwork中调用了 workLoop 队列消费的主要逻辑是在workLoop函数中

这就是前面提到的任务调度循环

//省略部分无关代码
function workLoop(hasTimeRemaining, initialTime) {let currentTime = initialTime; //保存当前时间，用于判断任务是否过期currentTask = peek(taskQueue); //获取队列中的第一个任务while (currentTask !== null) {if(currentTask.expirationTime > currentTime &&(!hasTimeRemaining || shouldYieldToHost())) {// 虽然currentTask没有过期，但是执行时间超过了限制（毕竟只有5ms， shouldYieldToHost()返回true)break;}const callback = currentTask.callback;if (typeof callback === 'function') {currentTask. callback = null;currentPrioritylevel = currentTask.prioritylevel;const didUserCallbackTimeout = currentTask.expirationTime <= currentTime;// 执行回调const continuationCallback = callback(didUserCallbackTimeout);currentTime = getCurrentTime();// 回调完成，判断是否还有连续（派生）回调if (typeof continuationCallback === 'function') {// 产生了连续回调（如fiber树太大，出现了中断渲染），保留currentTaskcurrentTask.callback = continuationCallback;} else {// 把currentTask移出队列if (currentTask === peek(taskQueue)) {pop(taskQueue);}}} else {// 如果任务被取消（这时currentTosk.callback ～ null)，将其移出队列pop(taskQueue);}// 更currentTaskcurrentTask = peek(taskQueue);}if (currentTask !== null) {return true; // 如果 task 队列没有清空，返回 true。寻待调度中心下一次回调} else {return false; // task 队列已经清空，返回false.}
}

workLoop 就是一个大循环，虽然代码也不多，但是非常精髓
在此处实现了时间切片(time slicing)和fiber树的可中断渲染
这2大特性的实现，都集中于这个while循环
每一次while循环的退出就是一个时间切片，深入分析while循环的退出条件：
- 1.队列被完全清空：这种情况就是很正常的情况，一气呵成，没有遇到任何阻碍.
- 2.执行超时：在消费taskQueue时，在执行 task.callback之前，都会检测是否超时，所以超时检测是以task为单位
  - 如果某个 task.callback 执行时间太长（如：fiber树很大，或逻辑很重）也会造成超时
  - 所以在执行task.cal1back过程中，也需要一种机制检测是否超时，如果超时了就立刻暂停task.callback的执行.

时间切片原理

消费任务队列的过程中，可以消费1~n个task,甚至清空整个queue.
但是在每一次具体执行task.callback之前都要进行超时检测，如果超时可以立即退出循环并等待下一次调用.

可中断渲染原理

在时间切片的基础之上，如果单个task.callback执行时间就很长（假设200ms)
就需要task.callback自己能够检测是否超时，所以在fiber树构造过程中
每构造完成一个单元，都会检测一次超时，如遇超时就退出fiber树构造循环，并返回一个新的回调函数
就是 continuationCallback 并等待下一次回调继续未完成的fiber树构造

节流防抖{#throttle-debounce}

通过以上分析，已经覆盖了 scheduler 包中的核心原理
现在再次回到 react-reconciler包中，在调度过程中的关键路径中，还需要理解一些细节
在 Renconciler 运行流程中总结的4个阶段中，注册调度任务属于第2个阶段

核心逻辑位于ensureRootIsScheduled函数中

// 省略部分无关代码
function ensureRootIsscheduled(root: FiberRoot, currentTime: number) {// 前半部分：判断是否需要注册新的调度const existingcallbackNode = root.callbackNode;const nextLanes = getNextLanes(root,root === workInProgressRoot ? workInProgressRootRenderLanes : NoLanes,);const newCallbackPriority = returnNextLanesPriority();if (nextLanes === NoLanes) {return;}// 节流防抖if (existingcallbackNode !== null) {const existingcallbackpriority = root.callbackpriority;if (existingCallbackPriority === newCallbackPriority){return;}cancelCallback(existingcallbackNode);}// 后半部分：注册调度任务省略代码// 更新标记root.callbackPriority = newcallbackPriority;root.callbackNode = newcallbackNode;
}

正常情况下，ensureRootIsScheduled 函数会与scheduler包通信，最后注册一个task并等待回调.
1.在task注册完成之后，会设置fiberRoot对象上的属性，代表现在已经处于调度进行中
2.再次进入ensureRootIsScheduled时
- 比如连续2次 setState,第2次 setState同样会触发
- reconciler运作流程中的调度阶段，如果发现处于调度中
- 则需要一些节流和防抖措施，进而保证调度性能.
- a.节流
  - 判断条件：existingCallbackPriority == newCallbackPriority
  - 新旧更新的优先级相同，如连续多次执行setState
  - 则无需注册新task(继续沿用上一个优先级相同的task),直接退出调用
- b.防抖
  - 判断条件： existingCallbackPriority !== newCallbackPriority
  - 新旧更新的优先级不同，则取消旧task, 重新注册新task
总结
- 主要分析了scheduler包中调度原理
- 也就是React两大工作循环中的任务调度循环
- 时间切片和可中断渲染等特性在任务调度循环中的实现
- scheduler包是React运行时的心脏，为了提升调度性能
- 注册task之前，在react-reconciler包中做了节流和防抖等措施