面试问题: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都会计算渲染的值,当用户新输入会打断这个过程,重新按照最新值来跑渲染,达到优化用户体验的功能。

  • 5
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值