防抖（Debounce）和节流（Throttle）是两种常用的优化技术，主要用于控制高频率的事件触发，如滚动、输入、窗口调整大小等。本文将深入探讨防抖与节流的原理、实现方法及其应用场景。

简单场景就是：输入框防抖，滚动节流

1. 防抖（Debounce）

防抖是一种在事件频繁触发时，通过延迟执行来减少事件触发次数的技术。防抖的核心思想是：当事件被触发时，不立即执行处理函数，而是设置一个定时器，如果在定时器未结束前再次触发事件，则重新开始计时。这样可以确保在一定时间内只执行一次事件处理函数。

实现原理：

示例应用：

在搜索框输入时，实时发送请求获取搜索建议。如果不进行防抖处理，每次输入都会发送请求，造成服务器压力和资源浪费。通过防抖可以优化这种场景：

2. 节流（Throttle）

节流是一种在事件频繁触发时，通过限制函数执行频率来减少事件处理次数的技术。节流的核心思想是：在规定的时间间隔内只执行一次事件处理函数，不论期间事件触发了多少次。

实现原理：

示例应用：

在页面滚动时，实时计算滚动位置以显示回到顶部按钮。如果不进行节流处理，滚动事件会频繁触发，导致性能问题。通过节流可以优化这种场景：

3. 防抖与节流的选择

防抖和节流虽然都是用于控制高频事件，但它们的应用场景有所不同：

• 防抖 ：适用于频繁触发但只需最后一次结果的场景，如搜索输入、窗口大小调整等。
• 节流 ：适用于持续触发但需要定期执行的场景，如滚动事件、窗口滚动位置计算等。

4. 深入优化

立即执行版防抖：

有时我们希望在事件触发时立即执行一次，然后再进行防抖控制，可以在防抖函数中添加一个立即执行选项：

带有标识的节流：

有时我们希望在节流过程中能够获取到当前的状态，可以在节流函数中添加一个标识：

5. 综合应用

在实际开发中，防抖与节流可以结合使用。例如在一个实时搜索的页面中，用户输入时进行防抖处理，而在结果展示时进行节流处理，以优化整体性能。

防抖与节流是前端性能优化中的两项重要技术，通过合理地应用这两种技术，可以显著减少高频事件带来的性能问题，提升用户体验。其他性能优化技术，如代码分割、异步加载、懒加载等，后续介绍。