理解

requestAnimationFrame 就是利用浏览器屏幕的刷新率自己调用自己的一个方法,它的默认间隔就是屏幕刷新率的帧率,一般是60fps/s,当然对于性能差的设备它的刷新率是变化的

优点

  • requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时候间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧

  • 在隐藏或不可见的元素中， requestAnimationFrame 将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量

使用方法

  • requestAnimationFrame() 接收回调函数,返回id

  • cancelAnimationFrame() 取消

    1. const el = document.getElementById("canvas-container");
    2.     let width = el.offsetWidth - 30;
    3.     const height = el.offsetHeight - 30;
    4.     const mycanvas = new MyCanvas("canvas-container", width, height);
    5.     const context = mycanvas.getContext();
    6.     /**
    7.      * 通过requestAnimationFrame实现高性能动画
    8.      *
    9.      * requestAnimationFrame可以把浏览器的重绘和回流放到一个队列,然后一起进行,可以使运行更加顺畅,也降低了CPU的压力
    10.      */
    11.     let step = 1;
    12.     function run2() {
    13.       step += 10;
    14.       if ( step < 1000) {
    15.         requestAnimationFrame(run2);
    16.       }
    17.       setInterValAnimation(context, 100 + step, 100, 100, 20);
    18.       context.clearRect(step, 100, 100, 20);
    19.     }
    20.     // 第一帧渲染
    21.     let aaa = requestAnimationFrame(run2);
    22.     console.log(aaa);

    使用场景

  • 会频繁引起回流和重绘的操作中,例如resize

  • 循环动画中,例如地图的动态 marker 点等

参考:

requestAnimationFrame用法

requestAnimationFrame详解