requestAnimationFrame

1、requestAnimationFrame 和 setInterval

---

• 编写动画最关键的步骤是：确定时间间隔。间隔过短，无法保证浏览器的渲染能力；间隔过长，无法保证动画效果平滑流畅；
• setInterval()方法按照指定的时间间隔（30ms）执行函数；[注意]HTML5标准规定，setInterval的最短间隔时间是10毫秒，也就是说，小于10毫秒的时间间隔会被调整到10毫秒。

var timer = null;
		timer = setInterval(function () {
			autoplay();
		},30);

• clearInterval(timer);停止调用；
• requestAnimationFrame()不需要设置时间间隔，是由系统的时间间隔定义的。大多数浏览器的刷新频率是60Hz(每秒钟反复绘制60次)，循环间隔是1000/60，约等于16.7ms。大多数浏览器会对反复挥着这个操作加以限制，不能超过60HZ，即使人为设置超过了该值，效果也不会改善。requestAnimationFrame()保证了最佳的绘制效率。

var render = function(){
	window.requestAnimationFrame(render);
	autoplay();
};

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

• 运行机制不同：
  • setInterval()执行的时间不确定，该设置的时间间隔是将代码添加到异步队列中等待的时间。只有当主线程中的任务以及队列前面的任务是执行完毕，才真正开始执行动画代码；
  • requestAnimationFramel()浏览器每刷新一次，动画代码执行一次，不会造成丢帧现象以及动画卡顿；
• cpu的使用
  • 当页面被隐藏或者最小化时，setInterval()仍在后台继续执行，这种动画刷新是完全没有意义的，对cpu也是极大的浪费；
  • 当页面被隐藏或者最小化时，requestAnimationFramel()中页面的渲染会被系统暂停，当页面再次激活后，继续从上次停止地方继续绘制；