找出哪些CSS导致网页加载缓慢

Question

有没有工具可以找出导致页面加载缓慢的CSS？我很幸运地得到了某人在问题中回答我如何移除下面的CSS，这极大地提高了我的网站速度。我想知道还有什么其他可能会引起问题的地方。我希望能够粘贴我的CSS并展示一些性能验证工具显示哪些代码行可能会引起问题。

.ui-widget :active {
    outline: none
}

- Mike Flynn

---

盒子/文本阴影，动画，过渡，不透明度，RGBA颜色。 - dfsq

看起来你以前去掉CSS的经验更多是关于Javascript中的一个错误。老实说，这是非常罕见的情况，除非你的网站仍然存在性能问题，否则不必担心。即使你发现了一些"慢"代码，可能性是性能提升也会被忽略。如果你仍在寻找检查代码的工具，一个好的开始是：http://validator.w3.org/ - Dryden Long

那个 CSS 的移除显著提高了性能，否则我就不会发布这个问题了。 - Mike Flynn

太少了吧？就只有三个问题，加油吧伙计们。 - Mike Flynn

重新打开这个？？？？？？ - Mike Flynn

Answer 1

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

谷歌的PageSpeed工具类似：
https://developers.google.com/speed/pagespeed/

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

- Faust

---

好的工具，但它们是否涵盖了实际页面渲染？我认为这两个工具更关注页面的结构和传递内容，而不是浏览器获取所有所需内容后页面实际构建方式。 - Bubbles

Answer 2

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

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

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

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

- boothinator

Answer 3

Chrome曾经拥有这个功能，但他们认为这已不再必要。现代浏览器可以快速确定绝大多数规则，这意味着过度关注规则效率很可能会在时间和代码清洁度方面花费更多成本，而不是真正带来页面加速。详情请参见补丁说明。我认为Opera仍然具有此功能，但我没有在我正在输入的计算机上安装该浏览器。

正如上述案例所示，您不能完全忘记选择器。然而，这是一个非常简单的坏选择器的情况 - “.ui-widget：active”隐式使用通用选择器，这仍然被认为是一个相当糟糕的想法。分离的“：active”将匹配DOM中处于活动状态的任何元素，然后将检查它是否在具有“ui-widget”类的元素内。这种情况在Google高效CSS指南中得到了解决，并且由Chris Coyier更易接近地解释。

简而言之：目前没有很好的工具来解决这个问题，但幸运的是你不必像以前那样担心它。尽量避免使用通用选择器，不要过度指定样式，优先使用类和ID选择器而非元素类型。

- Bubbles