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

【问题标题】：Does the CSS3 transition slow down a website?CSS3 过渡会减慢网站速度吗？
【发布时间】：2012-10-30 20:15:00
【问题描述】：

我目前已将 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，如果是，那么证据是什么？

谢谢！

【问题讨论】：

嗯，你的浏览器总是很慢，但也有可能是 CSS 规则造成的。您是否尝试过删除规则以查看它是否变得更快？这将是合乎逻辑的第一步
哪些浏览器/UA 性能不佳？ Android 以其在 1.x 和 2.x 中糟糕的 CSS3 过渡而闻名
@pekka 没有转换似乎更快..
@darryn.ten 我编辑了我的问题，你会看到我使用的是 Mozilla Firefox 10.0.02
取决于很多，尤其是浏览器上运行的内容。尝试其他浏览器，安装所有 5 个主要浏览器以进行测试并没有什么坏处。检查您是否有类似的问题。另外，它可能是您的 PC。眼镜？如果你不介意的话。

标签： performance css css-transitions transition

【解决方案1】：

那是因为您已经为这些状态的所有内容添加了转换。

我会改变：

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

到

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

所以它更有针对性。否则，当您移动鼠标时，会触发悬停状态，导致浏览器必须检查过渡。

【讨论】：

我必须指出（对不了解的人）导致性能问题的不是 * 选择器；（应该优化无论如何选择器）瓶颈完全在于将过渡应用于太多元素，并因此尝试为太多事物设置动画。你可以用通用选择器做各种基本的事情，浏览器也能赶上，但 transitions 成本很高。
感谢您的回答。转换是否会减慢 load 时间？如，当客户端第一次发出请求时，加载页面需要更长的时间吗？
不是真的没有。例如，您可以使用 Chrome 中的开发工具对其进行测量，但您可能不会看到太大差异。这当然取决于您页面上发生的确切情况。

【解决方案2】：

任何类型的动画都会增加图形系统的负载，但如果您将 CSS 过渡和 Flash 等插件结合使用，则负载会变得更糟（因为必须合并图层）。你的闪光灯 wmode 设置为透明吗？如果是这样，请尝试使用 opaque，因为这将阻止 flash 动画关心下面发生的事情（从技术上讲，它会成为视频驱动程序中的叠加层）。

【讨论】：