滚动与调整节流实现方法详解

HTML中scroll和resize事件若不加优化，极易引发页面卡顿、掉帧和CPU飙升——这并非代码写得不够好，而是浏览器渲染机制决定的硬性限制；scroll事件应优先采用requestAnimationFrame节流（配合标志位避免重复注册），它天然对齐刷新节奏且后台自动暂停，比传统节流更高效省资源；resize则更适合防抖，因用户调整窗口本质是连续拖拽，真正有意义的是最终尺寸；被动监听（passive: true）虽能提升滚动流畅度，但无法减少回调频次，必须与rAF或节流协同使用；而视口检测类需求，应直接用IntersectionObserver替代手动scroll+getBoundingClientRect，彻底规避强制同步布局的性能陷阱——这些不是“可选技巧”，而是现代前端性能优化的必选项。

scroll 和 resize 事件不加节流或防抖，页面大概率会卡顿、掉帧、CPU 占用飙升——这不是配置问题，是浏览器底层渲染机制决定的。

scroll 事件该用节流还是 requestAnimationFrame？

节流（throttle）能控频次，但仍有丢帧风险；requestAnimationFrame 才是滚动动画的黄金搭档。

• 节流函数如 throttle(handleScroll, 100) 强制每 100ms 最多执行一次，但若逻辑耗时 >16ms，仍可能挤占渲染帧
• requestAnimationFrame 自动对齐浏览器刷新节奏，且在标签页后台时自动暂停，更省资源
• 推荐组合写法：用标志位 + requestAnimationFrame，避免重复注册帧回调

let ticking = false;
function handleScroll() {
  if (!ticking) {
    requestAnimationFrame(() => {
      // 实际滚动逻辑，比如更新视差、计算 sticky 状态
      updatePosition();
      ticking = false;
    });
    ticking = true;
  }
}
window.addEventListener('scroll', handleScroll);

resize 事件为什么更适合防抖（debounce）？

用户调整窗口大小是「连续拖拽」动作，真正需要响应的是最终尺寸——中间过程多数无意义。

• 防抖（debounce）在最后一次触发后延迟执行，比如 debounce(handleResize, 250)，等用户松手 250ms 后再重算布局
• 节流反而可能漏掉最终尺寸，尤其在快速拉伸又缩回的场景下
• 注意：移动端软键盘弹出/收起也会触发 resize，防抖可天然过滤这类瞬态变化

passive: true 能不能直接解决 scroll 卡顿？

能缓解，但不是万能解药——它只解决「浏览器等待 JS 回调结束才滚动」的问题，不减少回调执行次数。

• 加上 { passive: true } 后，preventDefault() 不再生效，滚动更顺滑，但你的 handler 还是会被高频调用
• 必须和 requestAnimationFrame 或节流配合使用，否则 CPU 依然吃紧
• 旧版 iOS Safari 对 passive 支持不全，需 feature detect 或降级处理

window.addEventListener('scroll', handleScroll, { passive: true });

IntersectionObserver 能替代 scroll + getBoundingClientRect 吗？

只要目标是「元素进入/离开视口」，就该直接用 IntersectionObserver，别手写计算。

• 手动调 getBoundingClientRect() 在 scroll 中频繁执行，强制同步布局（Layout Thrashing），性能杀手
• IntersectionObserver 是浏览器原生异步 API，零主线程开销，支持 threshold、rootMargin 等精细控制
• 不支持监听 window 尺寸变化，所以 resize 场景仍需防抖或 ResizeObserver

const io = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      lazyLoadImage(entry.target);
    }
  });
}, { threshold: 0.1 });
io.observe(document.querySelector('.lazy-img'));

真正容易被忽略的点：节流/防抖函数本身如果闭包持有大量 DOM 引用或未清理定时器，会在内存中持续驻留；IntersectionObserver 和 ResizeObserver 实例必须显式调用 unobserve() 或 disconnect()，否则观察者不会被 GC。

理论要掌握，实操不能落！以上关于《滚动与调整节流实现方法详解》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！