React的核心思想: 快速响应
核心:快速响应
制约快速响应的因素是什么? - CPU的瓶颈: - 当遇到大计算量的操作或者设备性能不足使页面掉帧,导致卡顿。 - IO的瓶颈 - 发送网络请求后,由于需要等待数据返回才能进一步才做导致不能快速响应。
CPU的瓶颈
随着项目变得庞大、组件数量越来越多,就很容易遇到CPU瓶颈
问题的根源:浏览器的线程之争
- 主流浏览器的刷新频率是60Hz,也就是(1000ms/60)约等于16.6ms刷新一次浏览器
- JS可以操作DOM,但
GUI渲染线程和JS线程是互斥的,所以JS脚本执行无法和浏览器布局、绘制同时进行。 - 题外话:浏览器有多个线程:JS引擎线程、GUI渲染线程、http请求线程、事件处理线程、定时器触发线程。
- 题外话:GUI渲染线程的主要工作是:1. 解析HTML文档生成DOM 2. CSS代码转换为CSSOM 3. 结合DOM和CSSOM生成渲染树 4. 生成layout 5. 将布局绘制(paint)到屏幕上。
因此,当JS执行时间太久,超过了16.6ms,这次刷新就没有时间执行样式布局和样式绘制了。
React解决方法:时间切片
思路: 既然 一帧里无法执行完所有JS任务,那为什么不把JS任务分开到几帧来做呢?(同步更新转换为异步更新)
具体的实现方法是:
在浏览器每一帧的时间中,预留一定的时间给JS线程,React利用这部分时间更新组件
(源码中是5ms)。
当预留的时间不够用时,React将线程控制权交还给浏览器使其有时间渲染
UI,React则等待下一帧时间到来继续被中断的工作。
小结
所以,解决CPU瓶颈的关键是实现时间切片,而时间切片的关键是:将同步的更新变为可中断的异步更新。
IO的瓶颈
网络延迟是前端开发者无法解决的。如何在网络延迟客观存在的情况下,减少用户对网络延迟的感知?
React给出的答案是将人机交互研究的结果整合到真实的 UI
中。
React的实现
为此,React实现了Suspense,功能及配套的hook——useDeferredValue。
# 总结
实现上,快速响应的关键是解决CPU和IO的瓶颈。而落实到实现上,则需要将同步的更新变为可中断的异步更新。
Related
ENASE 2023 - Evaluation of Contemporary Smart Contract Analysis Tools
https://billyjojojobulidogithub.io/2023/04/24/ENASE/