掌握商务网站建设策略小程序商城首页设计

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

掌握商务网站建设策略,小程序商城首页设计,企业网络安全管理制度和应急预案,wordpress不能添加用户任务队列管理 调度的目的是为了消费任务#xff0c;接下来就具体分析任务队列是如何管理与实现的 在 Scheduler.js 中#xff0c;维护了一个 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包中做了节流和防抖等措施