学习React技术揭秘(一)

学习React技术揭秘(一)

前言

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

文章内容均来自于React技术揭秘,此文章仅作为学习笔记。

React理念

官网:React是使用JavaScript构建快速响应的大型Web应用程序的首选方式。它在Facebook和Instagram上表现优秀。

使用App和浏览网页时,会有制约快速响应

  • 当遇到计算量大的操作或设备性能不足使得页面掉帧,导致卡顿。

  • 发送网络请求后,由于需要等待数据返回才能进行下一步操作导致不能快速响应。

    即:

    • CPU的瓶颈

    • IO的瓶颈

CPU瓶颈:

项目变得庞大组件数量繁多时,就容易遇到CPU的瓶颈,主流浏览器的刷新率为60Hz,即16.6ms刷新一次。

由于GUI渲染线程和JS线程互斥,所以JS脚本执行和浏览器布局、绘制不能同时执行,每个16.6ms时间内:

JS脚本执行 -----  样式布局 ----- 样式绘制
复制代码

如果js执行时间超出16.6ms,那么这次刷新就没有时间去执行样式布局和绘制了。

解决方案:时间切片(Time Slice)

将长任务拆分到每一帧中,一次执行一小段任务,被称为时间切片

React中,在浏览器每一帧的时间中,预留一些时间给JS线程,React会利用这部分时间更新组件(源码中,预留的初始时间是5ms)。

当预留时间不够时,React将线程控制权交还给浏览器使其有时间渲染UI,React则等待一下帧时间来继续执行被中断的任务。

时间切片的关键是:将同步的更新变为可中断的异步更新

IO瓶颈

IOS动图

通用界面 和 siri与搜索 界面

【通用】交互是同步的,而【Siri】会先在当前页面停留一小段时间,但是没有用loading效果,因为即使请求数据的时间很短,但是用户还是能感知到,但是短暂停留的这一小段时间,用户是无感知的。

为此,React实现了Supense功能及配套的hook——useDeferredValue,

而在源码内部,为了支持这些特性,同样需要将同步的更新变为可中断的异步更新

总结

React为了践行"构建快速响应的大型Web应用程序"理念做出的努力。其中的关键是解决CPU的瓶颈IO瓶颈,则需要将同步的更新变为可中断的异步更新

分类:
前端
标签: