requestAnimationFrame运动框架基本概念+运动框架应用于web页面的抗阻塞均匀计数器

目录

一、requestAnimationFrame运动框架的基本概念

1、requestAnimationFrame运动框架特性

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

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

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

1、编辑定时器

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

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

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

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

2、requestAnimationFrame运动框架与setInterval做计数器的控制台数据：

3、web版计数器(对照版)预览与源码下载

先了解运动框架的基本概念，如需跳过概念部分直奔主题，请在目录中选取需要跳转的内容

一、requestAnimationFrame运动框架的基本概念

• JS运动框架window.requestAnimationFrame(回调函数)，简单来说就是让浏览器在下次重绘之前，执行指定的回调函数。

1、requestAnimationFrame运动框架特性

• 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运动框架-精简代码

运动框架早期的实用代码有三个版本：速度版、时间版和多样式版，由