scroll事件不加节流会导致每秒60–120次触发，若监听函数含重排操作（如getBoundingClientRect、style修改），主线程被占满而掉帧、滚动粘滞；推荐用requestAnimationFrame+标志位+passive: true优化，复杂交集判断应改用IntersectionObserver。
scroll 事件不加 throttle 会卡成啥样
浏览器滚动时，scroll 事件每秒可能触发 60–120 次（尤其在高刷屏或触摸设备上），如果监听函数里直接调用 getBoundingClientRect()、修改 style 或触发重排，页面立刻掉帧、滚动粘滞。你看到的“卡”，本质是主线程被 JS 长时间占满，来不及渲染下一帧。
用 requestAnimationFrame + 标志位比纯 throttle 更稳
节流（比如 throttle(fn, 100)）能控频次，但若 fn 执行耗时 >16ms，仍会挤占渲染帧；而 requestAnimationFrame 天然对齐浏览器刷新节奏，且标签页切到后台时自动暂停，更省资源。
推荐写法：
let ticking = false;
function handleScroll() {
if (!ticking) {
requestAnimationFrame(() => {
// 这里放真实逻辑：更新 sticky 状态、计算视差、判断是否进视口等
updateStickyHeader();
ticking = false;
});
ticking = true;
}
}
window.addEventListener('scroll', handleScroll, { passive: true });
-
passive: true必须加——否则现代浏览器会强制同步等待 JS 执行完才滚动，哪怕回调里只有一行console.log - 别在
requestAnimationFrame回调里再读写同一元素的offsetTop/scrollTop等属性，这会强制同步回流 - 如果逻辑简单（如仅开关 class），可不用标志位，直接注册
requestAnimationFrame，但需确保不重复注册
什么时候该换 IntersectionObserver 而不是死磕 scroll + throttle
如果你的滚动逻辑本质是「某元素是否进入/离开视口」，比如懒加载图片、触发动画、吸顶导航切换，IntersectionObserver 是更优解：它不触发重排、原生异步、功耗低，且兼容性已覆盖 Chrome 51+/Firefox 55+/Safari 12.1+。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
对比示例：
- 手动 scroll + throttle：
scroll监听 → 每次都调用element.getBoundingClientRect()→ 计算 top/bottom 是否在视口内 → 易卡顿 -
IntersectionObserver：new IntersectionObserver(callback, { threshold: 0.1 })→ 浏览器底层异步通知，callback 里只做 DOM 更新，无布局计算 - 注意：
IntersectionObserver不适合需要精确滚动距离（如视差滚动）的场景，它只告诉你“有没有交集”，不提供像素级偏移
throttle 函数里 leading/trailing 怎么选
滚动监听中，{ leading: true, trailing: true } 是最稳妥的默认配置。
-
leading: false会导致首次滚动后延迟一个 wait 间隔才执行，可能错过顶部吸顶的临界点 -
trailing: false会让最后一次滚动后不补调，导致滚动停住时状态没更新（比如导航栏该吸顶却没吸） - 别把
event对象直接传进节流闭包——滚动事件对象是复用的，节流后拿到的可能是过期引用；需要时应在原始监听里先解构所需字段，如{ scrollTop, target }
requestAnimationFrame 只解决“执行频次”问题，但若滚动容器本身没启用硬件加速，或内部有 filter、opacity: 0.99 这类强制图层分裂的 CSS，滚动依然卡——得配合 transform: translateZ(0) 和 Chrome DevTools 的 “Layer Borders” 去验证合成层是否生效。 
