JavaScript中使用RequestAnimationFrame优化动画效果和性能学习

一、概述

1、介绍

进入web2.0时代，在网页中实现动画已经不再局限于一种方法

• 你可以用CSS3的animattion+keyframes;
• 你也可以用css3的transition;
• 你还可以用通过在canvas上作图来实现动画，也可以借助jQuery动画相关的API方便地实现;
• 当然最原始的你还可以使用window.setTimout()或者window.setInterval()通过不断更新元素的状态位置等来实现动画，前提是画面的更新频率要达到每秒60次才能让肉眼看到流畅的动画效果。

requestAnimationFrame是浏览器用于定时循环操作的一个接口，类似于setTimeout，主要用途是按帧对网页进行重绘。

设置这个API的目的是为了让各种网页动画效果（DOM动画、Canvas动画、SVG动画、WebGL动画）能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果。代码中使用这个API，就是告诉浏览器希望执行一个动画，让浏览器在下一个动画帧安排一次网页重绘。

requestAnimationFrame的优势，在于充分利用显示器的刷新机制，比较节省系统资源。显示器有固定的刷新频率（60Hz或75Hz），也就是说，每秒最多只能重绘60次或75次，requestAnimationFrame的基本思想就是与这个刷新频率保持同步，利用这个刷新频率进行页面重绘。此外，使用这个API，一旦页面不处于浏览器的当前标签，就会自动停止刷新。这就节省了CPU、GPU和电力。

不过有一点需要注意，requestAnimationFrame是在主线程上完成。这意味着，如果主线程非常繁忙，requestAnimationFrame的动画效果会大打折扣。

2、浏览器兼容性

目前，主要浏览器Firefox 23 / IE 10 / Chrome / Safari）都支持这个方法。可以用下面的方法，检查浏览器是否支持这个API。如果不支持，则自行模拟部署该方法。

 window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       || 
              window.webkitRequestAnimationFrame || 
              window.mozRequestAnimationFrame    || 
              window.oRequestAnimationFrame      || 
              window.msRequestAnimationFrame     || 
              function( callback ){
                window.setTimeout(callback, 1000 / 60);
              };
    })();

二、知识点

1、认识JavaScript requestAnimationFrame

首先我们来看一下它的源码
requestAnimationFrame on github

// Adapted from https://gist.github.com/paulirish/1579671 which derived from 
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
 
// requestAnimationFrame polyfill by Erik Möller.
// Fixes from Paul Irish, Tino Zijdel, Andrew Mao, Klemen Slavič, Darius Bacon
 
// MIT license
 
if (!Date.now)
 Date.now = function() { return new Date().getTime(); };
 
(function() {
 'use strict';
 
 var vendors = ['ms', 'moz', 'webkit', 'o'];
 //浏览器兼容
 for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
 //对于支持的浏览器直接统一接口
  var vp = vendors[i];
  window.requestAnimationFrame = window[vp+'RequestAnimationFrame'];
  window.cancelAnimationFrame = (window[vp+'CancelAnimationFrame']
         || window[vp+'CancelRequestAnimationFrame']);
 }
 if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) // iOS6 is buggy
  || !window.requestAnimationFrame || !window.cancelAnimationFrame) {
  //对于不支持的浏览器退而使用setTimeout和clearTimeout
  var lastTime = 0;
  window.requestAnimationFrame = function(callback) {
   var now = Date.now();
   var nextTime = Math.max(lastTime + 16, now);
   return setTimeout(function() { callback(lastTime = nextTime); },
        nextTime - now);
  };
  window.cancelAnimationFrame = clearTimeout;
 }
}());

相信那一点点源码的阅读对大家都没有问题，就算读不懂也没关系，会调用api就可以了

2、requestAnimationFrame VS setTimeout、setInterval

在JavaScript里曾经只有一种方法来设定定时循环任务：setInterval()。如果你想快速的重复有些动作(但又不是像直接调用for循环那样立即执行)，你就需要用到定时调度。最常见的就是动画绘制过程，当动画的绘制速度达到每秒钟60帧时，动画会显得非常的流畅，于是，你需要允许像下面这样一个定时循环任务：

setInterval(function() {
  // 做某些动画任务
}, 1000/60);

至于时间间隔为什么是1000/60,这是因为大多数屏幕渲染的时间间隔是每秒60帧。

requestAnimationFrame 比起 setTimeout、setInterval的优势主要有两点：

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

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

3、用法示例

function animate() {
  console.log("animation");
  window.requestAnimationFrame(animate);
 }
animate();

4、停止requestAnimationFrame

cancelAnimationFrame()接收一个参数 requestAnimationFrame默认返回一个id，cancelAnimationFrame只需要传入这个id就可以停止了。

var globalID;

function repeatOften() {
  document.getElementsByTagName("body").appendChild('#');;
  globalID = requestAnimationFrame(repeatOften);
}

$("#start").on("click", function() {
  globalID = requestAnimationFrame(repeatOften);
});

$("#stop").on("click", function() {
  cancelAnimationFrame(globalID);
});

5、自定义requestAnimationFrame间隔时间

下述是一个虚拟滚动的动画效果的requestAnimationFrame实现部分

// 让滚动顺滑
addAnimated() {
  const _that = this
  var nowTime = 0
  // 记录每次动画执行结束的时间
  var lastTime = Date.now()
  // 我们自己定义的动画时间差值
  var diffTime = 5
  function onScroll(e) {
    nowTime = Date.now()
    if (nowTime - lastTime > diffTime) {
      _that.animationFrameId = window.requestAnimationFrame(_that.animloop)
      lastTime = nowTime
    }
  }
  // 滚动事件监听
  this.$nextTick(() => document.getElementById('vlist').addEventListener('scroll', onScroll, false))
},
animloop() {
  this.handleScroll(document.getElementById('vlist'))
},