Question

我需要在Spotify应用中使用旋转。为此，我使用以下CSS：

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    @-webkit-keyframes rotate {
      from {
        -webkit-transform: rotate(0deg);
      }

      to {
        -webkit-transform: rotate(360deg);
      }
    }

    #entity {
      background-color: #000;
      width: 200px;
      height: 200px;
      -webkit-animation: rotate 3s infinite linear;
    }
  </style>
</head>
<body>
  <div id="entity"></div>
</body>
</html>

在Chrome（26.0.1410.43）中，CPU使用率没有大的变化（~3％）。但是在Spotify 0.8.8.459.g4430eae7中，我获得了50％到100％的永久CPU使用率。除了这个代码，Spotify的本机负载吞噬也会发生同样的情况。我的电脑是MacBook Pro 2.5 GHz Intel Core i5,8 GB 1600 Mhz DDR3主内存，Mac OS 10.8.1。如何以较少的CPU使用率实现此轮换？

Answer 1

Spotify中的Chromium版本根本不支持硬件加速，因此这样的CSS转换会产生非常大的开销。

Answer 2

尝试强制加速硬件：

 #entity {
   -webkit-transform: translate3d(0, 0, 0);
 }

来源：http://davidwalsh.name/translate3d

Spotify中CSS旋转的高CPU使用率

2 个答案: