2023年进行优化，了解函数节流与防抖的必要性

前端

2023-12-11 02:43:54

前端优化新趋势：函数节流与防抖

随着网络科技日新月异，网站和应用的复杂度与日俱增，对性能优化的需求也愈发迫切。函数节流 和函数防抖 是前端优化中两大常用技术，能有效减少冗余函数调用，进而提升网站或应用的性能和用户体验。

函数节流：控制函数调用频率

函数节流是一种技术，限制函数在指定时间内最多只被调用一次。常用于处理用户频繁触发的事件，如鼠标移动、滚动或键盘输入。

其工作原理是：在指定时间间隔内，函数仅被调用一次。若时间间隔内函数再次被触发，则会被忽略。这种方式有效减少了函数调用次数，减轻了服务器或浏览器的负担，提升了网站或应用的性能。

应用场景：

鼠标移动事件： 鼠标在页面上移动时会不断触发mousemove事件。直接处理mousemove事件可能导致性能问题。函数节流可以限制mousemove事件的调用频率，仅在指定时间间隔内触发一次，提升性能。
滚动事件： 用户滚动页面时会不断触发scroll事件。函数节流可以限制scroll事件的调用频率，仅在指定时间间隔内触发一次，提升性能。
键盘输入事件： 用户在键盘上输入字符时会不断触发keydown事件。函数节流可以限制keydown事件的调用频率，仅在指定时间间隔内触发一次，提升性能。

代码示例：

const throttledMouseMove = _.throttle((e) => {
  console.log('鼠标移动');
}, 100);

document.addEventListener('mousemove', throttledMouseMove);

函数防抖：延迟函数执行

函数防抖是一种技术，延迟函数的执行。常用于处理用户输入事件，如表单提交、按钮点击等。

其工作原理是：当函数被触发时，它不会立即执行，而是等待一段时间后再执行。若等待期间函数再次被触发，则会重新计时。如此一来，确保函数只被执行一次，避免了冗余函数调用。

应用场景：

表单提交： 用户提交表单时会触发submit事件。直接处理submit事件可能导致性能问题。函数防抖可以延迟submit事件的处理，等待一段时间后再执行，提升性能。
按钮点击： 用户点击按钮时会触发click事件。直接处理click事件可能导致性能问题。函数防抖可以延迟click事件的处理，等待一段时间后再执行，提升性能。
搜索框输入： 用户在搜索框中输入字符时会不断触发input事件。直接处理input事件可能导致性能问题。函数防抖可以延迟input事件的处理，等待一段时间后再执行，提升性能。

代码示例：

const debouncedSearchInput = _.debounce((e) => {
  console.log('搜索输入');
}, 500);

document.querySelector('input').addEventListener('input', debouncedSearchInput);