防抖与节流方案_前端性能优化之：函数防抖与函数节流

前言

函数防抖和函数节流是在前端性能优化中老生常谈的话题，也是各位前端的童鞋必须要掌握的性能优化手段。今天为大家分享函数防抖和函数节流的相关原理以及具体实践场景，希望能够给各位小伙伴在工作中提供相应业务场景的解决方案。

一、函数防抖

概念：

如在窗口resize、input输入、textarea输入等操作时，为避免性能浪费，额外无意义执行相关函数处理，需检测用户是否已操作完毕。

规则：

1. 未完成操作时不执行相关函数处理
2. 用户完成操作后，执行相关函数处理

案例：百度搜索推荐-根据用户的输入推荐相关搜索建议

一般思路：

监听input的input事件，用户输入数据即立刻执行查询查询

缺点：

如果用户是想搜索abc，在输入时相当于执行了3次搜索(a/ab/abc三次)，最终得到结果，那么前两次的请求相当于浪费了...

性能优化方案：

判断用户是否已经输入完毕，输入完毕后执行搜索推荐。那如何判断用户是否已经输入完毕，约定如果用户在1000ms无新输入时，则视为输入完毕。

let searchInput = document.querySelector('#searchInput') let searchTimersearchInput.oninput = function () {// 如果在用户输入的范围内已经存在一个定时器，就将此定时器关闭，启动新定时器if (searchTimer) { clearTimeout(searchTimer)}// 启动定时器searchTimer = setTimeout(() => { console.log(this.value)}, 1000)}

此时，用户再连续输入abc时，只会执行一次查询，完美~

二、函数节流

概念：

我们在移动端开发时经常会遇到页面触底加载更多数据，射击类游戏中子弹固定间隔发射的需求，这需要我们去判断是否已经触底，是否已经可以发射子弹了。为避免频繁性的执行判断操作，引入函数节流，在固定的周期内执行一次逻辑判断，减少无意义的多次判断，同时不影响用户体验。

规则

1. 在约定周期内，虽触发多次，只执行1次判断操作
2. 周期内的逻辑判断标志如果存在，则执行停止程序的执行

案例：页面滚动时，判断是否已触底，进行加载更多数据操作

一般思路：

监听页面的scroll滚动事件，判断是否已经触底 规则：文档高度 -滚动条 <= 50 表示已经触底。

window.onscroll = function () { let dH = document.documentElement.scrollHeight let sH = document.documentElement.scrollTop let offsetHeight = dH - sH console.log(offsetHeight) if (offsetHeight <= 50) { console.log('已经触底，可触发请求更多数据') }}

缺点：

页面在滚动时，非常短的时间内会触发很多次滚动，每次都检测是否已经触达底部是一种非常浪费的行为

性能优化方案：

一定的周期内 - 300ms，用户多次滚动只进行一次判定，同时并不影响用户的体验。

let scrollTimerwindow.onscroll = function () { if (scrollTimer) { return } scrollTimer = setTimeout(() => { let dH = document.documentElement.scrollHeight let sH = document.documentElement.scrollTop let offsetHeight = dH - sH console.log(offsetHeight) if (offsetHeight <= 50) { console.log('已经触底，可触发请求更多数据') } scrollTimer = null }, 300);}

此时在300ms内，执行一次逻辑判断，大量减少了无意义的多次逻辑判断，提升了页面性能，同时未影响用户体验。