用于衡量单个CSS规则对页面呈现速度的影响的工具？

Question

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

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

虽然这确实提供了我的页面类的测量，但我更感兴趣的是比较给定元素的rule1和rule2。不过，下面是数据。我的网站使用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框阴影会导致“性能问题”，但在此上下文中，他们更具体地讨论了页面响应或页面响应用户操作的速度。 / p>

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

作为一个例子，有研究表明，在某些情况下，CSS3盒阴影可能导致页面上的不平滑滚动或用户操作和事件完成之间的一些延迟时间。测试这个的最简单方法是手动测试带有和不带盒阴影的页面，以便您可以直观地看到差异。现在，如果您知道盒子阴影会导致某些问题，那么您可能会认为这可能会被测试，但对于那些已经发布过他们的研究和发现特定问题的人来说，这几乎肯定不是他们所看到的首先。这是他们通过反复试验发现的东西。

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