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

2024-02-12 02:12

本文主要是介绍React18原理: 再聊Fiber架构下的时间分片,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

时间分片

  • react的任务可以被打断,其实就是基于时间分片的
  • 人眼最高能识别的帧数不超过30帧,电影的帧数差不多是在24
  • 浏览器的帧率一般来说是60帧,也就是每秒60个画面, 平均一个画面大概是16.5毫秒左右
  • 浏览器正常的工作流程是运算渲染,运算,渲染运算渲染
  • 在浏览器里面一个运算,加上一个渲染就是一帧
  • 总的来讲,可以理解为下面这张图
  • 比如 frame 是一帧,一个 Frame 就是16毫秒左右
  • 黑色部分是浏览器的渲染,蓝色部分是js的运算
  • 在16毫秒以内(一帧), 浏览器会重新渲染画面,然后再加上JS的一轮事件循环的执行
  • 根据任务队列循环下去,一秒 60 帧,每一帧都是 js的执行 + 浏览器的渲染
  • 但是, js它是单线程的, 会阻塞浏览器渲染, 假如 js执行时间超长,占了 3 ~ 4帧
  • js执行的时候,浏览器是不能渲染的,那这个时候会有页面卡顿的感觉
    • 实际上这个时候是 js 在执行
    • 这个也是react它去递归渲染的时候的问题
    • 递归渲染,它就是属于长进程,相当于在 render 的时候 js 一直把渲染进程给卡住
  • 这个是哥很苦恼的问题,所以诞生了fiber架构, react希望能够把任务分片处理
  • 这个时候就提到了一个概念,就是 fiber reconciler 要做的事情
  • 它如何让我们把时间分片,然后让又让浏览器不卡顿的呢?
    • 其实特别的巧妙,谷歌浏览器底层提供的一个东西叫做 requestIdleCallback
    • 前面说到一帧(16ms左右) 是 渲染 + js的执行
    • 有时候浏览器比较空闲,有可能一帧不需要 16ms,可能需要6ms, 那剩下的10ms可以执行长任务
    • 当剩下的10ms用完,可以把浏览器的渲染权利再还给浏览器
    • 这个时候进入下一帧的浏览器的画面,继续渲染,渲染完之后又有剩余时间
    • 接着再执行这个长进程,简单来说,就是把长进程拆分成一个个很小的任务
    • 它利用浏览器每一帧的空闲时间去执行,这样就实现了任务的打断,而且还不阻塞浏览器的渲染
  • 也就是说,本来一个任务要执行1秒,但是实际上react的fiber架构可能让这个1秒执行的时间更长
  • 因为任务的拆分其实是增加了这个计算的开销的,但是,它却是在我们每一帧的空闲时间去执行的
  • 虽然执行的整体时间可能变长,但是让用户的感觉没有那么卡顿,所以它的体验是提升了的
  • 参考之前 React 16的时间片:https://blog.csdn.net/Tyro_java/article/details/135586572

关于 requestIdleCallback

  • 文档:https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestIdleCallback

  • window.requestIdleCallback() 方法插入一个函数,这个函数将在浏览器空闲时期被调用

  • 这使开发者能够在主事件循环上执行后台和低优先级工作,而不会影响延迟关键事件,如动画和输入响应

  • 函数一般会按先进先调用的顺序执行,然而,如果回调函数指定了执行超时时间timeout,则有可能为了在超时前执行函数而打乱执行顺序

  • requestIdleCallback(callback)

  • requestIdleCallback(callback, options)

    • callback
      • 一个在事件循环空闲时即将被调用的函数的引用。函数会接收到一个名为 IdleDeadline 的参数
      • 这个参数可以获取当前空闲时间以及回调是否在超时时间前已经执行的状态
    • options 可选
      • 包括可选的配置参数。具有如下属性
        • timeout
          • 如果指定了 timeout,并且有一个正值,而回调在 timeout 毫秒过后还没有被调用
          • 那么回调任务将放入事件循环中排队,即使这样做有可能对性能产生负面影响
  • 返回值是一个ID,可以把它传入 Window.cancelIdleCallback() 方法来结束回调

requestIdleCallback 和 requestAnimationFrame 的区别


1 )react fiber 引起的关注

  • 组件树转换为链表,可分段渲染
  • 渲染时可以暂停,去执行其他高优先任务,空闲时再继续渲染
  • 如何判断空闲?requestIdleCallback

2 ) 区别

  • requestAnimationFrame 每次渲染完都会执行,高优

  • requestIdleCallback 空闲时才会执行,低优

    let curWidth = 100
    const maxWidth = 400function addWidth() {curWidth = curWidth + 3box.style.width = `${curWidth} px`if (curWidth < maxWidth) {widndow.requestAnimationFrame(addWidth) // 时间不用自己控制 高优先级widndow.requestIdleCallback(addWidth) // 时间不用自己控制 繁忙时不会执行}
    }addWidth()
    
  • 对比

    console.info('start')
    window.requestIdleCallback(()=>{console.log('requestIdleCallback')
    })
    window.requestAnimationFrame(()=>{console.log('requestAnimationFrame')
    })
    setTimeout(()=>{console.log('setTimeout')
    })
    console.info('end')
    
  • 执行顺序

    • start
    • end
    • timeout 优先级更高
    • requestAnimationFrame 宏任务优先级较高
    • requestIdleCallback 宏任务优先级较低
  • 总结

    • 两者都是宏任务
    • 需要等待dom渲染完才会执行

这篇关于React18原理: 再聊Fiber架构下的时间分片的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/701419

相关文章

Java编译生成多个.class文件的原理和作用

《Java编译生成多个.class文件的原理和作用》作为一名经验丰富的开发者,在Java项目中执行编译后,可能会发现一个.java源文件有时会产生多个.class文件,从技术实现层面详细剖析这一现象... 目录一、内部类机制与.class文件生成成员内部类(常规内部类)局部内部类(方法内部类)匿名内部类二、

Java实现时间与字符串互相转换详解

《Java实现时间与字符串互相转换详解》这篇文章主要为大家详细介绍了Java中实现时间与字符串互相转换的相关方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、日期格式化为字符串(一)使用预定义格式(二)自定义格式二、字符串解析为日期(一)解析ISO格式字符串(二)解析自定义

Python中随机休眠技术原理与应用详解

《Python中随机休眠技术原理与应用详解》在编程中,让程序暂停执行特定时间是常见需求,当需要引入不确定性时,随机休眠就成为关键技巧,下面我们就来看看Python中随机休眠技术的具体实现与应用吧... 目录引言一、实现原理与基础方法1.1 核心函数解析1.2 基础实现模板1.3 整数版实现二、典型应用场景2

Java的IO模型、Netty原理解析

《Java的IO模型、Netty原理解析》Java的I/O是以流的方式进行数据输入输出的,Java的类库涉及很多领域的IO内容:标准的输入输出,文件的操作、网络上的数据传输流、字符串流、对象流等,这篇... 目录1.什么是IO2.同步与异步、阻塞与非阻塞3.三种IO模型BIO(blocking I/O)NI

Java异常架构Exception(异常)详解

《Java异常架构Exception(异常)详解》:本文主要介绍Java异常架构Exception(异常),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1. Exception 类的概述Exception的分类2. 受检异常(Checked Exception)

Java时间轮调度算法的代码实现

《Java时间轮调度算法的代码实现》时间轮是一种高效的定时调度算法,主要用于管理延时任务或周期性任务,它通过一个环形数组(时间轮)和指针来实现,将大量定时任务分摊到固定的时间槽中,极大地降低了时间复杂... 目录1、简述2、时间轮的原理3. 时间轮的实现步骤3.1 定义时间槽3.2 定义时间轮3.3 使用时

Python如何获取域名的SSL证书信息和到期时间

《Python如何获取域名的SSL证书信息和到期时间》在当今互联网时代,SSL证书的重要性不言而喻,它不仅为用户提供了安全的连接,还能提高网站的搜索引擎排名,那我们怎么才能通过Python获取域名的S... 目录了解SSL证书的基本概念使用python库来抓取SSL证书信息安装必要的库编写获取SSL证书信息

JAVA封装多线程实现的方式及原理

《JAVA封装多线程实现的方式及原理》:本文主要介绍Java中封装多线程的原理和常见方式,通过封装可以简化多线程的使用,提高安全性,并增强代码的可维护性和可扩展性,需要的朋友可以参考下... 目录前言一、封装的目标二、常见的封装方式及原理总结前言在 Java 中,封装多线程的原理主要围绕着将多线程相关的操

kotlin中的模块化结构组件及工作原理

《kotlin中的模块化结构组件及工作原理》本文介绍了Kotlin中模块化结构组件,包括ViewModel、LiveData、Room和Navigation的工作原理和基础使用,本文通过实例代码给大家... 目录ViewModel 工作原理LiveData 工作原理Room 工作原理Navigation 工

Java的volatile和sychronized底层实现原理解析

《Java的volatile和sychronized底层实现原理解析》文章详细介绍了Java中的synchronized和volatile关键字的底层实现原理,包括字节码层面、JVM层面的实现细节,以... 目录1. 概览2. Synchronized2.1 字节码层面2.2 JVM层面2.2.1 ente