will-change与触发重排重绘

will-change是浏览器性能优化的"预告机制"，让GPU提前准备，但滥用会导致资源浪费。

will-change原理

什么是will-change

告知浏览器元素即将发生的变化类型，浏览器可提前创建合成层。

CSS

.element {
  will-change: transform, opacity;
}

工作流程

CSS

声明will-change
    ↓
浏览器创建独立合成层
    ↓
分配GPU内存
    ↓
变化发生时直接GPU处理
    ↓
跳过Layout/Paint

will-change语法

支持的值

CSS

/* 单属性 */
.element {
  will-change: transform;
  will-change: opacity;
  will-change: scroll-position;
  will-change: contents;
}

/* 多属性 */
.element {
  will-change: transform, opacity;
}

/* 移除声明 */
.element {
  will-change: auto;
}

值说明

值	说明
`transform`	变换动画即将发生
`opacity`	透明度变化即将发生
`scroll-position`	滚动位置变化
`contents`	内容变化（谨慎使用）
`auto`	移除优化提示

正确使用时机

动画开始前声明

JavaScript

/* CSS方式 */
.modal {
  will-change: transform;
}

.modal.active {
  transform: translateX(0);
  /* 动画结束后移除 */
}

.modal:not(.active) {
  will-change: auto;
}

JavaScript动态控制

JavaScript

// 交互开始前启用
element.addEventListener('mouseenter', () => {
  element.style.willChange = 'transform, opacity';
});

// 动画结束后移除
element.addEventListener('animationend', () => {
  element.style.willChange = 'auto';
});

// 或使用transitionend
element.addEventListener('transitionend', (e) => {
  if (e.propertyName === 'transform') {
    element.style.willChange = 'auto';
  }
});

键盘交互场景

CSS

// Tab导航时提前优化
const focusableElements = document.querySelectorAll('a, button, input');

focusableElements.forEach(el => {
  el.addEventListener('focus', () => {
    el.style.willChange = 'transform';
  });

  el.addEventListener('blur', () => {
    el.style.willChange = 'auto';
  });
});

错误使用方式

全局声明

CSS

/* 错误：浪费大量GPU内存 */
* {
  will-change: transform;
}

/* 或 */
body {
  will-change: transform;
}

静态元素声明

CSS

/* 错误：元素不会变化 */
.static-text {
  will-change: transform;  /* 无意义 */
}

永久声明

CSS

/* 错误：从不移除 */
.animated {
  will-change: transform;
  /* 动画结束后仍保留 */
}

/* 正确：适时移除 */
.animated {
  will-change: transform;
  animation: slide 1s;
}

.animated:not(.animating) {
  will-change: auto;
}

过多属性

CSS

/* 错误：声明太多 */
.element {
  will-change: transform, opacity, filter, box-shadow;
}

/* 正确：只声明关键属性 */
.element {
  will-change: transform, opacity;
}

与触发回流重绘的关系

will-change不会阻止回流重绘

CSS

.element {
  will-change: width;  /* 无效：width仍触发回流 */
}

/* will-change只优化transform/opacity */

正确组合使用

CSS

/* 使用transform替代width变化 */
.element {
  will-change: transform;
  animation: grow 1s;
}

@keyframes grow {
  from { transform: scaleX(1); }
  to { transform: scaleX(2); }
}

触发回流重绘的操作

操作	触发回流	触发重绘
改变width/height	✓	✓
改变margin/padding	✓	✓
改变left/top	✓	✓
改变font-size	✓	✓
改变color	-	✓
改变background	-	✓
改变transform	-	-
改变opacity	-	-

will-change副作用

GPU内存占用

CSS

/* 每个will-change元素占用独立GPU纹理 */
.element {
  will-change: transform;
  /* GPU内存 = 元素尺寸 × 4字节(RGBA) */
}

/* 1920×1080元素 = 1920 × 1080 × 4 ≈ 8MB GPU内存 */

层爆炸风险

CSS

/* 多个元素声明will-change */
.list-item {
  will-change: transform;
}

/* 100个列表项 = 100个合成层 = 大量GPU内存 */

优化策略

CSS

/* 仅在需要时声明 */
.list-item:hover {
  will-change: transform;
}

/* 或限制数量 */
.list-item:nth-child(-n+5) {
  will-change: transform;
}

替代方案

使用transform: translateZ(0)

CSS

/* 隐式触发硬件加速 */
.element {
  transform: translateZ(0);
}

/* 无GPU内存预分配，但已提升为合成层 */

使用backface-visibility

JavaScript

.element {
  backface-visibility: hidden;
  /* 同样触发硬件加速 */
}

对比选择

方案	GPU预分配	控制时机	适用场景
will-change	是	精确	复杂动画
translateZ(0)	否	一次性	简单动画
backface-visibility	否	一次性	3D元素

调试方法

Chrome Layers面板

text

DevTools → More tools → Layers

查看：
- 合成层数量
- 每层内存占用
- will-change触发原因

性能监控

text

// 监控FPS
const fpsMeter = () => {
  let lastTime = performance.now();
  let frames = 0;

  requestAnimationFrame(() => {
    frames++;
    const now = performance.now();
    if (now - lastTime >= 1000) {
      console.log('FPS:', frames);
      frames = 0;
      lastTime = now;
    }
    fpsMeter();
  });
};

fpsMeter();

要点总结

will-change只对transform/opacity有效
动画开始前声明，结束后移除
避免全局声明和永久声明
每个will-change元素占用独立GPU纹理
监控合成层数量和GPU内存使用
简单动画可用translateZ(0)替代

📝 发现内容有误？点击此处直接编辑