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

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

一、函数防抖

概念：

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

规则：

未完成操作时不执行相关函数处理

用户完成操作后，执行相关函数处理

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

一般思路：

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

let searchInput = document.querySelector('#searchInput')

searchInput.oninput = function () {

// 获取搜索值后，执行搜索推荐请求

console.log(this.value)

}

缺点：

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

性能优化方案：

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

let searchInput = document.querySelector('#searchInput')

let searchTimer

searchInput.oninput = function () {

// 如果在用户输入的范围内已经存在一个定时器，就将此定时器关闭，启动新定时器

if (searchTimer) {

clearTimeout(searchTimer)

}

// 启动定时器

searchTimer = setTimeout(() => {

console.log(this.value)

}, 1000)

}

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

二、函数节流

概念：

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

规则

在约定周期内，虽触发多次，只执行1次判断操作

周期内的逻辑判断标志如果存在，则执行停止程序的执行

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

一般思路：

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

window.onscroll = function () {

let dH = document.documentElement.scrollHeight

let sH = document.documentElement.scrollTop

let offsetHeight = dH - sH

console.log(offsetHeight)

if (offsetHeight

console.log('已经触底，可触发请求更多数据')

}

}

缺点：

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

性能优化方案：

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

let scrollTimer

window.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

console.log('已经触底，可触发请求更多数据')

}

scrollTimer = null

}, 300);

}

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