1、概述
参考网址：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame
window.requestAnimationFrame() 参数是一个回调函数。
回调的次数建议每秒60次。
这个回调函数只有一个传参，DOMHighResTimeStamp，指示requestAnimationFrame() 开始触发回调函数的当前时间（performance.now() 返回的时间）。
与setTimeout相比，requestAnimationFrame最大的优势是由系统来决定回调函数的执行时机。具体一点讲，如果屏幕刷新率是60Hz,那么回调函数就每16.7ms被执行一次，如果刷新率是75Hz，那么这个时间间隔就变成了1000/75=13.3ms，换句话说就是，requestAnimationFrame的步伐跟着系统的刷新步伐走。
2、示例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>requestAnimationFrame使用</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#ani{
width: 100px;
height: 100px;
border: 1px solid greenyellow;
}
</style>
</head>
<body>
<div id="ani">
</div>
<script type="text/javascript">
var start = null;
var element = document.getElementById(‘ani‘);
element.style.position = ‘absolute‘;
function step(timestamp) {
if(!start) start = timestamp;
var progress = timestamp - start;
element.style.left = Math.min(progress / 10, 400) + ‘px‘;
//动画执行时间
if(progress < 4000) {
//在动画没有结束前，递归渲染
window.requestAnimationFrame(step);
}
}
//第一帧渲染
window.requestAnimationFrame(step);
</script>
</body>
</html>
优点：
- CPU节能：使用setTimeout实现的动画，当页面被隐藏或最小化时，setTimeout 仍然在后台执行动画任务，由于此时页面处于不可见或不可用状态，刷新动画是没有意义的，完全是浪费CPU资源。而requestAnimationFrame则完全不同，当页面处理未激活的状态下，该页面的屏幕刷新任务也会被系统暂停，因此跟着系统步伐走的requestAnimationFrame也会停止渲染，当页面被激活时，动画就从上次停留的地方继续执行，有效节省了CPU开销。
- 函数节流：在高频率事件(resize,scroll等)中，为了防止在一个刷新间隔内发生多次函数执行，使用requestAnimationFrame可保证每个刷新间隔内，函数只被执行一次，这样既能保证流畅性，也能更好的节省函数执行的开销。一个刷新间隔内函数执行多次时没有意义的，因为显示器每16.7ms刷新一次，多次绘制并不会在屏幕上体现出来。