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

news2024/11/17 14:53:37

概述

  • 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执行权,让浏览器及时地响应用户的交互

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

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

相关文章

【从Python基础到深度学习】4. Linux 常用命令

1.配置root用户密码 root用户为系统默认最高权限用户,其他用户密码修改命令与root用户修改密码命令相同 sudo passwd root 2.添加用户(henry) sudo useradd -m henry -s /bin/bash 3.配置henry用户密码 Xshell下连接新用户(hen…

Idea Git Review插件

idea git plugin 添加了一些常用的小插件 可以右键打开git bash窗口 可以右键选中文字点击baidu fanyi 可以通过搜索git用户名 指定开始时间查询某个版本自己提交的所有代码文件 可以通过点击蓝色行数,跳转到指定的改动代码块 资源地址: git-pl…

专业课135+总分400+西安交通大学815/909信号与系统考研电子信息与通信工程,真题,大纲,参考书。

经过将近一年的考研复习,终于梦圆西安交大,今年专业可815(和909差不多)信号与系统135,总分400,回想这一年的复习还是有很多经验和大家分享,希望可以对大家复习有所帮助,少走弯路。 专业课: 这…

2 月 9 日算法练习- 数据结构 - 除夕快乐♪٩(´ω`)و♪

翻转括号序列 暴力过20%数据 思路&#xff1a;括号合法序列问题可以利用前缀和&#xff0c;将"(“看成 1&#xff0c;”)"看成 0&#xff0c;规律是到某个位置为止的前缀和>0并且到最后前缀和0。 #include<bits/stdc.h> using namespace std; const int N…

【Spring MVC】Spring MVC的执行流程与源码分析

目录 一、Spring MVC的组件详解 1.1 处理器映射器 1.1.1 处理器映射器的继承体系 1.2 处理器适配器和处理器 1.2.1 处理器适配器的继承体系 1.2.2 处理器适配器和处理器的对应关系 第一个适配器&#xff1a;org.springframework.web.servlet.mvc.method.annotation.Reque…

【计算机网络】协议层次及其服务模型

协议栈&#xff08;protocol stack&#xff09; 物理层链路层网络层运输层应用层我们自顶向下&#xff0c;所以从应用层开始探究应用层 协议 HTTP 提供了WEB文档的请求和传送SMTP 提供电子邮件报文的传输FTP 提供两个端系统之间的文件传输报文&#xff08;message&#xff09;是…

计算机网络——05Internet结构和ISP

Internet结构和ISP 互连网络结构&#xff1a;网络的网络 端系统通过接入ISPs连接到互连网 住宅、公司和大学的ISPs 接入ISPs相应的必须是互联的 因此任何2个端系统可相互发送分组到对方 导致的“网络的网络”非常复杂 发展和演化是通过经济的和国家的政策来驱动的 问题&…

re:从0开始的CSS学习之路 9. 盒子水平布局

0. 写在前面 过年也不能停止学习&#xff0c;一停下就难以为继&#xff0c;实属不应 1. 盒子的水平宽度 当一个盒子出现在另一个盒子的内容区时&#xff0c;该盒子的水平宽度“必须”等于父元素内容区的宽度 盒子水平宽度&#xff1a; margin-left border-left padding-lef…

fast.ai 机器学习笔记(三)

机器学习 1&#xff1a;第 8 课 原文&#xff1a;medium.com/hiromi_suenaga/machine-learning-1-lesson-8-fa1a87064a53 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 来自机器学习课程的个人笔记。随着我继续复习课程以“真正”理解它&#xff0c;这些笔记将继续更…

微软 CMU - Tag-LLM:将通用大语言模型改用于专业领域

文章目录 一、前言二、主要内容三、总结 &#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 一、前言 论文地址&#xff1a;https://arxiv.org/abs/2402.05140 Github 地址&#xff1a;https://github.com/sjunhongshen/Tag-LLM 大语言模型&#xff08…

rediss集群 三主三从集群模式

三主三从集群模式 1)、新建redis集群目录&#xff1a;7001~7006工作目录【/app/soft/redis-cluster/目下】 2&#xff09;、在7001~7006 目录下创建bin和conf 目录&#xff0c;然后将/app/soft/redis/bin目录下的文件分别拷贝到7001~7006 目录&#xff0c;然后在7001~7006 目…

C++ 动态规划 数位统计DP 计数问题

给定两个整数 a 和 b &#xff0c;求 a 和 b 之间的所有数字中 0∼9 的出现次数。 例如&#xff0c;a1024&#xff0c;b1032 &#xff0c;则 a 和 b 之间共有 9 个数如下&#xff1a; 1024 1025 1026 1027 1028 1029 1030 1031 1032 其中 0 出现 10 次&#xff0c;1 出现 10…

「数据结构」二叉搜索树1:实现BST

&#x1f387;个人主页&#xff1a;Ice_Sugar_7 &#x1f387;所属专栏&#xff1a;Java数据结构 &#x1f387;欢迎点赞收藏加关注哦&#xff01; 实现BST &#x1f349;二叉搜索树的性质&#x1f349;实现二叉搜索树&#x1f34c;插入&#x1f34c;查找&#x1f34c;删除 &am…

codeforces 1400分

文章目录 1.[B. Phoenix and Beauty](https://codeforces.com/problemset/problem/1348/B)2.[C. Rotation Matching](https://codeforces.com/problemset/problem/1365/C)3.[C. Element Extermination](https://codeforces.com/problemset/problem/1375/C)4.[D. Epic Transform…

Mysql Day04

mysql体系结构 连接层服务层引擎层&#xff08;索引&#xff09;存储层 存储引擎 存储引擎是基于表建立的&#xff0c;默认是innoDB show create table tb; 查看当前数据库支持的存储引擎 show engines; InnoDB 特点 DML&#xff08;数据增删改&#xff09;遵循ACID模…

【STM32 HAL库实战】串口DMA + 空闲中断 实现不定长数据接收

本文目录 1、STM32CubeMX配置部分1.1 SYS配置如图1.2 RCC配置如图1.3 USART1配置NVIC SettingsDMA Settings 1.4 DMA配置 2、软件执行流程2.1 HAL_UARTEx_ReceiveToIdle_DMA()2.2 HAL_UART_IRQHandler(&huart1)2.3 HAL_UARTEx_RxEventCallback()2.4 HAL_UART_ErrorCallback…

接口测试类型分为哪些?

什么是接口&#xff08;API&#xff09; API全称Application Programming Interface&#xff0c;这里面我们其实不用去关注AP&#xff0c;只需要I上就可以。一个API就是一个Interface。我们无时不刻不在使用interfaces。我们乘坐电梯里面的按钮是一个interface。我们开车一个踩…

345. Reverse Vowels of a String(反转字符串中的元音字母)

题目描述 给你一个字符串 s &#xff0c;仅反转字符串中的所有元音字母&#xff0c;并返回结果字符串。 元音字母包括 ‘a’、‘e’、‘i’、‘o’、‘u’&#xff0c;且可能以大小写两种形式出现不止一次。 问题分析 不要被题目迷惑了&#xff0c;题意是将元音字符提取出来…

Postgresql 的编译安装与包管理安装, 全发行版 Linux 通用

博客原文 文章目录 实验环境信息编译安装获取安装包环境依赖编译安装安装 contrib 下工具代码 创建用户创建数据目录设置开机自启动启动数据库常用运维操作 apt 安装更新源安装 postgresql开机自启修改配置修改密码 实验环境信息 Ubuntu 20.04Postgre 16.1 编译安装 获取安装…

Linux中常用的工具

软件安装 yum 软件包 在Linux中&#xff0c;软件包是一种预编译的程序集合&#xff0c;通常包含了用户需要的应用程序、库、文档和其他依赖项。 软件包管理工具是用于安装、更新和删除这些软件包的软件。常见的Linux软件包管理工具包括APT&#xff08;Advanced Packaging To…