找出是什么 CSS 减慢了您的页面 [关闭]答案

【问题标题】：Find out what CSS is slowing down your page [closed]找出是什么 CSS 减慢了您的页面 [关闭]
【发布时间】：2013-11-21 04:24:52
【问题描述】：

是否有任何工具可以找出导致页面变慢的 CSS？我很幸运有人为我回答了question，因为我删除了下面的 CSS，这大大提高了我网站的速度。我想找出还有什么可能导致问题。我想粘贴我的 CSS 并让某种类型的性能验证器显示哪些行可能会导致问题。

.ui-widget :active {
    outline: none
}

【问题讨论】：

框/文本阴影、动画、过渡、不透明度、rgba 颜色。
看起来您之前删除 CSS 的经历更多是关于 Javascript 中的错误。老实说，这种情况非常罕见，除非您的网站仍然存在性能问题，否则我不会担心。即使您确实发现了一些“慢”代码，性能提升也很可能被忽视。如果您仍在寻找检查代码的东西，一个好的开始是：validator.w3.org
删除该 CSS 大大提高了性能，否则我不会发布这个问题。
广泛？只有三个问题，加油。
重新打开这个??????????

标签： javascript css performance

【解决方案1】：

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

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

另一个工具是CSSLint，但我避开了这个工具，因为有这样的文章：
CSS Lint is harmful

【讨论】：

不错的工具，但这些工具是否涵盖了实际的页面渲染？我认为这两者都更关心页面的结构和交付的内容，而不是一旦浏览器拥有所需的一切，页面实际上是如何构建的。

【解决方案2】：

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

目标是避免低效的规则。 ID 选择器规则总是有效的，因为它们很容易被索引。但是，当您构建复杂的规则来指定具有大量元素或标签的类作为最右边的选择器时，浏览器必须测试更多元素以确定是否应该应用该规则。

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

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

【讨论】：

【解决方案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 而不是元素类型。

【讨论】：