position: sticky 本身不提升渲染性能，但能消除 scroll 监听导致的重排；需避免 overflow: hidden、正确使用 contain 属性，并禁用干扰属性以保障原生滚动优化。
sticky定位本身不优化渲染，但能避免scroll监听导致的重排
加 position: sticky 不会自动让长列表变快，它真正的价值是帮你删掉那些在 scroll 回调里反复调用 getBoundingClientRect() 或手动切换 fixed 类的 JS 逻辑。这类监听器一旦绑定，浏览器就无法对滚动做原生优化，帧率很容易掉到 30fps 以下。
常见错误现象：
- 滚动时导航栏“抽搐”或延迟固定
- React/Vue 列表中
useEffect里监听scroll，导致组件频繁 re-render - Chrome DevTools 的 “Rendering” 面板里看到大量 Layout / Paint 标记
正确做法是：把吸顶逻辑完全交给 CSS，JS 只负责数据更新，不碰定位状态。
父容器 overflow: hidden 是性能杀手，必须改掉
很多长列表用 overflow: hidden 或 overflow: auto 包裹，以为能裁剪内容或控制滚动，结果直接让 position: sticky 失效——浏览器被迫退化为 JS 模拟，又回到重排老路。
修复方式很直接：
- 把
overflow: hidden改成overflow: clip（现代浏览器支持，不打断粘性锚定链） - 如果必须局部滚动，用
max-height: 100vh; overflow-y: auto显式声明可滚动区域 - 绝对不要在
body或#app上设overflow: hidden，iOS Safari 会静默忽略 sticky
验证方法：用 Chrome DevTools 逐层检查 sticky 元素向上所有祖先节点的 overflow 值，只要有一个是 hidden、auto 或 scroll，就停在那里改。
给sticky元素加 contain: layout style paint 才真隔离重排
动态插入新列表项（比如加载更多、搜索过滤）后卡顿，不是 sticky 慢，而是父容器高度反复坍缩撑开，触发 layout thrashing。这时候只靠 position: sticky 不够，得加隔离层。
contain: layout style paint 必须写全三个值，且只能加在 sticky 元素自身上：
- 漏掉
style：伪类变更（如:hover）仍会触发全局重排 - 加在父容器上：可能截断滚动上下文，sticky 直接失效
- 写成
contain: content：等价于layout paint size，没封住样式变化
示例：
.list-header {
position: sticky;
top: 0;
contain: layout style paint;
}
注意：若标题内部频繁改 innerText 或切 display，还得配合 content-visibility: auto 进一步固化渲染边界。
移动端 iOS Safari 下 sticky 卡顿的硬解法
iOS Safari（尤其 15.4 之前）对 sticky 边界计算极其敏感，哪怕只加了 backface-visibility: hidden 或 transform: translateZ(0)，都可能导致粘性静默失效或掉帧。
实操建议：
- 禁用所有非必要
transform、filter、will-change——它们会创建新包含块，让 sticky “认错爹” - 不用
scroll监听做任何事；改用IntersectionObserver检测标题是否进入视口（仅用于视觉反馈，不控制定位） - 必须兼容旧版 iOS？降级方案是用
position: fixed+IntersectionObserver手动 toggle 类，比 scroll 监听稳得多
真正容易被忽略的是：sticky 的性能收益只在“不干扰浏览器原生滚动优化”的前提下成立。一旦你写了任何 scroll 监听、或在祖先上加了破坏锚定链的属性，就等于主动放弃这个优势。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
