requestAnmationFrame做为一个前端开发者,应该是非常熟悉的一个API,作为JS动画的首选。
但是最近项目有个BUG,最终排查到是rAF导致的。项目是自己实现的web播放器(播放器原理)。效果是使用canvas渲染视频的每一帧,由于视频帧很大(每秒至少25fps),所以对渲染的压力也很大,所以一开始使用rAF,但是最近客户在使用的过程中发现,在直播场景下,切到了其他页面,再切回来的时候,画面会快进到当前的位置,目前的理解是这属于浏览器的一种优化,在非观看屏下是不会进行渲染的。
不适用的场景可以抽象为:页面在切到其他页面下,需要持续的渲染。
解决办法: 监听浏览器tab的active状态,如果切到其他tab,在渲染时将这些帧给丢弃掉