requestAnimationFrame跟随浏览器DOM更新频率，实现细腻的特效，例如无限循环的随机满屏花瓣飘落效果，无需将动画过程录制成媒体文件——意味着流畅的视觉体验。
css3成熟以后，style中的transition和annimation被认为是更方便的Web动画实现方式，别以为requestAnimationFrame就此消失，因为无论多么花哨的响应式动画，都绕不开浏览器DOM更新频率的限制，超过浏览器响应频率的DOM重绘，会出现掉帧，并且对浏览器性能造成浪费。
虽然requestAnimationFrame运动框架已经不流行，依然可以发挥作用，活用运动框架的特性，可以处理一些棘手的问题，并且在特定的场景中节省浏览器性能。

2、使用requestAnimationFrame运动框架可处理掉帧问题

DOM重绘掉帧的现象，容易出现在频繁使用定时器的场景下，当我们用定时器高频率地回调一个函数，而视图中某些元素要跟随这个函数刷新，当定时器间隔越来越短，函数执行了，但元素没有更新。
很明显掉帧会影响页面的正常显示，涉及到重要信息的时候，甚至会造成不必要的误解。web显示出现掉帧的情况下，如果不想改变代码逻辑，又要高频刷新视图元素，可以选择用运动框架取代单纯的高频定时。
requestAnimationFrame自身也消耗浏览器性能，而且相对于transition和annimation，运动框架的代码写起来更麻烦，决定使用运动框架之前需要权衡利弊。

3、不要用requestAnimationFrame运动框架处理的场景

不要用运动框架解决前后端交互产生的时延问题
不要用运动框架解决输入校验中遇到的数据-视图不一致问题
以上两个场景，本质上并不是DOM更新频率问题，而是要做好防抖或节流，并且以上两个交互过程，按通常的业务逻辑，没有必要按照小于浏览器重绘周期的间隔执行。
使用了定时器的场景，不要将运动框架作为优先的解决办法，可用数组记录定时器，并及时清除，确保网页中没有非必要的定时器。
当运动框架与定时器处于同一线程的时候，会发生运动框架优先运行而定时器的运行受到严重干扰的现象，H5是支持多线程的，感兴趣可以查一下Web Workers的相关内容。

requestAnimationFrame的使用需要一定的数学常识，如果只是用来当定时工具，也不需要太复杂的计算过程，有HTML、JavaScript基础是可以理解的。

二、requestAnimationFrame运动框架-精简代码

运动框架早期的实用代码有三个版本：速度版、时间版和多样式版，由于这三个版本的代码已经用得不多，而且有点复杂不利于初步理解，没有必要贴完整代码，只附上关键部分，使用时需自行补充中间要运行的过程。

1、编辑定时器

window.requestAnimationFrame = window.requestAnimationFrame || function (fn) {
    return setTimeout(fn, 1000 / 60);
}
window.cancelAnimationFrame = window.cancelAnimationFrame || clearTimeout;

2、调用运动函数（调用以后，每隔一个浏览器重绘周期就调用一次回调函数fn）

requestAnimationFrame(fn)

3、回调函数，中间写每隔一个浏览器重绘周期需要执行的代码


function fn(){
    //要执行的代码
    console.log(0);

    //再次让运动框架执行这个函数，以形成循环
    requestAnimationFrame(fn)
}

三、运动框架应用于web页面的抗阻塞均匀计数器

终于到了上干货的时刻，铺垫有点亢长了呢，通过目录直接跳这儿也行哦(*￣︶￣*)

1、为什么要用requestAnimationFrame做计数器？

前端计时器是经常用到的知识点，基于JavaScript单线程的特性，setInterval计数器在阻塞干扰下间隔会变得不均匀，虽然已经有现成的解决方法，通常是将阻塞延迟的时间在下一个计时周期中调整过来，但并不能治本，所以才推荐用requestAnimationFrame运动框架做计数器，达到在阻塞干扰的情况下依然均匀运作的效果。

页面截图：