找出CSS正在减慢页面的速度

Question

有没有可以找出CSS减慢页面速度的工具？我有幸为我删除了question，因为我删除了下面的CSS，这大大提高了我网站的速度。我想知道还有什么可能导致问题。我想粘贴我的CSS，并有一些性能验证器显示哪些行可能会导致问题。

.ui-widget :active {
    outline: none
}

Answer 1

雅虎的YSlow是一个blrowser插件，适用于多个浏览器，可以分析任何加载的页面 http://developer.yahoo.com/yslow/

Google的PageSpeed Tools类似：
https://developers.google.com/speed/pagespeed/

另一个工具是CSSLint，但由于这些文章，我避免使用这个工具：
CSS Lint is harmful

Answer 2

CSS规则的大部分性能都是特定于渲染引擎的，但是一些通用指南适用于所有引擎。您可以找到一些信息here。

目标是避免低效的规则。 ID选择器规则始终有效，因为它们可以轻松编入索引。但是当您构建复杂的规则来指定具有大量元素或标记为最右侧选择器的类时，浏览器必须测试更多元素以确定该规则是否应该适用。

避免冗余也有帮助。由于HTML要求所有TD元素都在TR元素内，因此您不必在选择器中包含TR。

至于你指定的具体问题，可能是：active伪类只是一个昂贵的选择器来匹配。

Answer 3

Chrome曾经拥有此功能，但他们认为不再需要。绝大多数规则可以在现代浏览器中快速确定，这意味着对规则效率的过度关注可能会使您在时间和成本上花费更多。代码清洁度比它会给​​你实际页面加速。有关详细信息，请see the patch notes。我认为 Opera仍然有这个，但我没有在计算机上安装浏览器我正在输入它。

如上面的案例所示，你不能完全忘记选择者。但是，这是一个非常简单的错误选择器 - “.ui-widget：active”隐式使用通用选择器，这仍然被认为是一个非常糟糕的主意。分离的“：active”将匹配整个DOM中活动的任何元素，然后检查它是否在具有“ui-widget”类的元素中。这个案例包含在Google's efficient css guide和more approachably by Chris Coyier。

中

简而言之：没有很好的工具，但幸运的是，你不必像以前那样担心它。尽量避免使用通用选择器，不必要地具体化，并且在元素类型上支持类和id。