web app 的瓶颈
web app,有两类场景会制约快速响应:
大计算量、设备性能不足使页面掉帧=> CPU 的瓶颈
发送网络请求后,由于需要等待数据返回 => IO 的瓶颈
React是如何解决?
主流浏览器刷新频率为 60Hz,即每(1000ms / 60Hz)16.6ms 浏览器刷新一次。
JS 可以操作 DOM,GUI渲染线程与JS线程互斥、JS 脚本执行和浏览器布局、绘制并非同时执行。
在每 16.6ms 时间内,需要完成如下工作:
JS脚本执行 ----- 样式布局 ----- 样式绘制
当 JS 执行时间过长,超出了 16.6ms,样式布局和样式绘制就会受影响。
如何解决这2个问题?
将同步的更新变为可中断的异步更新。
每一帧的时间中,预留一些时间给 JS 线程,React利用这部分时间更新组件(可以看到,在源码中,预留的初始时间是 5ms)。
当预留的时间