过渡 CSS 在 *:link,*:visited,*:hover,*:active,*:focus 上的性能答案

【问题标题】：Performance of transition CSS on *:link,*:visited,*:hover,*:active,*:focus过渡 CSS 在 *:link,*:visited,*:hover,*:active,*:focus 上的性能
【发布时间】：2013-10-31 05:41:29
【问题描述】：

我正在查看以下样式表 sn-p：

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

想知道性能影响是什么，尤其是在移动设备上？像“.ClassName:hover”这样更具体不是更好，还是性能差异没有问题？请问您的意见？

【问题讨论】：

过渡是在每个元素的基础上定义的。您的选择器可以很容易地简化为*，并且只要您在这些状态的相应属性中定义一些更改，您分配的转换就会在任何这些伪类适用时启动。

标签： css css-selectors css-transitions

【解决方案1】：

首先我想知道您为什么要使用它，您是否希望页面上的每个元素都应分配transition 用于颜色，border-color :hover，:active 状态。 ...？因为这将应用于所有元素，当hovered、focused、link 和visited 将应用于a 标签。

如果您想将上述样式应用于链接，您应该使用

a:link, a:visited ...

此外，当您使用* 时，它将成为您网页的昂贵选择器。所以只有在需要时才使用它。

^{1. Good Read For Selector Performance}
^{2. Testing Page Efficiency}

性能肯定会下降，与* 相比，使用特定（而不是过度特定）选择器将是一个更好的选择，尽管我仍然觉得您将使用的选择器不是您需要的，您必须针对@ 987654337@ 元素而不是所有元素。

【讨论】：

我在交付的作品中遇到了它并且正在徘徊......谢谢..

【解决方案2】：

任何使用 * 选择器都会导致渲染时间显着延长，因为页面上的每个元素都会匹配一个额外的项目，而选择器不够具体，需要更多的处理能力才能找到。它增加了 CSS 文件的解析时间，以及页面本身呈现之前的延迟。浏览器在一定程度上可以弥补代码，但即使在更好的浏览器上，它仍然会很痛苦。

在您的情况下，您选择的样式涉及伪类 hover、active 等。这些是基于事件的，因此您不仅需要阅读整个文档，而且实际上是在将事件绑定到它们，这将需要存储在内存中。

此外，样式本身就是一个过渡，调用这些事件时需要额外的处理能力。

另外，将过渡应用到伪类意味着它实际上甚至不起作用，因为在背景颜色已经改变之前不会应用过渡，除了 a[href] 项目，它已经有它与 *:link 选择器匹配。

这段代码要便宜得多，并且可以实现您想要做的事情：

a[href] {
        transition: color .25s linear, background-color .25s linear, border-color .25s linear;

}

a[href]:hover, a[href]:active, a[href]:focus {
    background-color: /* New colour */
    border-color: /* New colour */
    color: /* New colour */
}

即便如此，我有理由确定您可能不需要焦点，也许不需要活动的伪类。

【讨论】：

感谢事件监听绑定的解释，明白了。