position: fixed 和 position: sticky 会触发合成层，但滥用会导致内存上升、渲染变慢；fixed 常被提升但受父级 transform/opacity 影响，sticky 仅粘住时提升且对父容器 overflow 有要求；动态切换二者状态会反复创建/销毁图层，性能更差。
position: fixed 和 position: sticky 触发合成层，但别乱用
这两个值会让浏览器为元素创建独立的合成层（compositing layer），从而把重绘限制在该层内，避免影响整个页面。但代价是内存占用上升、初始渲染变慢，尤其在低端设备上明显。
-
position: fixed在滚动时完全不参与文档流，浏览器通常会直接将其提升为合成层——但若父容器有transform或opacity等属性，可能意外阻止提升，导致滚动时仍触发重排 -
position: sticky只在“粘住”状态才被提升，未粘住时仍是普通文档流元素；它对父容器有严格要求：overflow不能是hidden或auto（某些旧版 Safari 下会失效） - 频繁切换
fixed/sticky状态（比如监听 scroll 动态改style.position）会反复创建/销毁合成层，比单纯重绘更伤性能
绝对定位元素的 transform 替代 top/left 动画
用 top 或 left 改变 position: absolute 元素位置，会触发 layout → paint → composite 流程；而用 transform: translateX() 只走 composite，跳过前两步。
- 动画中优先写
transform: translate(10px, 20px)，而不是top: 20px; left: 10px - 如果元素本身已有
transform（比如旋转），叠加平移时用transform: rotate(45deg) translate(10px, 20px)，不要拆成两个transform声明（后者会覆盖前者） - 注意：
transform不改变文档流，若依赖其占位（如兄弟元素跟随偏移），得额外用margin或伪元素占位
z-index 高并不等于性能好，堆叠上下文才是关键
很多人以为设高 z-index 就能“提层”，其实真正决定是否新建合成层的是“堆叠上下文”（stacking context）。只有建立了新堆叠上下文的元素，才可能被单独合成。
- 触发堆叠上下文的常见方式包括：
opacity小于 1、transform非 none、will-change: transform、filter、mask等——z-index本身不触发 -
will-change: transform是个双刃剑：它提前告诉浏览器“这个元素要动”，促使提前建合成层；但如果滥用（比如全页面加），会导致大量内存浪费和初始化延迟 - 检查是否真建了合成层？Chrome DevTools → Rendering → 勾选 “Layer borders”，绿色边框表示独立图层；紫色边框是“共享图层”，说明没真正隔离
relative 定位本身不触发重绘，但它的子元素可能被拖下水
position: relative 自身只是偏移视觉位置，不影响布局流，也不强制创建合成层，所以开销极小。但它常被当作“定位上下文”来包裹 absolute 子元素——这时候问题就来了。
- 如果父级
relative元素内容频繁变化（比如内部文本更新），即使子元素是absolute，整个父容器仍可能触发重排+重绘 - 更隐蔽的问题：父容器设置了
transform（哪怕只是transform: translateZ(0)），就会创建堆叠上下文，导致所有absolute子元素被“锁死”在该上下文中，无法单独提升为合成层 - 解决思路：把需要动画的
absolute子元素再包一层空div，并给这层加transform: translateZ(0)或will-change: transform，让它自己建合成层
真正卡顿往往不出现在单个属性上，而是多个定位策略嵌套后，意外阻断了合成层提升路径。比如一个 sticky 导航栏里放了个 absolute 下拉菜单，而菜单又用了 top/left 动画——三层定位混在一起，浏览器很难优化，最后全回退到软件渲染。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
