Spotify 中 CSS 轮换的高 CPU 使用率
Posted
技术标签:
【中文标题】Spotify 中 CSS 轮换的高 CPU 使用率【英文标题】：High CPU usage with CSS rotation in Spotify 【发布时间】：2013-04-03 15:17:53 【问题描述】：我需要在我们的 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 使用率实现这种轮换？
【问题讨论】：
Spotify 内部不使用 Chrome。可能使用一些自定义的其他 Webkit 实现，其性能不如 chrome。 【参考方案1】：Spotify 中的 Chromium 版本根本不支持硬件加速，因此像这样的 CSS 转换会产生非常大的开销。
【讨论】：
【参考方案2】：尝试强制硬件加速：
#entity
-webkit-transform: translate3d(0, 0, 0);
来源：http://davidwalsh.name/translate3d
【讨论】：
以上是关于Spotify 中 CSS 轮换的高 CPU 使用率的主要内容，如果未能解决你的问题，请参考以下文章