如何实现执行后台任务时不卡顿的CSS3不确定进度条？

你的观察非常准确——简单的旋转动画能流畅运行，而复杂的MD进度条会卡，核心原因在于动画是否运行在浏览器的合成线程（Compositor Thread）而非主线程。

为什么简单旋转不卡顿？ #

你写的旋转动画只用到了transform: rotate()，这个属性属于浏览器的合成友好属性：浏览器会把这类动画交给独立的合成线程处理，不需要占用主线程计算布局或绘制。哪怕主线程被繁重任务阻塞，合成线程依然能正常刷新动画，所以它不会卡。

而大多数MD不确定进度条的实现，要么用到了width、left这类会触发重排（Reflow）的属性，要么动画的关键帧设计需要主线程参与计算元素的位置/大小变化，一旦主线程被后台任务占满，动画自然就停了。

解决方案一：用合成友好属性重构MD进度条动画 #

下面是一个纯CSS实现的MD不确定进度条，完全基于transform（translateX、scaleX）实现，不涉及任何会触发重排的属性，同时通过will-change: transform告诉浏览器提前为动画分配合成资源：

/* 容器，控制进度条的整体样式 */
.md-progress-indeterminate {
  width: 100%;
  height: 4px;
  background-color: #e0e0e0;
  position: relative;
  overflow: hidden;
}

/* 动画元素，用两个伪元素实现双滑块效果 */
.md-progress-indeterminate::before,
.md-progress-indeterminate::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background-color: #2196f3;
  will-change: transform;
  animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}

.md-progress-indeterminate::after {
  animation-delay: 1.15s;
}

/* 完全基于transform的关键帧动画 */
@keyframes indeterminate {
  0% {
    transform: translateX(-100%) scaleX(0);
  }
  20% {
    transform: translateX(-100%) scaleX(0.5);
  }
  50% {
    transform: translateX(20%) scaleX(0.7);
  }
  80% {
    transform: translateX(100%) scaleX(0.5);
  }
  100% {
    transform: translateX(100%) scaleX(0);
  }
}

使用的时候只需要在HTML里加一个容器：

<div class="md-progress-indeterminate"></div>

这个实现的所有动画都由合成线程处理，哪怕主线程在跑繁重任务，进度条也能保持流畅。

解决方案二：把繁重任务移到Web Worker（根本解决） #

上面的动画优化是“治标”，如果你的后台任务本身是在主线程执行（比如大量DOM操作、复杂计算），哪怕动画流畅了，整个页面的交互还是会卡顿。根本解决办法是把繁重任务放到Web Worker中执行，让主线程只负责UI渲染和交互。

Web Worker是浏览器提供的独立线程，专门用来处理耗时任务，不会阻塞主线程。任务执行完成后，通过postMessage把结果传回主线程更新UI即可。

额外小技巧 #

• 给动画元素添加transform: translateZ(0)（或者will-change: transform）可以强制浏览器为元素创建独立的合成层，进一步优化动画性能。
• 避免在动画中使用box-shadow、opacity（虽然opacity现在大多也能合成，但复杂场景下还是可能触发绘制），尽量只依赖transform。

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