优化动画之requestAnimationFrame

什么是requestAnimationFrame

  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
> window.requestAnimationFrame() 方法告诉浏览器您希望执行动画,并请求浏览器调用指定的函数在下一次重绘之前更新动画。该方法将在重绘之前调用的回调作为参数。
## 为什么要使用requestAnimationFrame
  或许有人会疑问,用JS执行页面动画效果不是有```setInterval```和```setTimeout```了吗,那为什么还要使用```requestAnimationFrame```,
它有着什么样的好处.
  很多人都知道,由于JS的单线程特性以及使用事件队列的运行机制使得在使用```setinterval```和```setTimeout```方法来实现的JS动画其效果往往差强人意.
  这是因为单线程的JS在每一个时间段内只能执行一个任务,如遇到多个任务同时触发,也会先只执行一个.将剩余的放入事件队列当中.等到当前任务执行完了之后,在从队列中取出下一个任务进行执行,并在执行完成之后,再取出下一个任务.如此往复,直至事件队列的任务都执行完毕.这样就导致了JS在事件队列的任务执行完之前,会造成阻塞,在这期间JS是不会区执行其他的任务请求,包括```setinterval```和```setTimeout```这两个定时器的触发.由此就导致了```setinterval```和```setTimeout```的触发执行时间无法把控,从而造成页面上的JS动画效果不理想.
请看下面代码:
```javascript
setTimeout(function(){
console.log(1);
},0)
console.log(2);
// 2
// 1

  在上面这段代码中我们首先设定了一个定时器,并指定它在0毫秒之后触发,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  *先定义一个定时器,但不去管它的触发时间.因为当前的任务要求只是要设定一个定时器.然后执行下一个任务.```console.log```打印2.之后将当前队列中的任务执行完毕后,再去检查定时是否到达了指定的触发时间.如果达到则执行定时器中的代码由此```console.log```打印出1*
  以上就是一个定时器的大概执行过程,在这个过程中JS永远只会在当前的事件队列里的人物执行完毕后才会去检查定时是否到达指定的触发时间.哪怕在这期间的耗时超过了定时器的指定触发时间,也不会例外.所以这就是为什么很多使用```setinterval```和```setTimeout```做的JS动画效果越往后会感觉越卡的原因所在了.而由此针对这个问题就诞生了```requestAnimationFrame```这个专门的JS动画API.
## requestAnimationFrame的优势
>   requestAnimationFrame的优势,在于充分利用显示器的刷新机制,比较节省系统资源。显示器有固定的刷新频率(60Hz或75Hz),也就是说,每秒最多只能重绘60次或75次,requestAnimationFrame的基本思想就是与这个刷新频率保持同步,利用这个刷新频率进行页面重绘。此外,使用这个API,一旦页面不处于浏览器的当前标签,就会自动停止刷新。这就节省了CPU、GPU和电力。
  不过有一点需要注意,requestAnimationFrame是在主线程上完成。这意味着,如果主线程非常繁忙,requestAnimationFrame的动画效果会大打折扣。
## requestAnimationFrame的语法
&esmp;&esmp;requestAnimationFrame的语法的语法很简单:
```JavaScript
requestID = window.requestAnimationFrame(callback);

只需要window对象调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
下面是由[MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame)上给出的一个例子
```JavaScript
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
var start = null;
var d = document.getElementById('SomeElementYouWantToAnimate');
function step(timestamp) {
if (start === null) start = timestamp;
var progress = timestamp - start;
d.style.left = Math.min(progress/10, 200) + "px";
if (progress < 2000) {
requestAnimationFrame(step);
}
}
requestAnimationFrame(step);

requestAnimationFrame的兼容性

requestAnimationFrame的兼容性

参考资料 :

  1. MDN - window.requestAnimationFrame

  2. JavaScript 标准参考教材 - requestAnimationFrame