2

我看到LinkedIn的新HTML5 iPad App去掉了圆角边框，即，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
4

1 回答 1

2

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

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

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

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

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

于 2012-05-03T22:10:21.647 回答