如何避免CSS无限动画长期运行后出现卡顿？

我有一段用于触发D3图表路径动画的CSS代码：

.link {
    stroke-dasharray: 4;
    stroke-dashoffset: 40;
    animation: dash 20s linear infinite;
}

@keyframes dash {
    from {
      stroke-dashoffset: 360;
    }
    to {
      stroke-dashoffset: 40;
    }
 }

注：我的整个图表中有多条路径运行上述动画，动画为持续循环效果。

问题描述 #

长时间运行（几小时或一天）后，动画会变慢，标签页出现卡顿，刷新页面后恢复正常，同时Chrome提示内存占用过高。

尝试过的优化方案 #

我尝试添加GPU加速相关属性，但未带来明显改善，动画仍会在几小时后变慢：

.link {
    stroke-dasharray: 4;
    stroke-dashoffset: 40;
    animation: dash 20s linear infinite;
    /* 尝试启用GPU加速 */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    will-change: transform;
}

请问我哪里操作有误？

问题分析与解决方案 #

你的核心问题在于用stroke-dashoffset做动画时，浏览器会持续重绘路径而非复用GPU缓存，加上多条路径同时运行，长时间积累导致渲染线程过载或内存泄漏。之前添加的transform: translateZ(0)没起作用，是因为动画的目标属性是stroke-dashoffset而非transform，GPU加速没有作用在实际动画的属性上。

优化方向1：改用GPU友好的动画属性

把stroke-dashoffset的动画替换为transform类属性（浏览器对transform的GPU优化支持更完善），可以通过两层路径模拟原动画效果：一层静态的虚线背景，一层遮罩路径通过transform: translateX()移动，实现相同视觉效果但避免频繁重绘：

/* 静态虚线背景 */
.link-bg {
  stroke-dasharray: 4;
  stroke: #原路径颜色;
}
/* 移动遮罩 */
.link-mask {
  stroke: #背景色;
  animation: mask-move 20s linear infinite;
  transform-origin: 0 50%;
}

@keyframes mask-move {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

优化方向2：修复动画循环的精度问题

原动画中stroke-dashoffset从360到40，循环时会因浮点精度累积增加浏览器计算负担。改成无缝循环的动画逻辑，让起始和结束状态的差值刚好是stroke-dasharray的整数倍，避免累积误差：

.link {
  stroke-dasharray: 4;
  stroke-dashoffset: 4;
  animation: dash 20s linear infinite;
}

@keyframes dash {
  to {
    stroke-dashoffset: -4; /* 与初始值差刚好等于dasharray大小，无缝循环 */
  }
}

这种循环逻辑没有状态跳变，浏览器更容易优化渲染流程。

优化方向3：修正will-change的目标属性

如果坚持使用stroke-dashoffset动画，will-change应该指向实际动画的属性而非transform，让浏览器提前针对该属性做优化：

will-change: stroke-dashoffset;

注意不要滥用will-change，它会让浏览器提前分配资源，过多使用反而会增加内存占用。

优化方向4：减少不必要的渲染压力

如果图表中有大量路径：

• 对不可见的路径暂停动画（使用animation-play-state: paused）
• 动态移除不再需要的路径元素
• 合并重复的路径渲染逻辑

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