will-change 参考
什么是 will-change？
will-change CSS 属性向浏览器提示哪些元素属性可能发生变化，使其提前进行优化准备，通常通过创建新的合成层来实现。
受益属性
| 属性 | 受益程度 | 说明 |
|---|---|---|
transform | 高 | 提升为合成层，启用 GPU 加速 |
opacity | 高 | 与 transform 相同，在合成线程处理 |
filter | 中高 | 大多数浏览器支持 GPU 加速 |
clip-path | 中 | 可从层提升中受益 |
top/left/bottom/right | 无 | 会触发布局，改用 transform |
width/height | 无 | 触发回流，无 GPU 收益 |
background-color | 低 | 绘制操作，收益微小 |
contents | 特殊 | 提示将有较大变化，浏览器自选优化策略 |
应做 / 不应做
✓ 应该
在动画开始前通过 JS 应用
动画结束后移除
仅用于频繁动画的特定元素
用 DevTools 验证效果
动画结束后移除
仅用于频繁动画的特定元素
用 DevTools 验证效果
✗ 不应该
对所有元素都使用——浪费内存
作为默认的性能修复方案
应用于 body 或 html 元素
动画很少时长期保留
作为默认的性能修复方案
应用于 body 或 html 元素
动画很少时长期保留
代码示例
/* 静态 CSS — 仅用于持续动画的元素 */
.spinner {
will-change: transform;
animation: spin 1s linear infinite;
}
/* 动态（推荐）—— 动画前后添加/移除 */
.card:hover { will-change: transform; }
.card { transition: transform 0.3s ease; }
// JS：动画前准备，完成后清理
element.style.willChange = 'transform, opacity';
element.addEventListener('transitionend', () => {
element.style.willChange = 'auto';
}, { once: true });