jquery - Bootstrap 进度条动画使用 50% CPU

Question

我的网站上有几个进度条 <div class="progress-bar progress-bar-striped active"></div> .
这些进度条占用了大约 50% 的 CPU。
当我删除类(class)时 active从所有进度条来看，CPU 急剧下降。
我想要不占用太多 CPU 的动画进度条。
这可能吗？

Answer 1

我看到一个 answer关于 CSS 动画的 CPU 使用率，他们建议使用:

transform: translateZ(0);

This will composite the elements into their own layers (by tricking the browser into thinking it will be doing 3D transforms) and the browser should, in most cases, take advantage of GPU acceleration, lessening the burden on the CPU. For me this cut it down by about 20% (almost half)