react中如何做到中断diff过程和恢复

workLoop是 实现时间切片 和 可中断渲染的核心,简要说明如下:

// 并发任务的入口function workLoopConcurrent() {// Perform work until Scheduler asks us to yield// 有任务 & 是否需要中断while (workInProgress !== null && !shouldYield()) {performUnitOfWork(workInProgress);}}const scheduler = {// 任务放到队列里,等待空闲执行taskQueue: [{// 每个任务是个回调的概念, 且回调任务是可中断的callback: workLoopConcurrent}],// 判断: 是否需要中断, 将控制权交给主进程shouldYieldToHost() {// 没有剩余时间if (currentTime >= deadline) {// 但需要渲染 和 有更高优任务if (needsPaint || scheduling.isInputPending()) {return true; // 中断}// 是否超过 300msreturn currentTime >= maxYieldInterval;}// 还有剩余时间return false;},// 执行入口可见workLoop() {// 当前第一个任务currentTask = taskQueue[0];// 每次 currentTask 退出 就是一个时间切切片while (currentTask !== null) {// 任务没有过期, 但一帧已经无可用时间 或 需要被中断, 则让出主线程// 每一次执行均进行超时检测,做到让出主线程。// expirationTime >currentTime: 任务已过期// hasTimeRemaining :有剩余时间// shouldYieldToHost:是否暂停任务,让出主线程if (currentTask.expirationTime > currentTime&& (!hasTimeRemaining || shouldYieldToHost())) {break;}// 表示任务到了过期时间,并且有剩余时间来执行,没有到达需要浏览器渲染的时候// 那么我们执行任务const callback = currentTask.callback;// 拿到任务const continuationCallback = callback(didUserCallbackTimeout);// 执行任务// 如果该任务后, 还有连续回调if (typeof continuationCallback === 'function') {// 则保留当前currentTask.callback = continuationCallback;} else {// 将currentTask移除该队列pop(taskQueue);}// 更新currentTask,取出任务优先级最高的那个任务currentTask = peek(taskQueue);}},}

简而言之:

有个任务队列 queue,该队列存放可中断的任务。

workLoop对队列里取第一个任务currentTask,进入循环开始执行。

如果任务执行完后,还有连续的回调,则 currentTask.callback = continuationCallback

否则移除已完成的任务

当该任务没有时间 或 需要中断 (渲染任务 或 其他高优任务插入等),则让出主线程。

否则执行任务 currentTask.callback()

更新任务currentTask,继续循环走起。

这里还涉及更多细节,例如:

requestAnimationFrame 计算一帧的空余时间;

使用new MessageChannel () 执行宏任务;

优先级;

这里不做详细说明。

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

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

相关文章

linux系统zabbix工具监控web页面

web页面监控 内建key介绍浏览器配置浏览器页面查看方式 监控指定的站点的资源下载速度,及页面响应时间,还有响应代码; web Scenario: web场景(站点)web page :web页面,一个场景有多…

二分算法01

二分算法01 1. H指数II2. 使结果不超过阈值的最小除数3. 完成旅途的最少时间 1. H指数II 给你一个整数数组 citations ,其中 citations[i] 表示研究者的第 i 篇论文被引用的次数,citations 已经按照 升序排列 。计算并返回该研究者的 h 指数。 h 指数的…

目标服务器存在CDN

CDN 即内容分发网络,主要解决因传输距离和不同运营商节点造成的网络速 度性能低下的问题。说得简单点,就是一组在不同运营商之间的对接节点上的高速缓存 服务器,把用户经常访问的静态数据资源(例如静态的html、css、js图片等文件)直 接缓存到…

10-通用类型、特质和生命周期

上一篇: 09-错误处理 每种编程语言都有有效处理概念重复的工具。在 Rust 中,泛型就是这样一种工具:具体类型或其他属性的抽象替身。我们可以表达泛型的行为或它们与其他泛型的关系,而不需要知道在编译和运行代码时它们的位置。 函…

WordPress站点如何实现发布文章即主动推送到百度快速收录和普通收录?

我们在WordPress后台成功发布文章之后,如果靠搜索引擎来抓取的话,可能会比较慢,所以十分有必要将我们成功发布的文章马上提交到百度、必应等搜索引擎中。下面boke112百科就跟大家说一说WordPress站点如何实现发布文章即主动推送到百度快速收录…

前端开发:Vue框架与前端部署

Vue Vue是一套前端框架,免除原生)avaScript中的DOM操作,简化书写。是基于MVVM(Model–View-ViewModel)思想,实现数据的双向绑定,将编程的关注点放在数据上。简单来说,就是数据变化的时候, 页面会自动刷新, 页面变化的时…

人工智能学习与实训笔记(七):神经网络之推荐系统处理

九、模型压缩与知识蒸馏 出于对响应速度,存储大小和能耗的考虑,往往需要对大模型进行压缩。 模型压缩方法主要可以分为以下四类: 参数修剪和量化(Parameter pruning and quantization):用于消除对模型表…

Leetcode 72 编辑距离

题意理解: 给你两个单词 word1 和 word2, 请返回将 word1 转换成 word2 所使用的最少操作数 。 你可以对一个单词进行如下三种操作: 插入一个字符 删除一个字符 替换一个字符 将word1转换为word2,可以进行三种操作:增、删、改&am…

c语言之do-while循环

do while循环的语法是 do 语句 while 表达式 这里的语句是循环执行的语句 它是先无条件执行循环语句&#xff0c;再判断是否符合条件&#xff0c;符合条件继续执行。 比如要设计一个123n的程序&#xff0c;n要求用户手工输入。 代码如下 #include<stdio.h> int …

【PTA|函数题|期末复习|PART 1】数据类型(二)函数(一)

6-1 求m到n之和 本题要求实现一个计算m~n&#xff08;m<n&#xff09;之间所有整数的和的简单函数。 函数接口定义&#xff1a; int sum( int m, int n );其中m和n是用户传入的参数&#xff0c;保证有m<n。函数返回的是m~n之间所有整数的和。 裁判测试程序样例&#…

云计算基础-存储基础

存储概念 什么是存储&#xff1a; 存储就是根据不同的应用程序环境&#xff0c;通过采取合理、安全、有效的方式将数据保存到某些介质上&#xff0c;并能保证有效的访问&#xff0c;存储的本质是记录信息的载体。 存储的特性&#xff1a; 数据临时或长期驻留的物理介质需要保…

a 乘 b 模 p_题解

【题解提供者】吴立强 解法一 思路 【快速幂】算法改版题。 面对 a b m o d p a\times b\mod p abmodp 这个结构&#xff0c;直接求必然溢出 long long&#xff0c;任何基本结构都不好使。 模仿快速幂算法是先将 b b b 二进制分解&#xff08;假设 b b b 的二进制表示…

SparkUI任务启动参数介绍(148个参数)

SparkUI任务启动参数介绍&#xff08;148个参数&#xff09; 1 spark.app.id: Spark 应用程序的唯一标识符。 2 spark.app.initial.jar.urls: Spark 应用程序的初始 Jar 包的 URL。 3 spark.app.name: Spark 应用程序的名称。 4 spark.app.startTime: Spark 应用程序的启动时间…

在Angular中创建自定义管道

Angular 2 中的管道 在 Angular 2 中&#xff0c;管道是一种很好的方式&#xff0c;可以在模板中直接对数据进行转换和格式化。Angular 默认提供了一些管道&#xff0c;用于处理日期、货币、百分比和字符大小写&#xff0c;但你也可以很容易地定义自己的自定义管道。以下是一个…

【深度学习每日小知识】全景分割

全景分割 全景分割是一项计算机视觉任务&#xff0c;涉及将图像或视频分割成不同的对象及其各自的部分&#xff0c;并用相应的类别标记每个像素。与传统的语义分割相比&#xff0c;它是一种更全面的图像分割方法&#xff0c;传统的语义分割仅将图像划分为类别&#xff0c;而不…

【旧文更新】【优秀毕设】人脸识别打卡/签到/考勤管理系统(OpenCV+最简基本库开发、可移植树莓派 扩展网络图像推流控制 验证码及Excel邮件发送等功能)

【旧文更新】【优秀毕设】人脸识别打卡/签到/考勤管理系统&#xff08;OpenCV最简基本库开发、可移植树莓派 扩展网络图像推流控制 验证码及Excel邮件发送等功能&#xff09; 文章目录 关于旧文新发毕设结构主页面验证码识别效果管理页面人脸信息采集管理实时数据更新签到结果…

IIC--集成电路总线

目录 一、IIC基础知识 1、设计IIC电路的原因&#xff1a; 2、上拉电阻阻值怎么确定 3、IIC分类 4、IIC协议 二、单片机使用IIC读写数据 1、 IIC发送一个字节数据&#xff1a; 2、IIC读取一个字节数据&#xff1a; 一、IIC基础知识 1、设计IIC电路的原因&#xff1a; (…

Windows 环境下 Redis 的安装和基本使用

Windows 环境下 Redis 的安装和基本使用 Windows 环境下 Redis 的安装和基本使用Redis 简介基本数据结构Redis 的下载、解压、添加环境变量运行GUI&#xff1a;RedisInsight参考链接 Windows 环境下 Redis 的安装和基本使用 Redis 简介 Redis 是完全开源的&#xff0c;遵守 B…

OpenCV-41 使用掩膜的直方图

一、掩膜 掩膜即为与原图大小一致的黑底白框图。 如何生成掩膜&#xff1f; 先生成一个全黑的和原始图片大小一样大的图片。mask np.zeros(img.shape, np.uint8)将想要的区域通过索引方式设置为255.mask[100:200, 200:300] 示例代码如下&#xff1a; import cv2 import ma…

11-编写自动化测试

上一篇&#xff1a; 10-通用类型、特质和生命周期 Edsger W. Dijkstra 在 1972 年发表的文章《The Humble Programmer》中说&#xff1a;"程序测试可以非常有效地显示错误的存在&#xff0c;但对于显示错误的不存在却无能为力。这并不意味着我们不应该尽可能多地进行测试&…