前端性能优化常见技术

🧠 一、什么是防抖（Debounce）

💡 概念

防抖：在一段时间内，只执行最后一次操作。

比如：

你在搜索框里输入文字，每打一个字就会触发一次搜索请求。
但其实用户可能在连续输入，我们不希望每次输入都发请求，只想在用户停下来后再搜索。
这时就用防抖。

---

🧩 原理

设置一个定时器：

• 每次触发事件，就先清除上一次的定时器；

• 等到用户停止操作超过一定时间（比如 500ms），再执行真正的函数。

---

💻 示例代码（JS）

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

// 用例：输入搜索
const searchInput = document.getElementById("search");
searchInput.addEventListener("input", debounce(() => {
  console.log("发送搜索请求");
}, 500));

🕒 用户如果一直输入，函数就一直不执行；

等用户停下来 500ms 后才执行一次。

---

✅ 适用场景

• 搜索框输入提示

• 窗口大小变化（resize）

• 按钮点击防止重复提交

---

⚙️ 二、节流（Throttle）

💡 概念

节流：在规定时间内，只执行一次操作。

比如：

你在滚动页面时，scroll 事件可能每秒触发上百次，
如果每次都计算页面布局或发请求，会很卡。
我们可以限制为每 200ms 执行一次。

---

🧩 原理

记录上次执行的时间：

• 如果本次触发距离上次执行的时间超过设定值，就执行；

• 否则忽略。

---

💻 示例代码（JS）

function throttle(fn, delay) {
  let lastTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastTime >= delay) {
      fn.apply(this, args);
      lastTime = now;
    }
  };
}

// 用例：滚动监听
window.addEventListener("scroll", throttle(() => {
  console.log("页面滚动中...");
}, 200));

---

✅ 适用场景

• 滚动加载 / 滚动监听

• 页面缩放事件

• 按钮连续点击控制（如防止多次点赞）

---

💤 三、懒加载（Lazy Loading）

💡 概念

懒加载就是“先不加载，等需要的时候再加载”。

比如：

网页上有很多图片，我们只先加载可视区域的，
当用户滚动到图片位置时再加载剩下的图片。
这能显著减少首屏加载时间。

---

💻 示例代码（JS）

<img data-src="real-image.jpg" alt="图片" class="lazy">

// 懒加载逻辑
const imgs = document.querySelectorAll('img.lazy');

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) { // 图片进入视口
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img); // 加载后取消观察
    }
  });
});

imgs.forEach(img => observer.observe(img));

---

✅ 适用场景

• 图片懒加载（最常见）

• 视频懒加载

• 路由组件懒加载（前端框架中，如 Vue、React）

---

💾 四、本地缓存（Local Cache）

💡 概念

把数据保存到浏览器本地，下次访问时可以直接使用，减少网络请求。

---

🔸 常见类型

缓存类型	生命周期	说明
localStorage	永久保存（除非手动清除）	比如保存用户设置
sessionStorage	关闭浏览器就清空	保存临时数据
cookies	可设置过期时间	常用于登录状态
IndexedDB	结构化数据库	保存大量复杂数据

---

💻 示例代码（JS）

// 保存数据
localStorage.setItem("username", "Alice");

// 读取数据
const user = localStorage.getItem("username");
console.log(user); // Alice

// 删除数据
localStorage.removeItem("username");

---

✅ 适用场景

• 保存用户登录状态

• 保存主题设置（暗色/亮色）

• 保存搜索历史

• 接口请求缓存（下次直接读缓存）

---

🎯 总结对比

技术	核心思想	常见场景	优点
防抖（Debounce）	一段时间内只执行最后一次	输入框搜索、窗口resize	避免频繁调用
节流（Throttle）	一定时间内只执行一次	滚动事件、点击事件	控制调用频率
懒加载（Lazy Load）	延迟加载资源	图片、视频、组件	加快首屏速度
本地缓存（Cache）	数据持久化到本地	设置、状态、数据	减少请求，提高性能