绘制性能与动画

重排（Reflow）与重绘（Repaint）

• 重排：几何变化（尺寸、位置），代价高。
• 重绘：外观变化但不触发布局（如 color），代价相对较低。
• 合成：transform、opacity 常可走合成层，避开主线程布局（仍占 GPU）。

减少抖动： 批量读写分离；避免在循环中交替读布局属性与写样式。

---

动画与过渡

.box {
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.box:hover {
  transform: translateY(-4px);
}

优先 动画 transform 和 opacity；谨慎动画 width/height/top/left。

will-change 可提示浏览器优化，仅在确需动画的元素上使用，用完可考虑移除，避免内存占用。

---

隐藏元素的常见方式

方式	是否占位	是否可读屏/SEO
display: none	否	一般移除出无障碍树
visibility: hidden	占空间	可读屏仍可能读出（依浏览器）
opacity: 0	占空间、可点	需注意焦点
position: absolute; clip / .sr-only 模式	视觉上隐藏	保留给读屏

根据 布局是否留白、是否需要保留可访问性 选择。

---

小结

性能与体验：动画走合成友好属性；隐藏元素区分 布局占位与无障碍 需求。