触发重排的属性有width、height、top、left、margin、padding；仅触发重绘的有color、background-color、visibility；仅需gpu合成的仅有transform和opacity。
哪些 CSS 属性触发重排，哪些只触发重绘？
过渡动画卡顿的根源，往往在于你正在 transition 的属性会强制浏览器执行重排（reflow）——比如 width、height、top、left、margin、padding。这些属性改变后，浏览器必须重新计算整个布局树，代价极高。
只触发重绘（repaint）的属性开销小得多，例如 color、background-color、visibility；而真正「最轻量」的是能走合成层（compositor layer）的属性：只有 transform 和 opacity 能在不触发布局、不触发重绘的前提下，由 GPU 独立完成动画。
- ✅ 安全选择：
transform: translateX()、transform: scale()、opacity - ⚠️ 避免使用：
top/left（即使加了position: relative）、margin-left、width（哪怕只是从200px→201px） - ? 小技巧：用
transform: translateZ(0)或will-change: transform提前提示浏览器提升图层，但别滥用——它可能提前占用 GPU 内存
为什么用 transform 替代 top 能明显变快？
因为 top 是布局属性，每次变化都会让浏览器重新计算元素位置及其所有后代的位置关系；而 transform 作用于合成层，仅影响渲染管线最后阶段的矩阵变换，不干扰文档流，也不影响其他元素。
实操中，把原本这样写的过渡：
立即学习“前端免费学习笔记（深入）”；
.box {
position: relative;
top: 0;
transition: top 0.3s ease;
}
.box:hover {
top: 20px;
}换成：
.box {
transition: transform 0.3s ease;
}
.box:hover {
transform: translateY(20px);
}就能避开重排，尤其在列表滚动或频繁 hover 场景下，帧率更稳。
- 注意：不要混用
transform和top/left—— 后者会被前者覆盖，且可能引发意外交互 - 如果需要响应式位移，优先用
transform: translateX(calc(100vw - 300px))这类 CSS 计算，而非 JS 动态改style.left
will-change 该不该加？加在哪？
will-change 是个提示性属性，不是性能开关。它告诉浏览器：“这个元素接下来很可能要动”，让浏览器提前准备合成层。但它有成本：过早提升图层会增加内存占用，甚至拖慢初始渲染。
- ✅ 合理用法：只在用户交互即将开始前设置，比如
:hover或mouseenter时才加will-change: transform，动画结束立即移除（可用transitionend监听） - ❌ 错误用法：全局写
* { will-change: transform }，或在父容器上盲目加，导致子元素无谓升层 - ⚠️ 兼容注意：
will-change在 Safari 旧版本中可能触发渲染 bug，上线前务必真机验证
过渡动画卡顿，除了属性选错还有哪些隐藏原因？
即使用了 transform 和 opacity，仍可能掉帧——问题常藏在细节里。
- 避免在
transition中使用all：它会让浏览器监控所有可动画属性，包括那些你根本没打算动的（如box-shadow的模糊半径），增加判断开销 - 慎用
filter（如blur()、drop-shadow()）：它们无法硬件加速，且每帧都要重新采样，极易拖垮性能 - 动画元素层级太深（比如嵌套 8 层
div中的一个子节点）：合成层提升可能失败，浏览器会 fallback 到软件渲染 - JS 主线程繁忙时，CSS 动画也会卡：比如在
scroll事件里同步修改样式，或运行长任务阻塞帧提交
查问题最直接的方式是打开 Chrome DevTools → Rendering → 勾选 “Paint flashing” 和 “Layer borders”，看动画期间是否意外触发大面积重绘或图层未正确提升。
真正影响体验的，从来不是“能不能动”，而是“动得是否独立、干净、不牵连”。很多优化点不在代码多炫，而在删掉那一行 top: 10px，换上 transform: translateY(10px)。
