React18源码: task任务调度和时间分片

任务队列管理

  • 调度的目的是为了消费任务,接下来就具体分析任务队列是如何管理与实现的

  • 在 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包中做了节流和防抖等措施

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/700145.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

yolov9目标检测报错AttributeError: ‘list‘ object has no attribute ‘device‘

最近微智启软件工作室在运行yolov9目标检测的detect.py测试代码时&#xff0c;报错&#xff1a; File “G:\down\yolov9-main\yolov9-main\detect.py”, line 102, in run pred non_max_suppression(pred, conf_thres, iou_thres, classes, agnostic_nms, max_detmax_det) Fil…

Linux奇技淫巧之-使用setarch 禁止地址空间随机化

先来看这样一个代码&#xff1a; #include <stdio.h> #include <stdlib.h> #include <unistd.h>int main() {int *p (int*)malloc(sizeof(int));*p 0;while(1){printf("[%d]addr: %p, value: %d\n", getpid(), p, *p);*p *p 1;sleep(1);}retu…

猫头虎分享已解决Bug || ValueError: Data cardinality is ambiguous ‍

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

gem5学习(25):用于异构SoC的片上网络模型——Garnet2.0

目录 一、Invocation 二、Configuration 三、Topology 四、Routing 五、Flow Control 六、Router Microarchitecture 七、Buffer Management 八、Lifecycle of a Network Traversal 九、Running Garnet2.0 with Synthetic Traffic 官网教程&#xff1a;gem5: Garnet 2…

使用Python制作进度条有多少种方法?看这一篇文章就够了!

前言 偶然间刷到一个视频&#xff0c;说到&#xff1a;当程序正在运算时&#xff0c;会有一个较长时间的空白期&#xff0c;谁也不知道程序运行的进度如何&#xff0c;不如给他加个进度条。 于是我今个就搜寻一下&#xff0c;Python版的进度条都可以怎么写&#xff01; 送书…

多线程和并发

线程 进程&#xff1a;在操作系统中运行的程序&#xff0c;一个进程可以包含多个线程 程序就是指令和数据的有序集合&#xff0c;静态概念 进程就是执行程序的一次执行过程&#xff0c;动态概念系统资源分配的单元 一个进程中包含多个线程&#xff0c;一个进程至少包含一个线…

大蟒蛇(Python)笔记(总结,摘要,概括)——第9章 类

目录 9.1 创建和使用类 9.1.1 创建Dog类 9.1.2 根据类创建实例 9.2 使用类和实例 9.2.1 Car类 9.2.2 给属性指定默认值 9.2.3 修改属性的值 9.3 继承 9.3.1 子类的_init_()方法 9.3.2 给子类定义属性和方法 9.3.3 重写父类中的方法 9.3.4 将实例用作属性 9.3.5 模拟实物 9.…

现货黄金中短线投资该怎么做?

要明确什么是现货黄金的中短线投资&#xff0c;中短线投资是指在短期内&#xff08;一般为几天至几周&#xff09;对现货黄金进行买卖操作&#xff0c;以期获得收益的投资方式。相较于长线投资&#xff0c;中短线投资的风险相对较大&#xff0c;但同时收益也更为可观。那么&…

深入探究 JVM 频繁 Full GC 的排查过程

1. 引言 在当今软件开发领域&#xff0c;Java语言以其跨平台性、面向对象、高性能等特点成为了广泛应用的首选之一。而Java应用程序的核心执行环境就是Java虚拟机&#xff08;JVM&#xff09;&#xff0c;它负责将Java字节码翻译成机器码并执行&#xff0c;是Java程序运行的基…

二手货wordpress企业网站主题模板

二手车wordpress主题模板 简洁的二手车wordpress主题模板&#xff0c;适合做二手车业务的公司官方网站使用。 https://www.jianzhanpress.com/?p3473 wordpress二手物资回收主题 绿色wordpress二手物资回收主题&#xff0c;用于二手物资回收公司WP建站使用。 https://www.…

自动化行业文件数据\资料防泄密软件——天锐绿盾|@德人合科技

天锐绿盾是一款自动化行业文件数据防泄密软件&#xff0c;由德人合科技提供。该软件采用动态加解密技术&#xff0c;能够有效防止公司内部数据泄密&#xff0c;同时支持各种文件格式加密&#xff0c;如CAD、OFFICE、PDF、图纸等。 PC端&#xff1a;https://isite.baidu.com/sit…

git如何保留提交记录的情况下迁移

Git仓库迁移方案 在日常的工作场景中&#xff0c;我们有时候会遇到需要更换Git仓库地址的需求。或者是从一个git仓库托管工具换到另一个git仓库托管工具。这个时候有两种方案&#xff1a; 方案一&#xff1a;不保留历史提交记录 如果你不需要保留原有的历史提交记录&#xf…

Linux RocketMQ 安装及卸载(附控制台搭建)

一、前言 在安装 RocketMQ 前需要确保 JDK 已安装并正确配置环境变量 二、下载安装 1.下载 下载 | RocketMQ 2.安装 # 打开存放目录 cd /usr/local # 创建目录 mkdir rocketMQ # 进入目录 cd rocketMQ # 把下载的压缩包上传到 rocketMQ 目录中 # 解压 $ unzip rocketmq-all-…

备战蓝桥杯 Day12(二维费用背包+分组背包)

二进制分解多重背包 269&#xff1a;【例9.13】庆功会 【题目描述】 为了庆贺班级在校运动会上取得全校第一名成绩&#xff0c;班主任决定开一场庆功会&#xff0c;为此拨款购买奖品犒劳运动员。期望拨款金额能购买最大价值的奖品&#xff0c;可以补充他们的精力和体力。 #inc…

高级RAG:揭秘PDF解析

原文地址&#xff1a;https://pub.towardsai.net/advanced-rag-02-unveiling-pdf-parsing-b84ae866344e 2024 年 2 月 3 日 附加内容&#xff1a;揭秘PDF解析&#xff1a;如何从科学pdf论文中提取公式 对于RAG&#xff0c;从文档中提取信息是一个不可避免的场景。确保从源头…

Flutter学习6 - Dart 类与对象

1、面向对象编程&#xff08;Object-Oriented Programming, OOP&#xff09;三大特征 &#xff08;1&#xff09;封装 封装是指将对象的状态&#xff08;属性&#xff09;和行为&#xff08;方法&#xff09;封装在一起&#xff0c;对外部隐藏对象的内部细节&#xff0c;只提…

#LLM入门|Prompt#1.1 第一部分_面向开发者的LLM入门教程_简介

Prompt工程&#xff1a;解锁大语言模型潜能的关键技巧 随着大语言模型&#xff08;LLM&#xff09;的兴起&#xff0c;Prompt工程已成为开发者利用LLM构建功能强大应用的关键技能。在这个新时代&#xff0c;Prompt不仅是指导LLM的输入形式&#xff0c;更是塑造其能力上限与下限…

Python 在Word中创建表格并填入数据、图片

在Word中&#xff0c;表格是一个强大的工具&#xff0c;它可以帮助你更好地组织、呈现和分析信息。本文将介绍如何使用Python在Word中创建表格并填入数据、图片&#xff0c;以及设置表格样式等。 Python Word库&#xff1a; 要使用Python在Word中创建或操作表格&#xff0c;需…

OpenCV 4基础篇| OpenCV图像基本操作

目录 1. 图像读取1.1 cv2.imread() 不能读取中文路径和中文名称1.2 cv2.imdecode() 可以读取中文路径和中文名称 2. 图像的显示2.1 openCV显示图像 cv2.imshow()2.2 matplotlib显示图像 plt.imshow() 3. 图像的保存 cv2.imwrite()4. 图像的复制4.1 img.copy()4.2 np.copy()4.3 …

【C++STL】STL容器详解

创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞 关注支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; &#x1f525;c系列专栏&#xff1a;C/C零基础到精通 &#x1f525; 给大…