前言
小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
文章内容均来自于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瓶颈,则需要将同步的更新变为可中断的异步更新。