使用50％CPU的Bootstrap进度条动画

Question

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

Answer 1

我看到answer关于CSS动画的CPU使用情况，他们建议使用：

transform: translateZ(0);

  

这会将元素合成到他们自己的图层中（通过欺骗浏览器认为它将进行3D变换），并且在大多数情况下，浏览器应该利用GPU加速，减轻CPU的负担。对我来说，这减少了大约20％（几乎一半）