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

前言

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

一、函数防抖概念：

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

规则：

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

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

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




缺点：
如果用户是想搜索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滚动事件，判断是否已经触底 规则：文档高度 -滚动条 <= 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 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 <= 50) {
      console.log('已经触底，可触发请求更多数据')
    }
    scrollTimer = null
  }, 300);
}


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

后记

胡哥有话说，一个有技术，有情怀的胡哥！京东开放平台首席前端攻城狮。与你一起聊聊大前端，分享前端系统架构，框架实现原理，最新最高效的技术实践！

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

JavaScript相关栏目本月热门文章