CSS的速度 [英] Speed of 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>

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

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; }

此外，如果在中间有标签的唯一ID为foo 。

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的渲染技术不知道如何进行一次测试。

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.

更新：
Nice回答Gumbo。
从它的外观，那么在一个普通的网站，它会更快，做一个标签的完整定义。因为它找到父母并缩小搜索每个父母的搜索。

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.

这可能是坏的，你会有一个非常大的CSS文件。

That could be bad in the sense you'd have a pretty large CSS file though.

推荐答案

需要记住两件事：

• p>

• This is going to depend on the CSS parser /rendering engine: i.e. it varies from browser to browser.

CSS是真的，真的，

CSS is really, really, really fast anyway, even at it's slowest the human watching shouldn't notice

一般来说，最简单的事情是最快的（因为Gumbo很好地说明了），但是因为我们已经在这样一个快速的环境中，不要认为你应该牺牲清晰度和适当的范围（低特异性就像使一切都公开）。只要避免 * 即可：）

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 :)

这篇关于CSS的速度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！