前言

在计算机专业的学习中，掌握知识点是至关重要的。然而，仅仅听课和阅读教材可能并不足以真正理解和应用所学的内容。在这个信息爆炸的时代，我们需要更加主动和高效地学习，以提升自己在计算机领域的竞争力。而实践记录和笔记，作为学习的得力助手，能够帮助我们更好地理解知识点，加深记忆，并提供一个有组织的学习框架。我们可以不断总结和反思，发现自己的不足之处，并逐步提升自己的学习能力和解决问题的能力~让我们一起开启笔记/实践记录的学习之旅吧！

性能优化与调试技巧（二）：节流和防抖

今天我们来学习和记录一下前端性能优化与调试技巧的实战内容，这篇文章记录学习的是关于节流和防抖的内容。

什么是节流和防抖？

节流（Throttling）和防抖（Debouncing）都是前端常用的性能优化技术，用于控制事件触发频率，减少不必要的计算和网络请求。

节流

节流（Throttling）的原理是固定时间间隔内只执行一次操作。例如，我们设置一个时间阈值为200ms，当某个事件持续触发时，只有当距离上次执行操作的时间超过200ms时，才会再次执行操作。如果在200ms内事件再次触发，操作会被忽略。这样可以控制事件的触发频率，避免过于频繁的操作。

防抖

防抖（Debouncing）的原理是当一个事件持续触发时，等待一定的时间后，如果事件没有再次触发，才执行操作。例如，我们设置一个时间阈值为200ms，当事件触发后，等待200ms，如果在这200ms内事件再次触发，重新计时。只有当没有事件触发达到200ms时，才执行操作。这样可以确保在持续触发事件时，只执行一次操作。

二者区别

执行时间点：
- 节流：固定时间间隔内只执行一次操作。例如，每200ms执行一次操作。
- 防抖：等待一定时间后，如果事件没有再次触发，才执行操作。例如，200ms后没有再次触发事件时执行操作。
执行逻辑：
- 节流：在固定时间间隔内，无论事件触发多少次，只执行一次操作。例如，每200ms内只执行一次操作。
- 防抖：在等待时间结束后，如果事件再次触发，则重新计时。只有等待时间结束且没有再次触发事件时才执行操作。例如，等待200ms，如果在此期间又触发了事件，则重新计时。
应用场景：
- 节流：适用于需要限制操作频率的场景，如滚动事件、鼠标移动事件等。常用于减少资源消耗，例如频繁发送请求或减少DOM操作等。
- 防抖：适用于需要延迟执行操作的场景，如输入框搜索建议、窗口大小调整等。常用于避免在频繁触发事件时产生过多的计算或请求。

代码案例

节流

function throttle(fn, delay) {
  let timer = null;
  return function() {
    if (!timer) {
      timer = setTimeout(() => {
        fn.apply(this, arguments);
        timer = null;
      }, delay);
    }
  };
}

// 使用节流函数包装事件处理函数
const throttledFn = throttle(function() {
  console.log('Throttled function triggered');
}, 200);

// 绑定事件处理函数
window.addEventListener('scroll', throttledFn);

防抖

function debounce(fn, delay) {
  let timer = null;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, delay);
  };
}

// 使用防抖函数包装事件处理函数
const debouncedFn = debounce(function() {
  console.log('Debounced function triggered');
}, 200);

// 绑定事件处理函数
window.addEventListener('resize', debouncedFn);

在上述代码中，throttle 函数用于创建一个节流函数，debounce 函数用于创建一个防抖函数。然后，我们将需要优化的事件处理函数通过相应的节流或防抖函数进行包装，从而控制事件的触发频率。

个人思考

应用场景选择：在实际应用中，选择正确的技术非常重要。我认为节流适用于需要限制操作频率的场景，例如滚动事件或按钮点击事件。通过控制事件的调用频率，可以有效减少性能消耗。而防抖则更适用于需要延迟执行操作的场景，例如输入框搜索建议或窗口大小调整。通过等待一定时间，可以避免不必要的计算或请求。
性能优化与用户体验平衡：尽管节流和防抖可以提高性能，但过度使用可能会影响用户体验。因此，在使用这些技术时，我们需要在性能优化和用户体验之间取得平衡。过于严格的节流或防抖设置可能导致用户操作的延迟感增加，反而对用户体验造成负面影响。
综合考虑其他因素：除了节流和防抖，我们还应该综合考虑其他因素。有时候，使用其他性能优化技术可能更合适。例如，利用虚拟列表来处理大型数据集的滚动性能问题，或者使用异步操作来减少网页加载时间。因此，在实际应用中，我们应该根据具体情况选择最适合的性能优化技术。
实际测试和性能分析：虽然节流和防抖是常见的性能优化技术，但在实际应用中，我们需要进行实际测试和性能分析。每个应用场景都可能存在不同的需求和性能瓶颈，因此，通过测试和分析，我们可以评估节流和防抖对性能的实际影响，并根据结果做出相应的调整和改进。

文章仅为个人学习笔记，如有错误，欢迎指正。

性能优化与调试技巧（二）：节流和防抖 | 青训营

前言

性能优化与调试技巧（二）：节流和防抖

什么是节流和防抖？

节流

防抖

二者区别

代码案例

节流

防抖

个人思考