CSS动画组合在Chrome浏览器中严重卡顿问题求助

问题背景 #

同时运行文本text-shadow闪烁动画和背景SVG波浪动画时，Chrome中出现严重卡顿，Firefox卡顿较轻，且文本闪烁的时刻波浪动画卡顿尤为明显。

卡顿原因分析 #

• text-shadow动画的重绘开销：text-shadow属于paint类属性，动画切换时会触发频繁的页面重绘。Chrome对多图层重绘的处理开销高于Firefox，大量叠加的阴影效果会进一步加重主线程负担。
• 波浪动画的布局触发：原代码中波浪动画使用margin-left属性，该属性动画会触发页面布局（layout）计算——每帧都要重新计算元素位置和页面布局，这是浏览器性能开销最大的操作之一。当text-shadow的重绘和margin-left的布局计算叠加时，主线程被占满，导致动画卡顿。
• 峰值资源冲突：文本闪烁的时刻正好是text-shadow重绘的资源峰值，此时主线程无法及时处理波浪动画的布局任务，卡顿现象被放大。

优化方案 #

1. 替换text-shadow为GPU加速的阴影实现 #

用filter: drop-shadow()配合伪元素模拟闪烁，filter可被GPU加速，性能远优于text-shadow：

/* 优化后的霓虹文本动画 */
#flicker {
  font-size: 36px;
  color: white;
  position: relative;
}

#flicker::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  /* 用drop-shadow模拟多层霓虹效果 */
  filter: drop-shadow(0 0 4px #fff)
          drop-shadow(0 0 11px #fff)
          drop-shadow(0 0 19px #fff)
          drop-shadow(0 0 40px #B0D9DD)
          drop-shadow(0 0 80px #B0D9DD)
          drop-shadow(0 0 90px #B0D9DD)
          drop-shadow(0 0 100px #B0D9DD)
          drop-shadow(0 0 150px #B0D9DD);
  animation: flicker-text 1.5s infinite alternate;
}

@keyframes flicker-text {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    opacity: 1;
  }
  20%, 24%, 55% {
    opacity: 0;
  }
}

对应的HTML修改：

<p id="flicker" data-text="This is some test text">This is some test text</p>

2. 波浪动画改用transform实现 #

将margin-left替换为transform: translateX()，transform属于合成（composite）属性，由GPU处理，不会触发布局或重绘：

/* 优化后的波浪动画 */
.wave {
  background: url(//dd7tel2830j4w.cloudfront.net/f1659025056348x434203136138475760/wave.svg) repeat-x;
  position: absolute;
  top: -198px;
  width: 6400px;
  height: 198px;
  animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
  transform: translate3d(0, 0, 0); /* 强制开启GPU加速 */
}

.wave:nth-of-type(2) {
  top: -175px;
  animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) -0.125s infinite, swell 7s ease -1.25s infinite;
  opacity: 1;
}

@keyframes wave {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-1600px);
  }
}

@keyframes swell {
  0%, 100% {
    transform: translate3d(0, -25px, 0);
  }
  50% {
    transform: translate3d(0, 5px, 0);
  }
}

3. 额外性能增强 #

给动画元素添加will-change属性，提示浏览器提前分配GPU资源：

#flicker::after, .wave {
  will-change: transform, opacity;
}

优化效果 #

修改后，两个动画均由GPU加速处理，不会占用主线程资源，Chrome和Firefox中都能流畅运行，文本闪烁时波浪动画不再出现卡顿。

内容的提问来源于stack exchange，提问作者Jonah