问题背景:
用react开发h5过程中,遇到input和动画同个页面渲染时,input输入安卓机卡顿。
原因:
简而言之就是大量的数据更新使得react执行的时间过长,浏览器执行一帧的时间变长,FPS 变低,下一帧也就被延迟了,人直观的感受就是页面变卡顿。(其中,定时器的频率设置并不能严格保证在执行时与浏览器默认帧率相同)
解决方案
使用requestAnimationFrame替换原来的css3的keyframes的动画和用定时器写的js动画
代码示例
animation() {
this.timer = window.requestAnimationFrame(()