React18原理: Fiber架构下的单线程CPU调度策略

【信息科学与工程学】计算机科学与自动化 第二百三十三篇 凤凰架构01 编号类型领域系统软件/硬件或系统集成方案及系统架构模块子模块函数名称/算法名称算法的数学分析及计算机体系架构及数据结构与算法详细设计及参数列表及数值范围设计关联知识1共识算法分布式基石状态机复制架构:Proposer/Acceptor/Learner 多节点角色模型,基于操作转移(Operation Transfer)分布式共识PaxosPaxos 协议(Prepare/Promise/Accept/Accepted 两阶段)数学基础:多数派(Quorum)投票,基于鸽巢原理保证 W+R>N 时读写集合必有 阅读详情

概述

  • React 的 Fiber 架构, 它的整个设计思想就是去参考CPU的调度策略
  • CPU现在都是多核多进程的,重点研究的是
    • CPU是单核单线程,它是如何调度的?
    • 为什么要去研究单线程的CPU?
  • 浏览器中的JS它是单线程的
  • JS 的执行线程和浏览器的渲染GUI 是互斥的
  • 渲染和JS的执行都用同一个线程,因为一次只能做一件事情,所以互斥
  • 所以,React整个架构的整个调度都是去参考 CPU 的

单线程CPU调度策略


单处理器进程调度策略

  • 1 ) 先到先得(First-Come-First-Served,FCFS)

    • 可以把 CPU 理解为一个办事窗口, 比如说排队,有的人办的慢,有的人办的快
    • 比如,有人办事只需要一分钟,有的人却很墨迹,办事要半个小时
    • 办事墨迹的人,后面的人都一直在等着,所以这个先到先得的策略
    • 对于CPU来讲,其实就是不合理的,不能谁先来就先执行
    • 因为有的人比较着急(优先级高),放在后面不适合
    • 这是最简单的调度策略,简单说就是没有调度,谁先来谁就先执行
    • 执行完毕后就执行下一个,不过如果中间某些进程因为I/O阻塞了
    • 这些进程可能会重新排队了,需要留意的事:
    • FCFS对短进程不利
      • 短进程即执行时间非常短的进程
      • 可以用饭堂排队来比喻:
        • 在饭堂排队打饭的时候,一个人打包好几份
        • 这些人就像长进程一样,霸占着CPU资源
        • 后面排队只打一份的人会觉得很吃亏
        • 打一份的人会觉得它们优先级应该更高,毕竟它们花的时间很短
        • 反正你打包那么多份再等一会也是可以的,何必让后面那么多人等这么久…
    • FCFS对I/0密集不利
      • I/O密集型进程(这里特指同步I/O)在进行I/O操作时
      • 会阻塞休眠,这会导致进程重新被放入就绪队列,等待下一次
      • 可以类比银行部门办业务:假设CPU一个窗口、I/O一个窗口
      • 在CPU窗口好不容易排到你了,这时候发现一个不符合条件或者漏办了
      • 需要去 I/O 搞一下,要去I/O窗口排队,I/O执行完了
      • 到CPU窗口又得重新排队,这样,似乎也是不合理的
    • 所以FCFS这种原始的策略在单处理器进程调度中并不受欢迎

  • 2 )轮转调度

    • 轮转调度它是基于时钟的一种抢占策略
    • CPU的时钟其实就是根据它的这个帧幅周期
    • 这个就跟吃大锅饭一样,也没有体现一种权重
    • 最后, 比如说有人有急事,那这个时候搞轮转,也是不合适的
    • 它属于抢占策略中最简单的一种:
      • 公平地给每一个进程一定的执行时间,当时间消耗完毕或阻塞
      • 操作系统就会调度其他进程,将执行权抢占过来
    • 决策模式:
      • 抢占策略相对应的有非抢占策略
      • 非抢占策略指的是让进程运行直到结束、阻塞(如I/O或睡眠)
      • 或者主动让出控制权,抢占策略支持中断正在运行的进程
      • 将主动权掌握在操作系统这里,不过通常开销会比较大
    • 这种调度策略的要点是
      • 确定合适的时间片长度:太长了,长进程霸占太久资源
      • 其他进程会得不到响应(等待执行时间过长)
      • 这时候就跟上述的FCFS没什么区别了
      • 太短了也不好,因为进程抢占和切换都是需要成本的
      • 而且成本不低,时间片太短,时间可能都浪费在上下文切换上了
      • 导致进程干不了什么实事
    • 因此时间片的长度最好符合大部分进程完成一次典型交互所需的时间
    • 轮转策略非常容易理解,只不过确定时间片长度需要伤点脑筋
    • 另外和FCFS一样,轮转策略对I/O进程还是不公平

  • 3 )最短进程优先(Shortest Process Next,SPN)

    • 什么是短进程呢?
    • 短进程就跟排队一样,比如,我办事一分钟,我就是短进程
    • 你墨迹半个小时,你就是长进程
    • 所以,可以设计一种调度策略叫短进程优先
    • 如果说,我办的快,我就优先,那慢的一直在后面等着
    • 这样好像也有点不对劲,所以这个也有缺陷
    • 长进程就会饥饿,可能永远得不到响应,没法去执行, 所以,这个也不行
    • 上面说了先到先得策略对短进程不公平
    • 最短进程优先索性就让最短的进程优先执行
    • 也就是说:按照进程的预估执行时间对进程进行优先级排序
    • 先执行完短进程,后执行长进程,这是一种非抢占策略
    • 这样可以让短进程能得到较快的响应
    • 但怎么获取或者评估进程执行时间呢?
      • 一是让程序的提供者提供,这不太靠谱
      • 二是由操作系统来收集进程运行数据,并对它们进程统计分析
    • 例如最简单的是计算它们的平均运行时间
    • 不管怎么说都比上面两种策略要复杂一点
    • SPN的缺陷是:
      • 如果系统有大量的短进程,那么长进程可能会饥饿得不到响应
      • 另外因为它不是抢占性策略,尽管现在短进程可以得到更多的执行机会
      • 但是还是没有解决FCFS的问题:一旦长进程得到CPU资源
      • 得等它执行完,导致后面的进程得不到响应
  • 其他策略

    • 最短余(Shortest Remaining Time,SRT)
    • 最高响应比优先(HRRN)
    • 反馈法
    • 这里不再举例

前端框架解决上述问题的方向

  • 对于前端框架来说,解决这种问题有三个方向:
    • 1 )优化每个任务,让它有多快就多快。挤压CPU运算量
      • Vue 选择的是这一种,对于Vue来说,使用模板让它有了很多优化的空间
      • Vue使用依赖收集,基于Proxy来监听数据的变化,在get时收集依赖,在set时
      • 触发依赖渲染页面,配合响应式机制可以让Vue精确地进行节点更新
    • 2 )快速响应用户,让用户觉得够快,不能阻塞用户的交互(React分片)
      • React选择了这一种,一个任务,假如说要运行1秒钟
      • 那React通过分片之后,可能用了1.2秒,但是它却让你感觉很快
      • 实际上它的执行时间是没有降低的,但是它会让你感觉快
      • React 的 Reconcilatin 是 CPU 密集型的操作,它就相当于我们上面讲的
      • 长进程,所以初衷和进程调度一样,要让高优先级的进程或短进程优先运行
      • 不能让长进程长期霸占资源
    • 3 )尝试Worker多线程
      • 要保证状态和视图的一致性相当麻烦,这里不再赘述

React 不同模式的效果对比

1 )同步模式下的 React, 可以看到,阻塞比较严重

2 ) 异步 Concurrent 模式下的 React, 可以看到,非常流畅

React是怎么优化的

  • 为了给用户制造一种应用很快的假象,不能让一个程序长期霸占着资源
  • 可以将浏览器的渲染、布局、绘制、资源加载(例如HTML解析)、事件响应、脚本执行视作操作系统的进程
  • 需要通过某些调度策略合理地分配CPU资源,从而提高浏览器的用户响应速率,同时兼顾任务执行效率
  • 所以React通过Fiber架构,让 Reconcilation 过程变成可被中断
  • 适时地让出CPU执行权,让浏览器及时地响应用户的交互
导数与微分在 FPS 射击游戏中的实际应用:把“手感”算出来 摘要:射击游戏开发中,单线程适用于简单小游戏(如单机打靶),所有任务由主线程顺序处理,代码简单但效率较低;多线程则适合复杂场景(如多人在线3D大作),通过渲染、逻辑、网络、音效等线程分工协作,确保画面流畅、响应迅速和实时同步。选择依据取决于游戏复杂度、联网需求和性能要求,小型游戏用单线程,大型高要求项目必须采用多线程架构。(149字) 阅读详情

相关推荐

PhoenixSuit全志刷机实战:从驱动安装到固件烧录的完整避坑指南

本文提供全志芯片设备使用PhoenixSuit进行线刷的完整实战指南。详细介绍了从驱动安装、双公头USB线连接、强制刷机模式进入,到固件烧录全过程的核心步骤与常见错误排查。重点解析了如何避免驱动安装失败、正确触发刷机模式以及应对烧录卡顿等关键问题,帮助用户顺利完成刷机或救砖操作。

algae的博客 1695

React Fiber架构实现原理详解

React Fiber架构是React核心算法的重构,旨在解决大型应用响应卡顿问题。传统递归更新方式无法中断,导致主线程阻塞。Fiber架构将更新任务拆分为可中断的小单元,通过优先级调度和双缓存技术实现异步渲染。Fiber节点包含组件信息、链表指针和状态数据,构成可遍历的工作单元。更新分为可中断的render阶段(协调差异)和不可中断的commit阶段(DOM操作)。Fiber还引入时间切片和优先级调度机制,确保高优先级任务优先执行。这些改进使React能更高效地处理复杂UI更新,为并发模式奠定基础。

油墨香^-^的博客 1020

告别盲目调参:手把手教你用RKISP2.x Tuner理解AWB、AE、NR等核心模块

本文详细介绍了如何使用RKISP2.x Tuner工具进行ISP调试,重点解析AWB、AE、NR等核心模块的调参技巧。通过RV1126平台的实际操作演示,帮助工程师快速掌握可视化对比实验方法,告别盲目调参,提升图像信号处理效率。

weixin_30300225的博客 394

我对React18 Fiber架构的理解

react fiber架构运行流程

qq_42996469的博客 1088

fragstats:景观指数趋势分析

优快云@_养乐多_本文将介绍景观指数时间序列的趋势分析,包括趋势类型、斜率、截距等。以及景观指数突变分析所用的软件和 python 代码。结果如下图所示,

养乐多的博客 2862

手把手教你学simulink实例--基于Simulink的船舶动力装置性能评估与仿真

船舶动力装置是船舶运行的核心系统,其性能直接影响船舶的安全性、经济性和环保性。基于MATLAB/Simulink平台进行船舶动力装置性能评估与仿真是研究和优化船舶动力系统的重要手段。通过建模与仿真,可以分析动力装置在不同工况下的性能表现,并验证控制策略的有效性。本项目旨在构建一个完整的船舶动力装置性能评估与仿真模型,包括发动机建模、传动系统建模、负载分析以及性能评估模块,并通过仿真分析其动态响应和性能指标。

MHD0815的博客 976

单线程CPU

单线程CPU 单线程CPU 给你一个二维数组 tasks ,用于表示 n​​​​​​ 项从 0 到 n - 1 编号的任务。其中 tasks[i] = [enqueueTimei, processingTimei] 意味着第 i​​​​​​​​​​ 项任务将会于 enqueueTimei 时进入任务队列,需要 processingTimei 的时长完成执行。 现有一个单线程 CPU ,同一时间只能执行 最多一项 任务,该 CPU 将会按照下述方式运行: 如果 CPU 空闲,且任务队列中没有需要执行的

qq_38023905的博客 858

华为面试手撕真题【字符串压缩】

华为面试手撕真题【字符串压缩】

MISAYAONE的博客 1万+

React18原理: React核心对象之ReactElement对象和Fiber对象

连接渲染器(react-dom)和调度中心(scheduler),同时自身也负责fiber树的构造。每个ReactElement对象的区别在于type不同,其type定义在shared包中。及其所有子节点都是ReactElement对象(在render之后才会生成子节点)先看数据结构,其type类型的定义在 ReactInternalTypes.js 中。所有采用jsx语法书写的节点,都会被编译器转换,最终会以。创建出来一个与之对应的ReactElement对象。可以简单的认为,包括。

Wang的专栏 1983

基于STM32的多功能旅行箱_329

随着智能硬件技术的不断发展,智能化产品逐渐渗透到日常生活的各个领域。旅行箱作为出行必需的工具,其传统功能已无法满足现代用户的需求,尤其是在安全性、便捷性和智能交互方面。为了解决这一问题,本设计基于STM32单片机开发了一款多功能智能旅行箱,集成了移动防盗报警、语音寻箱、GPS定位、称重检测、手势控制和蓝牙通信等多项功能。通过STM32F103RCT6主控芯片与HC-05蓝牙模块进行通信,结合海凌科V20语音识别模块、ATGM336H-5N GPS模块和HX711称重模块,提供了全方位的智能化体验。

484

【系统架构设计师-2026上半年真题】案例分析-参考答案及详解(回忆版)

架构评估与设计:通过入侵检测系统的案例分析,阐述质量属性(性能/可用性/安全性/可修改性)的匹配方法,推荐管道-过滤器风格处理实时数据流,并设计8个核心构件实现数据采集到告警的全流程处理。 高并发优化方案: 分析悲观锁(排他锁/共享锁)与乐观锁的特性差异,提出乐观锁通过版本号/CAS实现,悲观锁适用于强一致性场景。 给出Redis优化三手段:分布式锁控制临界资源、Lua脚本保证原子操作、热点数据多级缓存,结合消息队列削峰填谷。 分层架构实践: 智

数据知道的博客 1689

React18原理: 再聊Fiber架构下的时间分片

react的任务可以被打断,其实就是基于时间分片的,人眼最高能识别的帧数不超过30帧,电影的帧数差不多是在24,浏览器的帧率一般来说是60帧,也就是每秒60个画面, 平均一个画面大概是16.5毫秒左右,浏览器正常的工作流程是运算渲染,运算,渲染运算渲染,在浏览器里面一个运算,加上一个渲染就是一帧

Wang的专栏 2796

AUTOSAR从入门到精通-中间件通信DDS(一)

汽车开放系统架构(automotive open system architecture,autosar)是由全球各大汽车oem、零部件供应商、汽车电子软件公司联合建立的一套标准协议。该协议规范了一个符合汽车电子软件开发的、开放的以及标准化的软件架构。最初的autosar规范的制定只考虑传统汽车电子电器架构,基于硬件算力有限场景,提供确定的功能。

getusushu的博客 1871

ccusage 数据源支持机制全解析:判定标准、落地案例与扩展路径

> 本指南以官方 [Source Support Q&A](https://link.gitcode.com/i/6ac6cc13d6335c0453684044e7ab09e8) 为骨架,围绕 ccusage 对各类 Coding Agent 数据源的"支持判定 — 实现落地 — 扩展申请"全流程展开:先讲清一个数据源要被 ccusage 采纳所需的底线信息集,再剖析 Devin CLI 为何被

gitblog_00354的博客 724

ET2012新版免狗免安装绿色软件

ET2012新版免狗免安祖昂绿色软件。,新界面,新视觉,

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等,可在创建的窗口进行控制

【笔记整理】前端面经

收集所有面试要点,大部分是实际面试问题,个别是提升时需要掌握的知识点

m0_53852077的博客 1457

华为的C语言编程规范.pdf

华为技术有限公司内部技术规范。本规范制定了编写C语言程序的基本原则、规则和建议。从代码的清晰、简洁、可测试、安全、程序效率、可移植各个方面对C语言编程作出了具体指导。

React16、17、18优化点大汇总

React16、17、18优化点大汇总

m0_46486849的博客 3122

react 18更新知识盘点(2024面试)

这个更新不仅解决了一个在 React 17 及更低版本中的存在的问题,而且它会在 React 18 中发挥更重要的作用,因为新的流式服务端渲染响应 HTML 的方式将是无序的,需要独一无二的 id 作为索引。相反,React 会延迟渲染,直到有足够的数据,以防止出现加载状态错误。但是直接用axios或者fetch是无法进入suspense的fallback的,但是react提供了一个库供我们使用react-cache(暂不建议使用的),它具体是做什么的,原理是什么,我们后面在讨论,这里先体验一下效果如何。

qq_16546829的博客 3079

React Fiber 详解

React Fiber的引入主要基于以下几个方面的考虑:性能提升:传统React的更新过程是同步的,一旦开始更新就会阻塞浏览器的主线程,直到整个组件树更新完成。这在处理大型组件树或高频用户交互时,可能会导致界面卡顿和响应变慢。Fiber通过将更新过程拆分为多个小任务(Fiber节点),允许在任务之间中断和恢复,从而避免了长时间的阻塞,提高了应用的响应性和性能。优先级调度:Fiber引入了优先级概念,使得React能够根据任务的优先级来动态调整执行顺序。

警警的博客 2435

React源码详细解读(二):理解fiber

本篇教程是基于React18版本,对应的代码在。

QQ2206487433的博客 922

React Fiber 架构原理之2 —— 自底向上盘一盘 Scheduler

其中优先级定义会作为变量导出,而过期时间为内部计算任务派发顺序的参考。调度能力分为四层实现:对接浏览器的 SchedulerHostConfig、实现核心任务管理的 Scheduler、抹平接口的 SchedulerWithReactIntegration、应用 Scheduler 的 ReactFiberScheduler。

军火库 1013

【C++】LeetCode 题库 1834. 单线程 CPU

如果大于,则Q出队一个元素,表示执行了一个任务,这时候当前时刻cur要加上这个任务的执行时间pt,表示执行完后的时刻,注意如果Q为空,则说明CPU处于空闲状态,要把cur调整为下一个未进队任务的进队时间。我们知道所有的任务都有自己的进入任务队列的时刻,但是在题目的输入中,这些任务是不按照这种时间顺序排序的,因此我们要对输入的tasks中元素按照进入时刻来排序,但是每个元素的下标代表着其编号,直接排序后就无从得知每个元素的编号了。如果多个任务具有同样的最短执行时间,则选择下标最小的任务开始执行。

CEOLucifer的博客 543

奇葩说框架之 React Fiber 调度机制

要说 React 框架这些年迭代更新中让人眼前一亮的方案设计,Fiber Reconciler(下文将简称为 Fiber)绝对占有一席之地。作为 React 团队两年多研究与后续不断深入所...

大转转FE 626

为什么你的程序跑不满CPU?——简单聊聊多核多线程

最近同事测试自己的程序,感觉处理耗时太长,一看CPU使用率,才25%。想要提高CPU使用率降低处理时长,于是向我询问。以此为契机写了这篇,聊聊多核多线程。

飞临云的博客 2万+

线程数量与cpu核数的理解

一个极端的线程(不停执行“计算”型操作时),就可以把单个核心的利用率跑满,多核心CPU最多只能同时执行等于核心数的“极端”线程数如果每个线程都这么“极端”,且同时执行的线程数超过核心数,会导致不必要的切换,造成负载过高,只会让执行更慢I/O 等暂停类操作时,CPU处于空闲状态,操作系统调度CPU执行其他线程,可以提高CPU利用率,同时执行更多的线程I/O 事件的频率频率越高,或者等待/暂停时间越长,CPU的空闲时间也就更长,利用率越低,操作系统可以调度CPU执行更多的线程。

weixin_43119856的博客 5270

react 18 的fiber算法

React 18 的 Fiber 算法是 React 16 后引入的全新虚拟 DOM 架构和可中断调度引擎,解决了老版本同步递归渲染导致的页面卡顿问题。它将大任务拆分为可暂停、恢复、优先级调度的小任务,通过链表结构实现中断和恢复。Fiber 包含可中断的协调阶段和不可中断的提交阶段,是 React 18 并发渲染、自动批处理等功能的基石。相比 Vue3 的一次性渲染,Fiber 提供了更高的流畅度和并发能力,但实现复杂度更高。Fiber 架构让 React 实现了不卡顿的用户体验,是 React 18 最核

weixin_45549481的博客 435

Java 多线程

线程 1、什么是线程 单核CPU = 一个车间:一次执行一个进程,如果执行多个程序,会在多个进程中来回切换,执行到进程里面会在多个线程之间来回切换。 多核CPU = 一个工厂:每次可执行多个进程; 进程:一个车间为一个进程(一个运行的程序);进程是一种重量级的资源,系统会分配内存和CPU资源,启动和停止慢,内存相互独立 线程:车间内一个工人为一个线程; 多线程:一个进程包含多个线程;多个线程都可以共享一个进程的内存空间; 1.1、什么是多线程? 多线程是在CPU切换到某个进程之后

liu_pe的博客 659
上一篇: React18原理: 渲染与更新时的重点关注事项
下一篇: 前端架构: 脚手架开发流程中的难点梳理
Wang's Blog
博客等级 码龄12年 7434粉丝 2421原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Wang's Blog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值