028-86261949

当前位置:首页 > 技术交流 > 前端性能优化-防抖和节流

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

2019/03/14 15:13 分类: 技术交流 浏览:1

在前端开发的过程中,由于有一些用户的行为触发的频率非常的高,那么对于浏览器dom和对服务器的资源请求等,会造成非常大的性能浪费,甚至会导致界面卡主或者整个浏览器崩溃。

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

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

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

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

那么,我们接下来就可以自己动手,实现一个防抖函数了,我们的需求是,当用户持续的输入的过程中,不触发请求,当用户完整的输入了itsource,再去触发一个请求。

我们实现的思路就是:先设置一个计时器变量,用闭包保存,保证不会被内存释放,在事件触发的时候,也就是只要事件触发,先清除这个计时器,然后再设置一个,那么只要事件持续触发,刚刚建立的定时器就会被销毁,直到最后我们不在触发事件,就执行最后一次设置的定时器。

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

 

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

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

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

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

当快速的点击抢购按钮的时候,数量快速的增加,如果有人用脚本点击,那么这个数量会瞬间非常的大,造成性能问题。

那么我们就需要控制触发函数的频率,也就是节流,事件第一次触发的时候,记录下函数执行的时间点,当函数想要再一次执行,需要间隔一定的时间才能执行,也就是每间隔一定的时间,才能触发这个函数,而不能快速触发,这就是节流的方法。

节流实现代码和效果如下:

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

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

#标签:H5前端,前端性能优化