【css】will-change: trsnsform 详解

一、

will-change: transform; 是一种 CSS 属性，用来告诉浏览器元素未来可能会改变其 transform 属性，使得浏览器可以为此提前做好优化准备。will-change 能提升页面的性能，特别是在元素需要频繁重绘、重排或进行复杂动画时。

作用

• 性能优化：浏览器会为即将改变的属性预留渲染资源，减少动画或属性变化时的延迟。
• 硬件加速：对于 transform、opacity 等属性，浏览器会尽可能将它们放到 GPU 处理，以加速渲染。

使用场景

在以下情况使用 will-change: transform;：

1. 动画和过渡效果：元素即将使用 transform 做平移、缩放、旋转等动画效果。
2. 频繁更新的元素：例如滚动或悬停状态下不断变化的元素。
3. 性能问题：如果动画或变换卡顿，可以尝试用 will-change 来提高性能。

注意事项

过度使用 will-change 会增加内存消耗，因为浏览器会为这些元素提前分配更多的资源。因此，只在必要的元素上使用 will-change，并尽量在动画或变化结束后移除它。

二、 多层div 嵌套的情况下， 到底在哪一层div加 will-change: trsnsform 这个怎么判定？

在多层嵌套的 div 中使用 will-change: transform 时，应该优先选择直接发生动画或变换的那一层 div。这是因为 will-change 的作用是告诉浏览器预先优化特定元素的特定属性，帮助提升动画或变化的性能。所以，选择应用 will-change 的层次需要根据以下准则来判断：

判断标准

1. 明确需要变化的层级：如果某一层 div 上直接发生动画（如平移、旋转、缩放等），则在该层添加 will-change: transform;。

   • 例如，若动画应用在第三层 div 上（而非父级 div），则应在第三层 div 添加 will-change: transform;。

2. 减少不必要的层级：避免将 will-change 应用于不发生动画或变化的父级或子级 div，因为这样会导致浏览器为更多层级分配资源，增加内存占用，影响性能。

3. 层级传递性：will-change 属性不会传递给子级或父级。也就是说，即使你在某一层使用 will-change: transform;，它不会对其他层级的渲染起到优化作用。因此，只需将 will-change 应用于实际需要的 div，而非整个嵌套结构。

4. 测试性能：如果不确定在哪一层添加效果更好，可以通过开发者工具的性能监控来观察不同层级 div 使用 will-change 后的效果。将 will-change 添加到不同层级，测试页面的流畅性与内存占用情况，以找到最佳选择。

示例

假设你有一个三层嵌套的结构：

<div class="parent">
  <div class="child">
    <div class="target">动画元素</div>
  </div>
</div>

假如动画仅在 target 层（第三层）上发生，应该在 .target 元素的 CSS 中添加：

.target {
  will-change: transform;
}

这样可以直接优化动画元素，而不会浪费资源去优化其他层级。