requestAnimationFrame执行分析

import React, { Component } from "react";

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      width: '10',
    }
  }
  syncClick = () => {
    let i = 0
    let i2 = 0
    var _this = this
    console.log('start', performance.now())
    requestAnimationFrame(function change(time){
      console.log('rfa1', performance.now())
      console.log('time1', time)
      console.log(i++)
      _this.id = requestAnimationFrame(change)
    })
    
    requestAnimationFrame(function change2(time){
      console.log('rfa2', performance.now())
      console.log('time2', time)
      console.log(i2++)
      _this.id2 = requestAnimationFrame(change2)
    })
  }
  cancel = () => {
    cancelAnimationFrame(this.id)
    cancelAnimationFrame(this.id2)
  }
  render() {
    return (
      <div>
        <div onClick={this.syncClick}>requestAnimationFrame</div>
        <div onClick={this.cancel}>cancel</div>
      </div>
    )
  }
}

export default App;

执行结果分析:

start 3023.5950000351295
rfa1 3024.4500000262633
time1 3012.108
0
rfa2 3024.6599999954924
time2 3012.108
0
rfa1 3029.024999937974
time1 3028.78
1
rfa2 3029.2650000192225
time2 3028.78
1
rfa1 3045.629999949597
time1 3045.382
2
rfa2 3046.0800000000745
time2 3045.382
2
rfa1 3062.3699999414384
time1 3062.147
3
rfa2 3062.804999994114
time2 3062.147
3
rfa1 3079.064999939874
time1 3078.832

分析结果可知(输出数字0-3代表帧数),
1.rfa1和rfa2在对应相同帧的时间,基本相同
表明: 在同时触发多次requestAnimationFrame,不会合并,但是会在同一帧中执行,并且是顺序执行的
2.除第一帧之外,后面帧数的间距大概都是16-17之间,符合刷新频率的规律(第一帧由于点击触发requestAnimationFrame时可能已经在此帧的最后面的时间了,所以回调时间比较晚,导致第一帧时间比较晚)
表明: 在requestAnimationFrame回调中调用requestAnimationFrame,那么此RFA的回调会在下一帧中执行
3.time1等于time2
表明: 同一帧requestAnimationFrame回调的执行时间总是一样的,都是在同一帧的渲染前调用回调
4.start大于time1
表明: 表明time1返回的并不是回调真正调用的时间,因为此时requestAnimationFrame还未注册
返回的可能是帧渲染的开始时间(推测)
5.cancelAnimationFrame可以取消requestAnimationFrame回调的执行,使得动画结束