直接用 background-attachment: fixed 会卡，因其强制每帧重绘背景层，依赖 repaint 而非合成；高性能视差需元素脱离文档流且仅用 transform（如 translateY）驱动，配合 will-change 或 translateZ(0) 提升图层，并通过 JS 注入 --scroll-y 变量与 calc() 实现可控视差。
为什么直接用 background-attachment: fixed 会卡
因为 background-attachment: fixed 强制浏览器在每次滚动帧都重绘整个背景层，尤其在中低端设备或复杂布局下，GPU 无法有效缓存，掉帧明显。这不是 CSS 层面的“错”，而是它本质依赖 repaint，而非合成（compositing）。
真正高性能的视差，必须满足两个条件：元素脱离文档流 + 变换仅触发 transform（不触发 layout 或 paint）。所以核心是：用 transform: translateY() 驱动位移，且该元素需被提升为独立图层（例如加 will-change: transform 或已有 transform）。
用 CSS 自定义属性（--parallax-factor）控制滚动比例
把视差强度从硬编码抽成变量，既方便调试，也利于响应式切换。关键点在于：变量不能直接用于 transform，必须配合 calc() 和滚动容器的 scrollTop 值联动——但纯 CSS 拿不到 scrollTop，所以得靠 JS 注入变量值。
- 给滚动容器（如
body或某个.scroll-container）监听scroll事件 - 在回调里计算当前滚动进度：
const y = window.scrollY || document.documentElement.scrollTop - 用
element.style.setProperty('--scroll-y', y + 'px')注入到目标元素上 - CSS 中写：
transform: translateY(calc(var(--scroll-y) * var(--parallax-factor))
注意：--parallax-factor 推荐设为小数（如 0.3），负值可实现反向视差；乘法比除法更安全，避免除零或 NaN。
立即学习“前端免费学习笔记（深入）”；
为什么 transform 要用 translateZ(0) 或 will-change
不显式触发图层提升时，浏览器可能把视差元素和页面其他内容合并在同一图层绘制，导致 transform 动画仍触发重绘。加 transform: translateZ(0) 是最轻量的强制升层方式（比 will-change: transform 更可控，后者可能引发过度优化）。
实操建议：
- 对每个参与视差的元素，至少声明
transform: translateZ(0)（哪怕只是占位） - 若该元素本身已有
transform（比如translateY()），无需额外加translateZ(0)，现代浏览器已自动升层 - 避免在大量元素上滥用
will-change，它会提前分配 GPU 内存，反而拖慢初始渲染
滚动事件节流不是可选项，而是必选项
原生 scroll 事件每秒可能触发 60+ 次，如果每次都在 JS 中读取 scrollTop 并 setProperty，极易阻塞主线程。必须节流，且推荐用 requestAnimationFrame 而非 setTimeout。
最小可用节流逻辑：
let ticking = false;
function updateParallax() {
if (!ticking) {
requestAnimationFrame(() => {
const y = window.scrollY;
document.documentElement.style.setProperty('--scroll-y', y + 'px');
ticking = false;
});
ticking = true;
}
}
window.addEventListener('scroll', updateParallax);这个模式确保最多每帧更新一次变量，且与屏幕刷新率同步。如果多个视差层共用同一个 --scroll-y，只需一个监听器；若需不同容器各自滚动，就分别绑定并注入不同变量名（如 --scroll-y-main、--scroll-y-section2）。
真正容易被忽略的是：视差层的 transform 必须只依赖 CSS 变量，不能混用 JS 直接操作 style.transform —— 后者绕过 CSS 引擎的合成优化，性能直接回到解放前。
