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

语言: CN / TW / HK
ead>

theme: cyanosis

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

requestAnimationFrame官方介绍

requestAnimationFrame用处概述

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

官方文档对应截图

000.png

官方文档: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动画
    • setIntervalsetTimeout定时器(比如不停地更改dom元素的位置,使其运动起来)
    • canvas动画,搭配js中的定时器去运动起来(canvas只是一个画笔,然后我们通过定时器会使用这个画笔去画画-动画)
    • requestAnimationFrame动画(js动画中的较好方案)

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

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

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

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

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

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

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

111.gif

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

```html

requestAnimationFrame_yyds

```

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