React的设计理念是快速响应包含以下两个点:
- CPU的瓶颈:当遇到大计算量的操作或者设备性能不足使页面掉帧,导致卡顿。
- IO瓶颈:发送网络请求后,由于需要等待数据返回才能进一步操作导致不能快速响应。
主流浏览器刷新频率为60Hz,即每(1000ms / 60Hz)16.6ms浏览器刷新一次。在这16.6ms内要做很多的事,例如js脚本执行,样式布局,样式绘制等;
也就是说JS的脚本执行时间和布局绘制是互斥的,不能同步进行。如过JS脚本执行时间过长就会造成页面掉帧,导致页面卡顿。
使用时间切片,将同步更新变为可中断的异步更新。也就是在浏览器每一帧的时间中,预留一些时间给JS线程,React利用这部分时间更新组件,预留的初始时间是5ms。当预留的时间不够用时,React将线程控制权交还给浏览器使其有时间渲染UI,React则等待下一帧时间到来继续被中断的工作。