性能优化之防抖与节流

性能优化

1.防抖（debounce）

定义:在单位时间内,频繁触发事件,只执行最后一次。

使用方式：

1. lodash提供的防抖函数来处理
2. 手写一个防抖函数（下篇笔记分享）

使用场景：

• 搜索框搜索输入---->用户最后一次输入完（搜索信息填写完毕）再发送请求
• 手机号、邮箱验证输入检测

例如：鼠标在盒子上移动，盒子里面的数字就会变化加1

<script>
	//防抖之前
	//触发频率太快，只要鼠标在动，数字就在上升
	const box=document.querySelector('.box')
	let i =1
	box.addEventListener('mousemove',function() {
    	this.innerHTML = i++
	})
 </script>

//使用第三方库lodash进行防抖
<script src="./js/lodash.main.js"></script>
<script>
    // 利用防抖实现性能优化
    const box=document.querySelector('.box')
    let i=1
    function move(){
      // 这里有可能是dom操作,发送请求等消耗性能的操作如果频繁触发会导致性能的损失
      this.innerHTML=i++
    }
    // 创建防抖后的函数
    // __debounce()生成一个防抖函数
    // 参数1:业务函数
    // 参数2:防抖的延时
    // 返回值:防抖函数
  box.addEventListener('mousemove',_.debounce(move,300))
//总结：防抖之后，触发频率变低，性能消耗减少
  </script>

2.节流（throttle）

节流：单位时间内，频繁触发事件，只执行一次。

通俗理解：任务做完后触发才能开启下一个，在正在执行的任务结束之前事件触发多少次都没用。

使用场景：鼠标移动mousemove、页面尺寸缩放resize、滚动条滚动scroll等等

使用方式：

1. lodash提供的节流函数来处理
2. 手写一个节流函数来处理（下边笔记分享）

//使用节流进行性能优化
<script src="./js/lodash.main.js"></script>
<script>
    const box=document.querySelector('.box')
    let i = 1
    function mouseMove(){
      // 如果里面存在大量消耗性能的代码，比如dom操作,比如数据处理，可能会发生卡顿
      box.innerHTML=i++
    }
	//利用lodash 库实现节流
	//参数1：业务函数
	//参数2：时间间隔
	//返回值：函数
const fn= _.throttle(mouseMove,300)
  box.addEventListener('mousemove',fn)
  </script>

总结：

节流：单位时间内，频繁触发事件，只会执行一次

防抖：单位时间内，频繁触发事件，只会执行最后一次