让每一名学员高薪就业
返回列表 发新帖

前端性能优化-防抖和节流

[复制链接]

79

主题

113

帖子

1337

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1337

版主

发表于 2019-3-14 15:55:46  | 显示全部楼层 | 阅读模式
在前端开发的过程中,由于有一些用户的行为触发的频率非常的高,那么对于浏览器dom和对服务器的资源请求等,会造成非常大的性能浪费,甚至会导致界面卡主或者整个浏览器崩溃。

这些高频率事件有:onscroll oninput resize onkeyup onkedown onkeypress mousedown等等,那么为了解决这些性能问题,函数节流和防抖都是非常有必要的,函数的节流(throttle)和防抖(debounce)也是前端工程师在面试的过程中,经常会被问到的问题,且实现节流和防抖也是对JS高级特性中闭包和this指向等问题的实践。

函数防抖(debounce):例如百度的搜索,当用户快速输入一个单词的时候,例如用户输入itsource,那么会等待用户完整的输入这个单词之后,才会发送ajax请求数据渲染界面,而不是用户每输入一字符,都会触发一个请求,这样都造成很多的请求,函数防抖(debounce)其实就是通过设置定时器,让用户非常高频率触发的事件,在触发结束之后再响应,而且只执行一次,这样能非常大的提高性能。

首先函数没防抖的时候,实例代码和效果如下:
image001.png

image003.png

可以非常直观的看到,当我们快速的输入itsource的时候,每输入一个字符,都放触发一个ajax请求,这很显然是浪费性能的。

那么,我们接下来就可以自己动手,实现一个防抖函数了,我们的需求是,当用户持续的输入的过程中,不触发请求,当用户完整的输入了itsource,再去触发一个请求。
我们实现的思路就是:先设置一个计时器变量,用闭包保存,保证不会被内存释放,在事件触发的时候,也就是只要事件触发,先清除这个计时器,然后再设置一个,那么只要事件持续触发,刚刚建立的定时器就会被销毁,直到最后我们不在触发事件,就执行最后一次设置的定时器。

防抖(debounce)实现代码如下:
image005.png

image006.png

可以看到,我们再快速的输入itsource的时候,只有等待itsource输入完成,才会触发一次请求,从而实现了函数防抖的效果。

函数节流(throttle):函数的节流和防抖是有区别的,举个简单的例子,如果大家抢购去源码时代学习的优惠券,有一个抢购按钮,如果有些同学疯狂点击或者使用脚本来点击这个抢购按钮,那么,触发的频率非常的快,给后端发送的请求会非常的多,可能造成页面卡顿或者浏览器崩溃。

那么我们如何来解决这个问题呢,其实就是使用节流的思想,就像生病的时候打点滴,如果速度太快,人会受不了,这个时候,我们可以可以调整控制点滴的速度,也就是节流。

首先看一下没有节流的实例代码和效果:
image008.png

image009.png

当快速的点击抢购按钮的时候,数量快速的增加,如果有人用脚本点击,那么这个数量会瞬间非常的大,造成性能问题。
那么我们就需要控制触发函数的频率,也就是节流,事件第一次触发的时候,记录下函数执行的时间点,当函数想要再一次执行,需要间隔一定的时间才能执行,也就是每间隔一定的时间,才能触发这个函数,而不能快速触发,这就是节流的方法。
节流实现代码和效果如下:
   image010.png

image011.png

现在,当我们高频率的点击抢购按钮的时候,只有每间隔一秒,才会触发函数,不好连续的触发,从而实现了节流。

防抖和节流都是前端性能优化重要的知识点,希望大家都能掌握如何实现,在以后的前端面试或者开发的过程中,都非常的有用哦。


回复

使用道具 举报

0

主题

10

帖子

-2

积分

限制会员

积分
-2
QQ
发表于 2019-3-14 15:58:20  | 显示全部楼层
老师,你上课么
回复 支持 反对

使用道具 举报

0

主题

17

帖子

9

积分

菜鸟

Rank: 1

积分
9
发表于 2019-3-14 15:58:56  | 显示全部楼层
先回复一个再慢慢看
回复 支持 反对

使用道具 举报

0

主题

9

帖子

4

积分

菜鸟

Rank: 1

积分
4
发表于 2019-3-14 16:02:05  | 显示全部楼层
老师,你上课么
回复 支持 反对

使用道具 举报

0

主题

7

帖子

-5

积分

限制会员

积分
-5
发表于 2019-3-14 16:06:44  | 显示全部楼层
后悔当初我没有培训
回复 支持 反对

使用道具 举报

0

主题

5

帖子

6

积分

菜鸟

Rank: 1

积分
6
发表于 2019-3-14 16:07:20  | 显示全部楼层
老师们都好严格
回复 支持 反对

使用道具 举报

0

主题

3

帖子

101

积分

民工

Rank: 2

积分
101
QQ
发表于 2019-3-15 15:11:41  | 显示全部楼层
感谢分享
香港机器扣2355534373
回复

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

推荐阅读

最新活动

联系我们

Java培训  |   PHP培训  |   UI培训  |   H5培训  |   Python培训  |   大数据培训  |   如何报名  |   视频下载
快速回复 返回顶部 返回列表