性能优化之通俗易懂学习requestAnimationFrame和使用场景举例

---

theme: cyanosis

一项新技术新的技术方案的提出，一定是为了解决某个问题的，或者是对某种方案的优化，比如window.requestAnimationFrame这个api...

requestAnimationFrame官方介绍

requestAnimationFrame用处概述

window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行...

官方文档对应截图

官方文档：http://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame

大致看了以后，我们可以知道:

requestAnimationFrame这个api主要是用来做动画的。

requestAnimationFrame这个api主要是用来做动画的。

requestAnimationFrame这个api主要是用来做动画的。

其实顾名思义，我们翻译这个英文单词，也能大致明白。request(请求)Animation(动画)Frame(帧)

关于前端动画的两个问题：

1.前端动画方案有哪些？

2.为何偏偏要使用这个新的api来做动画（或者说这个api较之前做动画的方式优点有哪些）？

1.前端动画方案有哪些？

主要分类为css动画和js动画，如下细分：

• css动画
  • transition过渡动画
  • animation直接动画（搭配@keyframes）
• js动画
  • setInterval或setTimeout定时器（比如不停地更改dom元素的位置，使其运动起来）
  • canvas动画，搭配js中的定时器去运动起来（canvas只是一个画笔，然后我们通过定时器会使用这个画笔去画画-动画）
  • requestAnimationFrame动画（js动画中的较好方案）

另有svg动画标签，不过工作中这种方式是比较少的，这里不赘述

2.为何偏偏要使用这个新的api来做动画（或者说这个api较之前做动画的方式优点有哪些）？

在工作中，做动画最优的方案无疑是css动画，但是某些特定场景下，css动画无法实现我们所需要的需求，此时，我们就要考虑使用js去做动画了

canvas动画的本质也是定时器动画

使用定时器动画干活，实际上是可以的，但是存在一个最大的问题，就是动画会抖动、动画会抖动、动画会抖动，体验效果不是非常好。

而，使用requestAnimationFrame去做动画，就不会抖动、就不会抖动、就不会抖动

这里笔者写一个demo动画（分别是上述两种方式实现dom元素向右平移）给大家看一下，就知道具体的区别。我们先看一下效果图：（红色dom是定时器实现、绿色dom是requestAnimationFrame实现）

因为笔者的gif录制软件的问题，看着都有点卡，实际上，大家把下方代码复制一份跑起来看的话，会发现定时器动画在微微颤抖，而requestAnimationFrame动画却稳如老狗

```html

```

GitHub仓库地址：http://github.com/shuirongshuifu/elementSrcCodeStudy

另外，有一个做滚动的插件库，叫做vue-seamless-scroll其内部实现原理也是基于requestAnimationFrame实现的。感兴趣的道友可以去看看

类比学习reduce循环解决了forEach循环可能需要一个初始变量的问题

我们类比一下学习，比如既然有了forEach循环，为啥还又新推出一个reduce循环呢？

原因：某些场景下，reduce循环解决了forEach循环还需要再定义一个变量的问题。

似曾相识的感觉...

比如我们有一个需求，给一个数组求和。

forEach写法

js let arr = [1, 3, 5, 7, 9] function forEachFn(params) { let total = 0 params.forEach((num) => { total = total + num }) return total } let res1 = forEachFn(arr) console.log(res1);

reduce写法

js let arr = [1, 3, 5, 7, 9] function reduceFn(params) { return params.reduce((temp, num) => { temp = temp + num return temp }, 0) } let res2 = reduceFn(arr) console.log(res2);

通过上述两段代码，我们可以看到，reduce函数比forEach少写了一个total变量，千万不要小看这少写的东西，某些情况下，会节省很多的工作量呢！

一项新技术新的技术方案的提出，一定是为了解决某个问题的，或者是对某种方案的优化，比如xxx