CSS的速度

Question

这只是一个帮助我更好地理解CSS渲染的问题.

可以说我们有一百万行.

<div class="first">
    <div class="second">
        <span class="third">Hello World</span>
    </div>
</div>

哪个是将Hello World字体更改为红色的最快方法？

.third { color: red; }
div.third { color: red; }
div.second div.third { color: red; }
div.first div.second div.third { color: red; }

此外,如果中间的标签有唯一ID"foo",该怎么办？以上哪种CSS方法最快.

我知道为什么这些方法被使用等,我只是想更好地掌握浏览器的渲染技术,我不知道如何进行测试时间.

更新:很好的回答Gumbo.从它的外观来看,在常规站点中更快地完成标签的完整定义.因为它找到了父母并缩小了对找到的每个父母的搜索范围.

从某种意义上说,你可能会有一个非常大的CSS文件.

Answer 1

要记住两件事:

• 这将取决于CSS解析器/渲染引擎:即它随浏览器的不同而不同.

• 无论如何,CSS确实非常非常快,即使是人类观看时最慢的也不应该注意到

一般来说,最简单的事情是最快的(正如Gumbo很好地说明的那样),但是因为我们已经处于如此快速的环境中,所以不要认为你应该牺牲清晰度和适当的范围(低特异性就像让一切都公开一样).尽量避免*在任何地方:)

Answer 2

根据Mozilla开发人员中心的说法,这种情况下最有效的选择器很简单.third

事实上,他们明确地在那里声明"不要使用标签名称限定类规则".通常,为了获得最高效率,请使用匹配的最简单的选择器.这就是为什么.third跳动span.third的节拍.second span.third,等

我不知道Gumbo的结论是什么意思,但是Ólafur似乎从中得出结论,在选择器中使用更多的东西会使CSS解析更有效,事实上,它恰好相反(假设其他CSS)解析引擎与Mozilla的工作方式类似.)

Answer 3

您必须了解选择器的处理方式:

• .third:获取每个元素并检查类名third,
• div.third:获取每个DIV元素并检查类名third,
• div.second div.third:获取每个DIV元素,检查类名second,运行这些DIV元素并查找每个后代元素并检查类名third,
• div.first div.second div.third:获取每个DIV元素,检查类名first,运行这些DIV元素并查找每个后代元素,检查类名second,运行这些元素并最终检查类名third.

编辑    我不得不承认,上面的过程将是天真的方法,通常效率不高.实际上,有些实现从下到上而不是从上到下:

• div.first div.second div.third:获取每个DIV元素,检查类名third,获取DIV具有类名second的第一个DIV祖先,获得具有类名的第一个祖先first.