CSS 的速度
这只是一个帮助我更好地理解 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; }
另外,如果中间有一个 at 标签,其唯一 id 为“foo”怎么办?上面哪种 CSS 方法是最快的。
我知道为什么使用这些方法等,我只是想更好地掌握浏览器的渲染技术,我不知道如何进行测试。
更新: 很好的答案秋葵。 从表面上看,在常规站点中完成标签的完整定义会更快。因为它找到了父母并缩小了对找到的每个父母的搜索范围。
不过,从某种意义上说,这可能很糟糕,因为您将拥有一个相当大的 CSS 文件。
This is just a question to help me understand CSS rendering better.
Lets say we have a million lines of this.
<div class="first">
<div class="second">
<span class="third">Hello World</span>
</div>
</div>
Which would be the fastest way to change the font of Hello World to red?
.third { color: red; }
div.third { color: red; }
div.second div.third { color: red; }
div.first div.second div.third { color: red; }
Also, what if there was at tag in the middle that had a unique id of "foo". Which one of the CSS methods above would be the fastest.
I know why these methods are used etc, im just trying to grasp better the rendering technique of the browsers and i have no idea how to make a test that times it.
UPDATE:
Nice answer Gumbo.
From the looks of it then it would be quicker in a regular site to do the full definition of a tag. Since it finds the parents and narrows the search for every parent found.
That could be bad in the sense you'd have a pretty large CSS file though.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
需要记住两件事:
这将取决于 CSS 解析器/渲染引擎:即它会因浏览器的不同而有所不同。
无论如何,CSS 真的、真的、真的快,即使是最慢的,人类观看者也不会注意到
一般来说,最简单的事情是最快的(正如 Gumbo 很好地说明的那样),但因为我们已经处于如此快的环境中,所以不要认为你应该牺牲清晰度和适当性范围界定(低特异性就像使一切公开)。尽可能避免
*
:)Two things to remember:
This is going to depend on the CSS parser /rendering engine: i.e. it varies from browser to browser.
CSS is really, really, really fast anyway, even at it's slowest the human watching shouldn't notice
In general the simplest things are the fastest (as Gumbo nicely illustrates), but because we're already in such a fast environment don't think that you should sacrifice clarity and appropriate scoping (low specificity is like making everything public sort of). Just avoid
*
wherever you can :)根据 Mozilla 开发人员中心,这种情况下最有效的选择器就是
。第三
事实上,他们明确指出,“不要用标签名称限定类规则”。一般来说,为了获得最大效率,请使用最简单的匹配选择器。这就是为什么
.third
击败span.third
击败.second span.third
等等。我不知道 Gumbo 的结论是什么,但 Ólafur 似乎从中得出的结论是,在选择器中使用更多内容可以使 CSS 解析更加高效,而事实上,情况正好相反(假设其他 CSS 解析引擎的工作方式与 Mozilla 类似。)
According to the Mozilla Developer Center, the most efficient selector for this case would be simply
.third
In fact, they state there, explicitly, "Don't qualify Class Rules with tag names". In general, for greatest efficiency, use the simplest selector that matches. That's why
.third
beatsspan.third
beats.second span.third
, etc.I can't tell what Gumbo's conclusion is meant to be, but Ólafur appears to be drawing the conclusion from it that using more stuff in the selector makes the CSS parsing more efficient, when, in fact, it's just the opposite (assuming other CSS parsing engines work similarly to Mozilla's.)
您必须了解选择器的处理方式:
.third
:获取每个元素并检查类名third
,DIV
元素并检查类名third
、div.second div .third
:获取每个DIV
元素,检查对于类名second
,运行这些并找到每个后代DIV
元素并检查类名third
、div.first div.second div.third
:获取每个DIV
元素,检查类名first
,运行这些并找到每个后代DIV
元素,检查类名第二
,运行这些,最后检查类名第三
。编辑 我必须承认,上述过程是幼稚的方法,通常效率不高。事实上,有些实现是从下到上而不是从上到下:
div.first div.second div.third
:获取每个DIV 元素,检查类名
third
,获取第一个具有类名second
的DIV
祖先,获取第一个DIV
祖先具有类名first
。You have to understand how the selectors are being processed:
.third
: get every element and check for a class namethird
,div.third
: get everyDIV
element and check for a class namethird
,div.second div.third
: get everyDIV
element, check for a class namesecond
, run through these and find every decendantDIV
element and check for a class namethird
,div.first div.second div.third
: get everyDIV
element, check for a class namefirst
, run through these and find every decendantDIV
element, check for a class namesecond
, run through these and finally check for a class namethird
.Edit I have to admit, that the procedure above would be the naive approach and is not generally efficient. In fact, there are implementations that go from bottom to top instead from top to bottom:
div.first div.second div.third
: get everyDIV
element, check for a class namethird
, get the firstDIV
ancestor that has a class namesecond
, get the firstDIV
ancestor that has a class namefirst
.我想说这取决于浏览器。没有什么比实验更好的了,在这种情况下,一个简单的 JavaScript 就可以了。
更新:我本来打算做这样的事情:
……但是正如annakata所说,不同选择器引起的时间差异似乎太小而无法测量。
I would say this depends on the browser. Nothing beats an experiment, in this case a simple JavaScript would probably do.
Update: I meant to do something like this:
…but the time differences caused by different selectors appear to be too small to measure, just as annakata said.