css - 衡量单个 CSS 规则对页面渲染速度影响的工具？

Question

我看到 LinkedIn 的新 HTML5 iPad 应用程序取消了圆 Angular 边框，即 border-radius:X px ，提高页面渲染速度。这似乎只能提供很小的改进。我更想知道如何衡量各种 CSS 规则对网站性能的影响。有没有microtime()对于CSS？

更新我运行了@valentinas建议的性能测试:http://andy.edinborough.org/CSS-Stress-Testing-and-Performance-Profiling

虽然这确实为我的页面类提供了测量值，但我更感兴趣的是比较给定元素的规则 1 和规则 2。不过，下面是数据。我的网站使用 Twitter Bootstrap.css 及其许多类选择器。这是我发现很难解释的数据快照。有人可以帮助以此作为起点吗？

....
Selector          # Elms.  # Child.     Delta   Total
Removing #back-top  1   2   saves   7.17ms  3.90ms
Removing .container-fluid   1   414 saves   7.15ms  3.93ms
Removing .oGreen    1   0   saves   7.14ms  3.94ms
Removing .row-fluid 2   316 saves   7.07ms  4.00ms
Selectors Tested:   128
Baseline Time:  11.08ms
Num. Tests: 120

Answer 1

有许多工具可用于测试加载和应用 CSS 的实际性能影响。也就是说，对于您特别提到的事情，它们特别难以测试。

经验丰富的 CSS 开发人员会发现研究表明圆形核心和 CSS3 框阴影可能会导致“性能问题”，但在这种情况下，他们更具体地讨论页面响应能力或页面对用户操作的响应速度。

让我更详细地解释一下。当谈论页面渲染速度或 CSS 和图像资源下载并可供客户端使用需要多长时间时，许多不同的工具可以提供明确的指标。 HTTP 请求和响应时间是可测量的，从初始请求到 DOM 准备就绪的时间也是如此。问题是，当您开始查看页面响应能力时，所有这些容易衡量的事情都已经发生了。这些问题将与您的特定应用程序特性、功能和样式相关，并且只能以特定于应用程序的方式进行测试。

例如，有研究表明，在某些情况下，CSS3 框阴影可能会导致页面滚动不顺畅或用户操作与事件完成之间出现一些滞后时间。测试这一点的最简单方法是手动测试带有和不带有框阴影的页面，以便您可以直观地看到差异。现在，如果您知道已知 box-shadow 会导致某些问题，那么您可能会考虑测试这一点，但对于那些就该特定问题发表研究和发现的人来说，这几乎肯定不是他们看起来的样子首先。这是他们通过反复试验发现的。

最后，真正的答案是经验:解决问题并增加您自己的集体知识。阅读讨论这些问题的博客和其他资源可以对此有所帮助。