前端性能优化之防抖与节流，大幅度降低你的事件处理性能

• 引言

• 正文

• • 一、初步了解

• 二、防抖

• • （1）定义

• （2）使用

• 三、节流

• • （1）定义

• （2）使用

• 四、总结

• 结束语

引言

===========================================================

看到这个标题就懵了， 你会有以下几个问题：什么是防抖？ 什么是节流？ 如何使用防抖？ 如何使用节流？ 什么时候需要用到防抖和节流？ 为什么要用防抖和节流？ 那我们就围绕这几个问题来讲一讲防抖与节流的两个概念和简单应用吧~ 我会在正文中给大家逐个解答问题

正文

===========================================================

如果你不想看具体过程，也可以直接跳到总结，不过还是希望你慢慢看下去哦，因为这对你理解这两个操作很有帮助。

一、初步了解

---

首先，在正文开始之前我们来看一个例子，来了解一下应用防抖和节流的初衷。

先放代码， 其中css代码中，实现导航栏悬停的属性，不明白的可以去看我的另一篇文章介绍，只需要一分钟不到就可以明白css3新属性position: sticky 一分钟实现 导航栏悬停功能

我是导航栏

我是内容1

我是内容2

我是内容3

我是内容4

我是内容5

我是内容6

我是内容7

我是内容8

我是内容9

效果展示

我们可以看到， scroll事件是一个频发事件，我们只是简单的往下滚动， 但scroll 事件却触发了很多很多很多次。 但是我们的目的可能只是想获得滚动停下来以后导航栏距离文档顶部的距离， 我们并不需要滚动停止前那过程中变化的距离， 如果一直在滚动时去获取距离，这非常影响性能，这是我们就需要用到 防抖和节流了。

二、防抖

---

（1）定义

抖，听起来就是一个频繁触发的动作，我们可以想象我们在跑步，每跑一步就出很多的汗，我们跑的过程中，很想拿毛巾擦一擦汗，但是一想，如果刚擦完汗，跑几步就又出汗了，还不如不擦，我看看我等会还跑不跑，如果还跑，那我就一直不擦汗，如果我什么时候不跑了，我就开始擦一下汗。那么‘ 跑步 ’ 这个动作就可以看作我们上述代码中的滚动事件， ’ 擦汗 ’ 就可以看成scroll 事件的处理代码，即获取导航栏离文档顶部的距离。 那么防抖，就是我们滚动页面，刚要获取导航栏离文档顶部的距离，但是发现等会还要继续滚动，那么就先不获取了，等什么时候停止滚动了，再获取这个距离。

以上文字就是对防抖这个概念的一个形象的解释，希望大家反复阅读，理解了定义以后才方便理解下面的实现防抖的代码。

（2）使用

为了解决我们正文刚开始那个例子中，频繁获取导航栏离文档顶部的距离的现象，我们可以用一个setTimeout定时器来完成防抖功能

// 这里我们只修改js代码，其他都不变

我们来解读一下这段代码：

1. 我们在全局定义了一个用于存放定时器的变量timer， 当我们在网页第一次滚动页面时，触发scroll 事件， 首先判断 timer 是否有定时器， 因为第一次滚动触发事件，并没有定时器赋值给timer， 所以执行下面的代码， 这时给 timer 赋值一个延迟为500ms的定时器，并将获取导航栏离文档顶部距离的代码放在定时器中。

2. 因为滚动事件是频繁触发的，紧接着又触发了 scroll 事件。同样的先判断 timer 是否有定时器， 因为上一次触发该事件给 timer 赋值了一个定时器， 但此时定时器还没结束， 所以 timer 是有定时器的，所以执行 if 语句里的代码， 将 timer 里的定时器给清除掉， 这时，因为在上一次定时器还没结束时，我们就在下一次触发事件时将上一次的定时器给清除掉了，所以上一次触发事件没有来得及运行获取导航栏离文档顶部距离的代码。接着我们又给 timer 赋值了一个定时器。

3. 就这样在后面会触发无数次的滚动事件， 代码的运行会一直按照步骤2里的逻辑进行，这样循环往复……

4. 直到我们停止滚动以后， 不再触发滚动事件了，最后一次滚动事件中给 timer赋值的 setTimeout 定时器 生效了，并打印了数据。

现在，我们来看一下，运用了防抖之后滚动页面会有什么效果

我们可以很清楚的看到，在我们滚动的过程中，一直没有打印数据，直到我们停止以后， 控制台打印了导航栏离文档顶部的距离。这就是防抖的效果，现在你有没有对防抖有一个很深的印象了呢？ 接下来我们来介绍一下第二种处理频繁触发事件的方法： 节流。

三、节流

---

（1）定义

为了介绍节流的定义，我们继续使用跑步这一例子。想象我们在跑步，我们很热很热，在跑步的过程中，每隔几秒钟，拿毛巾擦一擦身上的汗。这里我们同样把 ’ 跑步 ’ 看作是 滚动页面的操作， 把 ’ 擦汗 ’ 看作是获取导航栏离文档顶部的距离的操作。那么，节流就是， 我们滚动页面，获取了一下导航栏离文档顶部的距离， 此时我们一直在滚动页面， 只不过我们刚获取过距离了，就先不获取了， 等距离上一次获取几秒后，我们再获取一次吧。

也请大家仔细体会节流的含义，方便理解下面的代码

（2）使用

节流的方法，有两种，一种是利用时间戳，另一种是利用定时器

总结

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。