性能优化之通俗易懂学习requestAnimationFrame和使用场景举例
ead>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
- 什么?后端要一次性返回我10万条数据!且看我这8种方案机智应对!
- 性能优化之通俗易懂学习requestAnimationFrame和使用场景举例
- 23个css动画效果,持续更新中...
- elementui源码学习之仿写一个el-message
- 项目优化之使用compression-webpack-plugin插件开启gzip压缩,以vue为例
- 巧妙使用Vue.extend继承组件实现el-table双击可编辑(不使用v-if和v-else)
- 通俗易懂讲解并手写一个vue数据双向绑定案例
- vue中使用docx-preview插件预览word文档(后端express)
- react组件通信方式之~图解父子组件通信和兄弟组件通信pubsub-js
- 解决react警告:findDOMNode is deprecated in StrictMode. findDOMNode was passed an...
- vue自定义指令使用~以仿写v-show和实现v-copy为例讲解
- el-table表头文字换行的三种方式
- elementUI时间日期选择器更改小图标的位置和icon
- 两种方式解决页面刷新vuex中数据丢失问题(详细讲解)
- vue组件的递归自调用~代码思路分析
- el-tree树组件的懒加载写法步骤