前端性能优化-如何快速实现函数防抖和节流？

image

文：源码时代

前端性能优化-如何快速实现函数防抖和节流？

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

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

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

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

image

image

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

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

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

防抖（debounce）实现代码如下：

image

image

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

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

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

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

image

image

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

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

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

image

image

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

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

作者：源码时代

本文版权归源码时代所有，转载请注明出处，如果您觉得有用欢迎点赞留言，更多学习资料查看源码时代主页。