最省心方案是直接用loading="lazy"；若需滚动监听，防抖可缓解性能问题但属过渡手段，推荐优先使用intersectionobserver。

直接用 loading="lazy" 是最省心的方案，但如果你必须用滚动监听（比如要兼容老浏览器、或需要自定义加载逻辑），防抖确实能缓解性能问题——不过得清楚它只是“补救”，不是最优解。

防抖在滚动监听懒加载里的作用
滚动时事件触发极频繁（每秒几十上百次），不加控制会让判断逻辑反复执行，CPU占用高、页面易卡顿。防抖把多次触发压缩成一次，在用户停止滚动后才执行判断，减少无效计算。

怎么加防抖？
核心是包装滚动回调函数，用时间戳或定时器控制执行节奏：

• 用时间戳判断间隔：记录上一次执行时间，当前时间减去它，大于阈值（如100ms）才运行加载逻辑
• 用 setTimeout + clearTimeout：每次滚动都重置定时器，只保留最后一次滚动结束后的执行

示例代码片段：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

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

const lazyLoad = () => {
  const images = document.querySelectorAll('img[data-src]');
  images.forEach(img => {
    if (isInViewport(img)) {
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
    }
  });
};

window.addEventListener('scroll', debounce(lazyLoad, 100));

注意三个关键点

• 首屏图片要在 DOMContentLoaded 后立刻检查一次，不能等滚动才触发
• isInViewport 判断别在防抖回调里反复调用 getBoundingClientRect()，它开销大；可提前缓存位置，或改用 IntersectionObserver
• 移动端 WebView 对 scroll 事件有降频或丢帧行为，单纯防抖不一定稳定，配合 passive: true 更稳妥

更推荐的替代方案
防抖只是让旧方法“不那么糟”，真正现代、简洁、高性能的做法是用 IntersectionObserver：

• 不依赖滚动事件，浏览器底层优化，零手动节流
• 自动响应视口变化（缩放、旋转屏幕）
• DOM 动态插入也能正常工作（只要元素被 observer 观察到）

所以结论很明确：防抖有用，但它是过渡手段；能用原生 loading="lazy" 就用它，不行就上 IntersectionObserver，滚动+防抖只该出现在兼容性兜底场景里。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！