测量单个CSS规则对页面呈现速度的影响的工具？ [英] Tools to measure the effect of individual CSS rules on page rendering speed?

问题描述

我看到LinkedIn的新的HTML5 iPad应用程序摆脱了圆角边框，即 border-radius：X px ，以提高他们的页面呈现速度。这似乎只能提供一个小的改进。我想知道更一般的如何衡量各种CSS规则对网站性能的影响。 CSS是否有 microtime（）？

I saw that LinkedIn's new HTML5 iPad App got rid of rounded borders, i.e., border-radius:X px, to improve their page rendering speed. This seems like it could only provide a minor improvement. I'm wondering more generally how to measure the effect of various CSS rules on a website's performance. Is there a microtime() for CSS?

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

Update I ran the performance test suggested by @valentinas: http://andy.edinborough.org/CSS-Stress-Testing-and-Performance-Profiling

虽然这提供了我的页面的类的测量，我更感兴趣比较rule1和rule2给定的元素。但是，下面是数据。我的网站使用Twitter Bootstrap.css和其许多类选择器。这里是我觉得很难解释的数据的快照。可能有人帮助这个作为起点？

While this does provides measurements for my page's classes, i'm more interested in comparing rule1 vs. rule2 for a given element. Still, below is the data. My site uses Twitter Bootstrap.css and many of its class selectors. Here's a snapshot of the data which I find hard to interpret. Might someone help with this as a starting point?

....
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

推荐答案

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

There are a number of tools available to test the actual performance implications of loading and applying CSS. That said, with the things you specifically mentioned, they are particularly difficult to test.

经验丰富的CSS开发人员会遇到的研究表明，圆角的corers和CSS3 box-shadows导致性能问题，但在这种情况下，他们更具体地谈论页面响应性或页面对用户操作的响应速度。

Experienced CSS developers will have come across studies showing that rounded corers and CSS3 box-shadows can cause 'performance issues', but in this context they are more specifically talking about page responsiveness or how quickly the page responds to user actions.

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

Let me explain that in more detail. When talking about how fast a page renders or how long it takes for CSS and image assets to download and be available to the client, there are clear metrics that many different tools can provide. HTTP request and response times are measurable, as is the time from initial request to DOM ready. The problem is that all of these easily measurable things have already happened when you start looking at page responsiveness. Those issues will be related to your specific applications features, functionality and styling and can only be tested in an application specific way.

例如，在某些上下文中，CSS3框阴影可能导致页面上的非平滑滚动或用户操作和事件完成之间的一些滞后时间。测试这个的最简单的方法是手动测试带有和没有box-shadow的页面，这样你可以看到差异。现在，如果你知道box-shadow已知会导致某些问题，这可能是你想要测试的东西，但对于那些已经发表了他们的研究和结果的人，这几乎肯定不是他们看的首先。这是他们通过尝试和错误发现的东西。

As an example, there are studies that have shown that in certain contexts, CSS3 box-shadows can cause non-smooth scrolling on a page or some lag time between user action and event completion. The easiest way to test this would be to manually test the page with and without the box-shadow so that you can visually see the difference. Now, if you know that box-shadow is known to cause certain issues, this might be something you would think to test, but for the people that have published their studies and findings on that particular issue, this is almost certainly not what they looked at first. It was something they discovered through trial and error.

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

In the end, the real answer is experience: having worked through issues and adding to your own collective knowledge. Reading blogs and other resources that discuss these issues can help with that.

这篇关于测量单个CSS规则对页面呈现速度的影响的工具？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！