面试问题:React基本概念,和所遇到的CPU和IO问题

         在官方文档里面可以看见React基本设计概念,React是用 JavaScrip构建快速响应的大型Web应用程序的首选方式,但是快速响应用一定的是依赖,CPU的性能和IO的约束。

        首先CPU性能原因:大部分浏览器的刷新频率为60HZ,及16.6ms浏览器刷新一次,但是由于越大的项目js越复杂,导致他的运行时间早就超过了16.6ms,由于浏览器的渲染线程原理,在跑到js的时候必须等他跑完才会继续跑html。浏览器给出的解决方法是,每一帧流一点时间给js。原生的话你需要手动调用,而react会自动用这个来优化js速度,这种操作叫时间切片,时间切片:将同步的更新变为可中断的异步更新。

        IO的限制,这种可以从服务器的角度进行一个优化,包括利用hTTP2-3等现代协议,同时也可以使用人机交互这种视觉感受,让用户减少对网络延迟的感知,响应时间:0.1s内,用户感觉会流程。1秒内流畅但是会察觉到延迟,10s内,需要提供进度条。对于动画控制在200ms到500ms之间是用户最舒服的。就比如说Suspense以及配套的useDeferredValue这种React提供的功能。

        Suspense:是可以在跳转的过程中显示进度条或者别的内容来告诉用户在加载的。在响应时间超过1s的时候使用。

        useDeferredValue:类似防抖,截流的功能,但是比他们效率更高,他是利用React内部Schedular(调度器)实现的,通过切换优先级,当用户输入的时候,先显示输入的值,把计算值的动作排在优先级后面每次用户修改值react都会计算渲染的值,当用户新输入会打断这个过程,重新按照最新值来跑渲染,达到优化用户体验的功能。

相关推荐

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-19 18:44:03       67 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-19 18:44:03       72 阅读
  3. 在Django里面运行非项目文件

    2024-07-19 18:44:03       58 阅读
  4. Python语言-面向对象

    2024-07-19 18:44:03       69 阅读

热门阅读

  1. Linux处理文件sed

    2024-07-19 18:44:03       19 阅读
  2. Hadoop基础组件介绍!

    2024-07-19 18:44:03       19 阅读
  3. Android 14 适配之 - 全屏 intent 通知

    2024-07-19 18:44:03       20 阅读
  4. Vector容器笔记

    2024-07-19 18:44:03       19 阅读
  5. HashMap的putVal方法(源码分析)

    2024-07-19 18:44:03       24 阅读
  6. 周报 | 24.7.8-24.7.14文章汇总

    2024-07-19 18:44:03       23 阅读
  7. C语言习题~day35

    2024-07-19 18:44:03       24 阅读
  8. Python打包exe 以及压缩大小方法

    2024-07-19 18:44:03       21 阅读
  9. 【ELK】简述

    2024-07-19 18:44:03       20 阅读
  10. 架构以及架构中的组件

    2024-07-19 18:44:03       17 阅读
  11. MySQL物理备份-XtraBackup远程备份恢复

    2024-07-19 18:44:03       19 阅读