CSS3过渡会减慢网站的速度吗？

Question

我最近在我的网站上添加了CSS3转换。我不确定它是否可能会减慢我的网站速度，但是似乎所有的东西都闪烁，并且在转换和Flash视频中有这种“急动”行为。

我正在使用Mozilla Firefox 10.0.02。

我在CSS样式表中添加了以下内容：

*:link, *:visited, *:hover, *:active, *:focus {
    -webkit-transition: color .25s linear, background-color .25s linear, border-color .25s linear;
    -o-transition: color .25s linear, background-color .25s linear, border-color .25s linear;
    -moz-transition: color .25s linear, background-color .25s linear, border-color .25s linear;
    transition: color .25s linear, background-color .25s linear, border-color .25s linear;
}

您能告诉我是我的浏览器比较慢，还是我添加的CSS有问题？如果是后者，有什么证据呢？

谢谢！

- James Cazzetta

---

嗯，通常是浏览器变慢了，但有可能是CSS规则导致的。你试过删除这些规则看看是否会更快吗？这应该是采取的逻辑第一步。 - Pekka

哪些浏览器/用户代理会给您带来性能问题？Android在1.x和2.x版本中以其较差的CSS3过渡效果而闻名。 - darryn.ten

@pekka 看起来没有过渡更快。 - James Cazzetta

@darryn.ten 我编辑了我的问题，你会看到我正在使用Mozilla Firefox 10.0.02。 - James Cazzetta

这取决于您正在使用的浏览器及其环境。建议尝试其他浏览器，安装五大主流浏览器以进行测试是不会有坏处的。如果您有类似的问题，请检查您的计算机配置。如果可以的话，能否提供一下电脑配置呢？ - Joseph

Answer 1

那是因为你在这些状态下添加了转换效果。我建议进行更改：

我会做出以下修改：

*:link, *:visited, *:hover, *:active, *:focus {

to

a:link, a:visited, a:hover, a:active, a:focus, [...Other elements...] {

这样更加精准。否则，当您移动鼠标时，会触发悬停状态，导致浏览器必须检查过渡效果。

- Rich Bradshaw

---

我必须向那些不了解的人指出，导致性能问题的不是*选择器；（它应该被优化为选择器）瓶颈完全在于将过渡应用于太多元素，并因此尝试动画化太多东西。您可以使用通用选择器执行各种基本操作，浏览器也会很好地跟上，但过渡代价高昂。 - BoltClock

谢谢你的回答。这些过渡是否会减慢加载时间？也就是说，当客户端首次发出请求时，页面加载需要更长的时间吗？ - Will

并不完全是这样。例如，您可以使用Chrome中的开发人员工具来测量它，但您可能看不到太大的差异。当然，这取决于页面上正在发生的情况。 - Rich Bradshaw

Answer 2

任何类型的动画都会增加图形系统的负荷，但如果您将CSS转换和Flash等插件结合使用，则会使负载更加严重（因为必须组合层）。您的Flash wmode是否设置为透明？如果是，请尝试使用不透明，因为这将防止Flash动画关心底部发生的事情（从技术上讲，它成为视频驱动程序中的覆盖层）。

- SpliFF