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

React 任务调度

React 任务池

不同的fiber任务有不同的优先级,为了用户体验,React需要先处理优先级高的任务。
为了存储这些任务,React中有两个任务池:

// Tasks are stored on a min heap
var taskQueue = []; // 存储立即要执行的任务
var timerQueue = [];  // 存储可以延迟执行的任务

源码中任务的初始结构:

var newTask = {id: taskIdCounter++, // 标记任务idcallback, // 回调函数priorityLevel,startTime,   // 任务开始时间,时间点expirationTime, // 过期时间,时间点sortIndex: -1, // 排序(取值来自过期时间,因此值越小,优先级越高)
};

React 中一旦来了新任务,就会先用currentTime记录当前时间(performance.now())或Date.now(),如果任务中有delay参数,那么任务开始执行时间startTime = currentTime + delay。接下来通过startTime > currentTime 如果成立,证明任务是可以延期的,那么任务进入timerQueue,否则进入taskQueue。

React中任务调度

如果找到优先级最高的任务?
以taskQueue为例, 它是动态的任务池。Array.sort对它排序可行,但不是最优方案,每次sort,平均时间复杂度是nlog(n)。可以考虑小顶堆。
为什么不是大顶堆呢?因为taskQueue的newTask中的排序用的是sortIndex,这个值取自过期时间expirationTime,意味着优先级越高的任务越需要立马执行,那么过期时间自然就越小了(优先级越高,过期时间越小。) 当然也有可能两个任务的过期时间一样,那这时就要看谁先进的任务池了,也就是newTask中的id,每次来了新任务,id都会加1。
所以React源码中任务比价优先级的函数如下:

function compare(a,b){const diff = a.sortIndex - b.sortIndex;return diff !== 0 ? diff : a.id - b.id;
}

用到最小堆,就是把taskQueue做成最小堆的数据结构,然后在执行任务的时候,取最小堆的最小任务,如果任务处理完毕,那么需要把这个任务从taskQueue中删除,并重新调整剩下的任务池,依然保证它是最小堆的数据结构。当然,往taskQueue中插入新任务的时候,也要调整taskQueue,保证新的任务池仍是最小堆。

最小堆

相关文章:

React 任务调度

React 任务池 不同的fiber任务有不同的优先级,为了用户体验,React需要先处理优先级高的任务。 为了存储这些任务,React中有两个任务池: // Tasks are stored on a min heap var taskQueue []; // 存储立即要执行的任务 var tim…...

小白开始学习C++

​​​​第一节&#xff1a;控制台输出hello word&#xff01; #include<iostream> //引入库文件 int main() { //控制台输出 hello word! 之后回车 std::cout << "hello word!\n"; #include<iostream> //引入库文件int main() {//控制…...

SpringMVC入门的注解、参数传递、返回值和页面跳转---超详细教学

前言&#xff1a; 欢迎阅读Spring MVC入门必读&#xff01;在这篇文章中&#xff0c;我们将探索这个令人兴奋的框架&#xff0c;它为您提供了一种高效、灵活且易于维护的方式来构建Web应用程序。通过使用Spring MVC&#xff0c;您将享受到以下好处&#xff1a;简洁的代码、强大…...

【复习socket】每天40min,我们一起用70天稳扎稳打学完《JavaEE初阶》——28/70 第二十八天

专注 效率 记忆 预习 笔记 复习 做题 欢迎观看我的博客,如有问题交流,欢迎评论区留言,一定尽快回复!(大家可以去看我的专栏,是所有文章的目录)   文章字体风格: 红色文字表示:重难点★✔ 蓝色文字表示:思路以及想法★✔   如果大家觉得有帮助的话,感谢大家帮忙 点…...

vue2踩坑之项目:生成二维码使用vue-print-nb打印二维码

1. vue2安装 npm install vue-print-nb --save vue3安装 npm install vue3-print-nb --save 2. //vue2 引入方式 全局 main.js import Print from vue-print-nb Vue.use(Print) ------------------------------------------------------------------------------------ //vue2 …...

【iVX】十五分钟制作一款小游戏,iVX真有怎么神?

个人主页&#xff1a;【&#x1f60a;个人主页】 新人博主&#xff0c;喜欢就关注一下呗~ 文章目录 前言iVX介绍初上手布置背景制作可移动物体总结&#xff08;完善步骤&#xff09; 前言 在上篇文章中&#xff0c;我向大家介绍了一种打破常规的编程方式——iVX&#xff0c;可…...

SpringMVC常用注解、参数传递、返回值

目录 前言 一、常用注解 二、参数传递 ​编辑 1. 基础类型String类型 2. 复杂类型 3. RequestParam 4. PathVariable 5.RequestBody 6. RequestHeader 三、方法返回值 一&#xff1a;void 二&#xff1a;String 三&#xff1a;Stringmodel 四&#xff1a;ModelAndVi…...

新公司第一次上架新APP需要提前准备哪些材料?

目录 前言一、需要上架的应用市场二、需要准备的资料总结 前言 前不久&#xff0c;使用一家新公司刚刚上架了一款新的APP项目。特此记录一下&#xff0c;现在第一次上架一款APP需要提前准备的各项材料。 一、需要上架的应用市场 现在&#xff0c;上架一款新的APP主流的应用市…...

『C语言进阶』指针进阶(一)

&#x1f525;博客主页&#xff1a; 小羊失眠啦 &#x1f516;系列专栏&#xff1a; C语言 &#x1f325;️每日语录&#xff1a;无论你怎么选&#xff0c;都难免会有遗憾。 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 前言 在C语言初阶中&#xff0c;我们对指针有了一定的…...

2605. 从两个数字数组里生成最小数字(Java)

给你两个只包含 1 到 9 之间数字的数组 nums1 和 nums2 &#xff0c;每个数组中的元素 互不相同 &#xff0c;请你返回 最小 的数字&#xff0c;两个数组都 至少 包含这个数字的某个数位。 示例 1&#xff1a; 输入&#xff1a;nums1 [4,1,3], nums2 [5,7] 输出&#xff1a;1…...

深度解析 PostgreSQL Protocol v3.0(一)

引言 PostgreSQL 使用基于消息的协议在前端&#xff08;也可以称为客户端&#xff09;和后端&#xff08;也可以称为服务器&#xff09;之间进行通信。该协议通过 TCP/IP 和 Unix 域套接字支持。 《深度解析 PostgreSQL Protocol v3.0》系列技术贴&#xff0c;将带大家深度了…...

Mysql中having语句与where语句的用法与区别

分析&回答 我们在写sql语句的时候,经常会使用where语句,很少会用到having,其实在mysql中having子句也是设定条件的语句与where有相似之处但也有区别。having子句在查询过程中慢于聚合语句(sum,min,max,avg,count)。而where子句在查询过程中则快于聚合语句(sum,min,max,avg…...

基于qt软件的网上聊天室软件

1.服务器: 1).功能: 用于创建一个客户端&#xff0c;通过文本编辑器来获得端口号&#xff0c;根据获得的端口号创建服务器&#xff0c;等待客户端连接 创建成功会提示服务器创建成功 在收到客户端发送的信息时&#xff0c;把这条信息发送给其他所有客户端&#xff0c;实现群…...

本是同根生-双数据库集群keepalived virtual_route_id冲突导致连接故障

项目场景&#xff1a; 一企业近期陆续开始升级办公与大数据系统&#xff0c;新的承包商。原有的数据库是某国内大品牌A&#xff0c;现在新的功能准备陆续迁移到大品牌B上。系统部署后&#xff0c;A依旧承担比较轻松的财务、仓库管理&#xff0c;B承担实时的线上业务。项目验收…...

『力扣每日一题06』字符串中的第一个唯一字符

今天是学习新知识的一天&#xff0c;String 类中有太多细枝末节&#xff0c;需要我去学习跟掌握了。 话不多说&#xff0c;今天给大家带来一道字符串的题目~ 一、题目 给定一个字符串 s &#xff0c;找到 它的第一个不重复的字符&#xff0c;并返回它的索引 。如果不存在&…...

selenium鼠标操作方法

1.0 selenium新版本封装驱动 from selenium.webdriver import Chrome from selenium.webdriver.chrome.options import ChromiumOptions from selenium.webdriver.chrome.service import Servicedef get_chrome_driver(driver_path):chrome_options ChromiumOptions()chrome_…...

医者无疆 | AI赋能大医精诚,医疗制药的进阶与突破

在历史的长河中&#xff0c;医学一直是人类文明的重要组成部分。从古希腊的希波克拉底到现代医学研究&#xff0c;医学始终与时俱进&#xff0c;为人类的健康和福祉做出了巨大的贡献。在互联网、大数据、5G等信息技术的迭代下&#xff0c;人工智能&#xff08;AI&#xff09;的…...

使用 Hue 玩转 Amazon EMR(SparkSQL, Phoenix) 和 Amazon Redshift

现状 Apache Hue 是一个基于 Web 的交互式 SQL 助手&#xff0c;通过它可以帮助大数据从业人员&#xff08;数仓工程师&#xff0c;数据分析师等&#xff09;与数据仓库进行 SQL 交互。在 Amazon EMR 集群启动时&#xff0c;通过勾选 Hue 进行安装。在 Hue 启用以后&#xff0…...

Unity中神秘的Transform和transform(小写)的关系

1.为什么Transform类是保护的不能通过new 来实例化对象,也没有静态函数,而Rotate()这种方法却属于它,该如何访问? Transform 类还是被保护的不允许用户修改! protected Transform(); 是一个受保护的构造函数,不能直接实例化 Transform 类。 2.为甚么transform可以访问Tr…...

【LeetCode-中等题】78. 子集

文章目录 题目方法一&#xff1a;动态规划方法二&#xff1a;递归加回溯(关键----startIndex) 题目 注意&#xff1a;这里的nums数组里面的元素是各不相同的&#xff0c;所以不存在去重操作 方法一&#xff1a;动态规划 public List<List<Integer>> subsets(int[]…...

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

Matlab | matlab常用命令总结

常用命令 一、 基础操作与环境二、 矩阵与数组操作(核心)三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结,涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

高防服务器能够抵御哪些网络攻击呢?

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...

微服务通信安全:深入解析mTLS的原理与实践

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、引言&#xff1a;微服务时代的通信安全挑战 随着云原生和微服务架构的普及&#xff0c;服务间的通信安全成为系统设计的核心议题。传统的单体架构中&…...

Linux安全加固:从攻防视角构建系统免疫

Linux安全加固:从攻防视角构建系统免疫 构建坚不可摧的数字堡垒 引言:攻防对抗的新纪元 在日益复杂的网络威胁环境中,Linux系统安全已从被动防御转向主动免疫。2023年全球网络安全报告显示,高级持续性威胁(APT)攻击同比增长65%,平均入侵停留时间缩短至48小时。本章将从…...

C# winform教程(二)----checkbox

一、作用 提供一个用户选择或者不选的状态&#xff0c;这是一个可以多选的控件。 二、属性 其实功能大差不差&#xff0c;除了特殊的几个外&#xff0c;与button基本相同&#xff0c;所有说几个独有的 checkbox属性 名称内容含义appearance控件外观可以变成按钮形状checkali…...

解析“道作为序位生成器”的核心原理

解析“道作为序位生成器”的核心原理 以下完整展开道函数的零点调控机制&#xff0c;重点解析"道作为序位生成器"的核心原理与实现框架&#xff1a; 一、道函数的零点调控机制 1. 道作为序位生成器 道在认知坐标系$(x_{\text{物}}, y_{\text{意}}, z_{\text{文}}…...

算法—栈系列

一&#xff1a;删除字符串中的所有相邻重复项 class Solution { public:string removeDuplicates(string s) {stack<char> st;for(int i 0; i < s.size(); i){char target s[i];if(!st.empty() && target st.top())st.pop();elsest.push(s[i]);}string ret…...