如何测试CSS选择器的性能？ [英] How to test CSS selector performance?

问题描述

我将如何测试不同CSS选择器的性能基准测试？我已阅读过这篇文章， a>。但是我不知道这是否适用于我的网站，因为他使用了一个包含20000个类和60000个DOM元素的测试页。

我应该关心，性能真的

例如，我喜欢这样做...

  .navbar {background：gray; } 
 .navbar> li {display：inline; background：#ffffff; } 
 
< ul class =navbar> 
< li>菜单1< / li> 
< li>菜单2< / li> 
< li>菜单3< / li> 
< / ul> 
  

...但我可以这样做...

  .navbar {background：gray; } 
 .navbar-item {display：inline; background：#ffffff; } 
< ul class =navbar> 
< li class =navbar-item>菜单1< / li> 
< li class =navbar-item>菜单2< / li> 
< li class =navbar-item>菜单3< / li> 
< / ul> 
  

有人会说（可能是对的）第二个选项会更快。

但是如果将所有页面中的第二个方法相乘，我会看到以下缺点：

1. 网页大小会增加，因为所有具有类别的元素


2. css类的数量可能会非常大，这将需要更多的css类解析






我的页面似乎〜〜8KB，〜1000个DOM元素。





所以我真正的问题是如何创建一个测试平台，我可以根据现实的网页大小策略测试性能增量？具体如何知道一个页面显示需要多长时间？ javascript？





欢迎帮助和纯粹的意见。

解决方案

查看Firefox的 Page Speed 扩展程序。一旦你为一个页面运行它，在使用高效的CSS选择器下，它给你一个有问题的CSS选择器的列表以及简要的解释。





此外，Chrome还有另一个扩展程序 - Speed Tracer 。除此之外，它还提供了对CSS风格重新计算和选择器匹配所花费的时间的深入了解。这可能就是你要找的。


How would I go about testing the performance benchmarks of different css selectors? I've read articles like this. But I don't know if it is applicable to my website because he used a test page with 20000 classes and 60000 DOM elements.

Should I even care,does performance really get downgraded that much based upon the css strategy you take?

Fo example, I like doing this ...

.navbar { background:gray; }
.navbar > li { display:inline;background:#ffffff; }

<ul class="navbar">
  <li>Menu 1</li>
  <li>Menu 2</li>
  <li>Menu 3</li>
</ul>

... but I could do this ...

.navbar { background:gray; }
.navbar-item { display:inline;background:#ffffff; }
<ul class="navbar">
  <li class="navbar-item">Menu 1</li>
  <li class="navbar-item">Menu 2</li>
  <li class="navbar-item">Menu 3</li>
</ul>

Some would say (and might be right) that the second option would be faster.

But if you multiply the second method across all pages I see the following disadvantages:

1. The page size will increase because all the elements having classes
2. Number of css classes can get quite large which would require more css class parsing

My pages seem to be ~ 8KB with ~1000 DOM elements.

So my real question is how do I create a test bed where I could test performance deltas based on strategy taken for realistic web page sizes? Specifically how do i know how long it takes for a page to be displayed? javascript? how exactly?

Help and just plain opinions are welcome!

解决方案

Check out the Page Speed extension for Firefox. Once you run it for a page, under "Use efficient CSS selectors" it gives you a list of the offending CSS selectors along with brief explanations.

Also, there's another extension for Chrome - Speed Tracer. Amongst other things, it offers insight into time spent on CSS style recalculation and selector matching. This may just be what you are looking for.

这篇关于如何测试CSS选择器的性能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！