requestAnimationFrame

requestAnimationFrame

采用系统时间间隔，保持最佳绘制效率，一般浏览器重绘频率为1000ms/60帧是16.7ms；所以一旦小于这个值，浏览器就会重复绘制消耗性能；

const timer = time=> console.log('animation called at', time)
// 这样就会在同一帧内绘制了两次动画
requestAnimationFrame(timer)
requestAnimationFrame(timer)

所以在一些高频绘制的场景比如scroll等，就会造成过度绘制的问题；

window.addEventListener('scroll', e => {
  requestAnimationFrame(time => {
    timer(time)
  })
})

解决方法：通过requestAnimationFrame来管理队列，其思路就是保证requestAnimationFrame的队列里，同样的回调函数只有一个；

let s = () => {
  let bool;
  if(bool) {return}
  bool = true;
  requestAnimationFrame(time => {
    bool = false;
    timer(time);
  })
}
window.addEventListener('scroll', s)

特点：

  1. requestAnimationFrame会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率；
  2. 在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的CPU、GPU和内存使用量；
  3. requestAnimationFrame是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销；
  4. requestAnimationFrame返回一个整数，表示定时器的编号，这个值可以传递给cancelAnimationFrame用于取消这个函数的执行；
  5. cancelAnimationFrame可以取消绘制；
<html>
  <style>
    #myDiv{
      background: #abcdef;width: 0;height:2rem;line-height:2rem;
    }
  </style>
  <body>
    <div id='myDiv'>0%</div>
    <button id='btn'>btn</button>
    <script>
      var timer;
      btn.onclick=()=>{
        myDiv.style.width='0';
        cancelAnimationFrame(timer);
        timer = requestAnimationFrame(function fn(){
          if(parseInt(myDiv.style.width)<500){
            myDiv.style.width = parseInt(myDiv.style.width)+5+'px';
            myDiv.innerHTML = parseInt(myDiv.style.width)/5+'%';
            timer = requestAnimationFrame(fn);
          }else{
            cancelAnimationFrame(timer)
          }
        })
      }
    </script>
  </body>
</html>

requestIdleCallback

  • requestIdleCallback回调的执行的前提条件是当前浏览器处于空闲状态；
  • requestAnimationFrame的回调会在每一帧确定执行，属于高优先级任务，而requestIdleCallback的回调则不一定，属于低优先级任务；如果1帧内有空闲时间，就可以执行；如果浏览器一直繁忙，可以传入第二个参数{timeout: 2000}
  • requestIdleCallback回调中不推荐dom操作；
posted @ 2018-03-06 08:41  we are young  阅读(300)  评论(0)  编辑  收藏  举报