徐超波：蜗牛学院前端学科总监，全栈工程师，四川大学本科。从事IT行业8年有余，积累了丰富的软件开发、项目管理经验。精通Java、前端以及Python技术，H5开发经验丰富。原华为无线部门高级研发工程师，并担任项目SE角色。擅长系统架构、 应用架构以及Web前端技术。曾参与大型互联网项目开发数次，对前后端开发有深入的见解，对高并、高可用、分布式架构设计有着丰富的经验。
“ 防抖和节流是性能优化必问的一块内容，而且在实际应用中遇到的频率相当高，处理不当或者放任不管就容易引起浏览器卡死”
01
—
浏览器性能问题
在网页开发过程中，我们会遇到返回顶部这个功能，一般在移动端当页面滚动到一定的位置后才会出现我们的返回按钮。
比如淘宝H5端页面：
当我们滚动到一定的位置时，在屏幕的右下角就会出现一个回到顶部的按钮，点击按钮后就能回到顶部。
如何实现上面的效果，我们可以给屏幕增加一个滚动事件。
上面这段代码在执行的过程中，效果如下：
根据上面的效果你可以发现，当我在屏幕上进行滚动的时候，scroll事件一直在执行，这无疑会增加浏览器的性能消耗，我们想要在指定的位置才执行滚动事件。
02
—
防抖(debounce)
函数防抖的概念：
函数防抖是指在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。这可以使用在一些点击请求的事件上，避免因为用户的多次点击向后端发送多次请求。
基于上述场景，首先提出第一种思路：在第一次触发事件时，不立即执行函数，而是给出一个期限值比如200ms，然后：
1、如果在200ms内没有再次触发滚动事件，那么就执行函数
2、如果在200ms内再次触发滚动事件，那么当前的计时取消，重新开始计时效果：如果短时间内大量触发同一事件，只会执行一次函数。
防抖代码写好过后，我们就可以调用这个函数来测试效果，以及性能对比：
对于短时间内连续触发的事件（上面的滚动事件），防抖的含义就是让某个时间期限内，事件处理函数只执行一次。
防抖函数的应用场景：
按钮提交场景：防⽌多次提交按钮，只执行最后提交的⼀次
服务端验证场景：表单验证需要服务端配合，只执⾏一段连续的输⼊事件的最后⼀次，还有搜索联想词功能类似⽣存环境请⽤lodash.debounce
03
—
节流(throttle)
函数节流的概念：
函数节流是指规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。节流可以使用在 scroll 函数的事件监听上，通过事件节流来降低事件调用的频率。
如果一直拖着滚动条进行滚动，那么会以1s的时间间隔，持续输出当前位置和顶部的距离。
节流函数的适用场景：
拖拽场景：固定时间内只执行⼀次，防⽌超⾼频次触发位置变动
缩放场景：监控浏览器resize
动画场景：避免短时间内多次触发动画引起性能问题
面试中常见的一些场景：
1、搜索框input事件，例如要支持输入实时搜索可以使用节流方案（间隔一段时间就必须查询相关内容），或者实现输入间隔大于某个值（如500ms），就当做用户输入完成，然后开始搜索，具体使用哪种方案要看业务需求。
2、页面resize事件，常见于需要做页面适配的时候。需要根据最终呈现的页面情况进行dom渲染（这种情形一般是使用防抖，因为只需要判断最后一次的变化情况）。
“ 防抖和节流是性能优化必问的一块内容，而且在实际应用中遇到的频率相当高，处理不当或者放任不管就容易引起浏览器卡死”
01
—
浏览器性能问题
在网页开发过程中，我们会遇到返回顶部这个功能，一般在移动端当页面滚动到一定的位置后才会出现我们的返回按钮。
比如淘宝H5端页面：
当我们滚动到一定的位置时，在屏幕的右下角就会出现一个回到顶部的按钮，点击按钮后就能回到顶部。
如何实现上面的效果，我们可以给屏幕增加一个滚动事件。
上面这段代码在执行的过程中，效果如下：
根据上面的效果你可以发现，当我在屏幕上进行滚动的时候，scroll事件一直在执行，这无疑会增加浏览器的性能消耗，我们想要在指定的位置才执行滚动事件。
02
—
防抖(debounce)
函数防抖的概念：
函数防抖是指在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。这可以使用在一些点击请求的事件上，避免因为用户的多次点击向后端发送多次请求。
基于上述场景，首先提出第一种思路：在第一次触发事件时，不立即执行函数，而是给出一个期限值比如200ms，然后：
1、如果在200ms内没有再次触发滚动事件，那么就执行函数
2、如果在200ms内再次触发滚动事件，那么当前的计时取消，重新开始计时效果：如果短时间内大量触发同一事件，只会执行一次函数。
防抖代码写好过后，我们就可以调用这个函数来测试效果，以及性能对比：
对于短时间内连续触发的事件（上面的滚动事件），防抖的含义就是让某个时间期限内，事件处理函数只执行一次。
防抖函数的应用场景：
按钮提交场景：防⽌多次提交按钮，只执行最后提交的⼀次
服务端验证场景：表单验证需要服务端配合，只执⾏一段连续的输⼊事件的最后⼀次，还有搜索联想词功能类似⽣存环境请⽤lodash.debounce
03
—
节流(throttle)
函数节流的概念：
函数节流是指规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。节流可以使用在 scroll 函数的事件监听上，通过事件节流来降低事件调用的频率。
如果一直拖着滚动条进行滚动，那么会以1s的时间间隔，持续输出当前位置和顶部的距离。
节流函数的适用场景：
拖拽场景：固定时间内只执行⼀次，防⽌超⾼频次触发位置变动
缩放场景：监控浏览器resize
动画场景：避免短时间内多次触发动画引起性能问题
面试中常见的一些场景：
1、搜索框input事件，例如要支持输入实时搜索可以使用节流方案（间隔一段时间就必须查询相关内容），或者实现输入间隔大于某个值（如500ms），就当做用户输入完成，然后开始搜索，具体使用哪种方案要看业务需求。
2、页面resize事件，常见于需要做页面适配的时候。需要根据最终呈现的页面情况进行dom渲染（这种情形一般是使用防抖，因为只需要判断最后一次的变化情况）。
