防抖和节流是前端开发中常用的两种性能优化技术,主要用于控制事件处理函数的执行频率,优化高频触发事件的处理
常用解决方案:使用lodash插件提供的 debounce和throttle函数,licia库提供的debounce和throttle函数
防抖:(动态搜索输入框,下拉刷新)
防抖(debounce)的核心思想是在一定时间间隔内,无论事件被触发多少次,都只执行最后一次。换句话说,如果事件持续触发,那么事件处理函数将不会执行,只有在事件触发暂停后才会执行一次。
实现方式:
防抖通常利用定时器来实现。当事件被触发时,清除之前的定时器并重新设定一个新的定时器。定时器结束后,实际的事件处理函数才会被调用。如果事件持续触发,则定时器不断重置,事件处理函数始终不会执行。
适用场景:
适用于需要在事件触发停止后进行响应的场景,如搜索框输入、步进器组件、更新商品购买数量、窗口大小调整等
示例:
-
当用户使用步进器增加购买数量时使用防抖技术,可以在用户最终确定购买数量时再向服务器发送请求,而不是用户每点一次'加号'或'减号'就发一次请求
-
当用户输入搜索词时,如果每敲一个字母都发送请求,会频繁调用服务器,不仅影响性能,还可能加重服务器负担。此时,使用防抖技术可以让用户停止敲击键盘一段时间后再发起请求,有效减少不必要的调用。
节流:(登录按钮,上拉加载更多)
节流(throttle)是指在一定时间间隔内,无论事件被触发多少次,都只执行第一次。也就是说,如果在这段间隔内再次触发事件,事件处理函数将不会被执行
示例:
-
在上拉加载更多时使用节流技术,可以确保在第一次获取数据成功后用户再次上拉时再发请求获取数据,而不是用户每上拉一次就发请求获取一次数据
-
在滚动事件中使用节流技术,可以确保事件处理函数不会因为连续快速的滚动动作而被频繁调用,从而减轻浏览器的负担。
适用场景:
适用于需要固定时间间隔响应一次的场景,如滚动事件、快速点击等
实现方式:
可以通过定时器实现。在事件首次触发时开启一个指定时长的定时器,在这段时间内后续的事件触发会被忽略,直到定时器到达指定时长后,才能再次触发事件处理函数。也可以通过设置标识位来实现
使用防抖还是节流,取决于回调函数的调用时机
防抖:在一定时间内回调函数只执行最后一次触发,如果定时器期间该事件回调又被触则重置定时器,等待定时器结束且不再触发该函数是再调用
节流:在一定时间内回调函数只在第一次触发时执行,如果在定时器期间该事件回调又被触发则不会执行,等待定时器结束后才可继续触发