版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_21423689/article/details/82851027
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>requestAnimationFrame</title>
</head>
<body>
<script>
function animate () {
requestAnimationFrame(animate);
document.getElementsByTagName('body')[0].innerHTML+='22';
}
animate();
</script>
</body>
</html>window.requestAnimationFrame() 将告知浏览器你马上要开始动画效果了，后者需要在下次动画前调用相应方法来更新画面。这个方法就是传递给window.requestAnimationFrame()的回调函数。
也可这个方法原理其实也就跟setTimeout/setInterval差不多，通过递归调用同一方法来不断更新画面以达到动起来的效果，但它优于setTimeout/setInterval的地方在于它是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销。