html 选择器怎么看,html – 如何测试CSS选择器的性能？

我将如何去测试不同css选择器的性能基准？我已经阅读了像

this这样的文章。但是我不知道它是否适用于我的网站，因为他使用了20000个类和60000个DOM元素的测试页。

我是否应该关心，性能是否真的根据您采用的css策略进行降级？

例如，我喜欢这样做

.navbar { background:gray; }

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

• Menu 1
• Menu 2
• Menu 3

…但我可以做到这一点

.navbar { background:gray; }

.navbar-item { display:inline;background:#ffffff; }

• Menu 1
• Menu 2
• Menu 3

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

但是，如果您在所有页面上乘以第二种方法，我看到以下缺点：

>页面大小会增加，因为所有元素都有类

> css类的数量可以变得相当大，这将需要更多的css类解析

我的页面似乎是〜8KB与〜1000 DOM元素。

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

帮助和只是明白的意见是受欢迎的！