4

I need to use a rotation in our Spotify app. For this I use the following 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>

In Chrome (26.0.1410.43) there is no big change in the CPU usage (~3%). But in Spotify 0.8.8.459.g4430eae7 I get a permanent CPU usage between 50% and 100%. Besides this code the same happens for Spotify's native load throbber. My computer is a MacBook Pro 2.5 GHz Intel Core i5, 8 GB 1600 Mhz DDR3 main memory, Mac OS 10.8.1. How can I implement this rotation with less CPU usage?

4

2 回答 2

5

The version of Chromium in Spotify doesn't support hardware acceleration at all, therefore CSS transforms like that are going to incur a very significant overhead.

于 2013-04-11T15:20:03.780 回答
3

Try to force hardware acceleration:

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

Source: http://davidwalsh.name/translate3d

于 2013-04-11T12:21:18.420 回答