学习
实践
活动
工具
TVP
写文章

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

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

一、函数防抖

概念:

如在窗口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内,执行一次逻辑判断,大量减少了无意义的多次逻辑判断,提升了页面性能,同时未影响用户体验。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20191014A075XS00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码关注腾讯云开发者

领取腾讯云代金券