前端性能优化—防抖与节流–02

技术分享 2年前 (2024-08-04) 0 999+

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

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

1. 防抖（Debounce）

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

实现原理：

function debounce(func, wait) {     let timeout;     return function(...args) {         const context = this;         clearTimeout(timeout);         timeout = setTimeout(() => func.apply(context, args), wait);     }; }

示例应用：

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

const searchInput = document.getElementById('search'); const handleSearch = debounce((event) => {     console.log('Fetching search results for:', event.target.value);     // 发送搜索请求 }, 300);  searchInput.addEventListener('input', handleSearch);

2. 节流（Throttle）

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

实现原理：

function throttle(func, limit) {     let inThrottle;     return function(...args) {         const context = this;         if (!inThrottle) {             func.apply(context, args);             inThrottle = true;             setTimeout(() => inThrottle = false, limit);         }     }; }

示例应用：

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

const handleScroll = throttle(() => {     console.log('Scroll position:', window.scrollY);     // 处理滚动事件 }, 200);  window.addEventListener('scroll', handleScroll);

3. 防抖与节流的选择

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

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

4. 深入优化

立即执行版防抖：

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

function debounce(func, wait, immediate) {     let timeout;     return function(...args) {         const context = this;         const callNow = immediate && !timeout;         clearTimeout(timeout);         timeout = setTimeout(() => {             timeout = null;             if (!immediate) func.apply(context, args);         }, wait);         if (callNow) func.apply(context, args);     }; }

带有标识的节流：

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

function throttle(func, limit) {     let inThrottle;     return function(...args) {         const context = this;         if (!inThrottle) {             func.apply(context, args);             inThrottle = true;             setTimeout(() => inThrottle = false, limit);         }     }; }

5. 综合应用

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

const searchInput = document.getElementById('search'); const resultsContainer = document.getElementById('results');  const fetchResults = debounce((query) => {     console.log('Fetching results for:', query);     // 模拟搜索请求     setTimeout(() => {         resultsContainer.innerHTML = `Results for: ${query}`;     }, 500); }, 300);  const handleScroll = throttle(() => {     console.log('Scroll position:', window.scrollY);     // 处理滚动事件 }, 200);  searchInput.addEventListener('input', (event) => {     fetchResults(event.target.value); });  window.addEventListener('scroll', handleScroll);