Question

虽然这可能会导致一个简单的是或否答案，但无论如何我都会这样做

考虑以下示例：

HTML

<html>
    <head>
    </head>
    <body>
        <div class="foo">
            <span class="bar">Hello world!</span>
            <p>Some really interesting text.</p>
        </div>
    </body>
</html>

CSS

html {
    /* some css */
}
body {
    /* some css */
}
div.foo {
    /* some css */
}
div.foo span.bar {
    /* some css */
}
div.foo p {
    /* some css */
}

css规则出现的顺序是否会影响浏览器如何（快速）呈现页面？（在这个例子中它并不重要，但考虑一个带有html和css负载的真实网站）

因此，上述css脚本将比以下内容更快或更轻松地呈现：

div.foo p {
    /* some css */
}
div.foo span.bar {
    /* some css */
}
div.foo {
    /* some css */
}
body {
    /* some css */
}
html {
    /* some css */
}

浏览器在乎吗？我们应该吗？

在询问之前阅读：

Answer 1

我不能说明与速度相关的规则的顺序。

但是，由于 CSS 代表层叠样式表，我认为这是一个没有实际意义的事，因为规则的顺序确实很重要。所以你不一定可以自由地移动它们。当然，除非您持续提供更具体的选择器（即html body div.foo），我认为这会对性能产生影响。如果没有其他文件大小。

最后，请记住过早优化是所有邪恶的根源。此外，还有其他事情会对速度（缩小，静态域等）产生比规则顺序更大的影响。更不用说代码可读性还有待说明。

Answer 2

选择器的重要性很重要，添加类或ID或父元素等详细信息会增加该规则对其他规则的重要性。

此外，它可能会或可能不会降低浏览器必须解释它的速度，但肯定会增加CSS文件的大小以便下载并可能被缓存（并非所有手持设备缓存文件都大于a指定大小）。

CSS selectors specificity

Answer 3

将类和ID严格键入特定元素类型通常不是一个好习惯。

div.foo {}

仅适用于Div。然后你不能在其他地方重用那种风格，除非它是一个Div元素。

.foo { /* Base Style */ }
div.foo { /* Specific to if a DIV is used */ }

这是一种稍好的方法。

Answer 4

经过一些测试和阅读后，我得出以下结论，没有，没关系。即使经过一些“极端”测试，我也找不到任何支持订单重要性的想法。

没有'闪烁的无格式内容'或类似内容，只是花了更长的时间来加载页面（方式更长：D）

测试我跑了我创建了一个包含60.000 div元素的测试页面，每个元素都有一个唯一的ID属性。这些ID中的每一个都有自己的css规则适用于它。下面我有一个带有CLASS属性的单个span元素，它也有一个链接到它的css规则。

这些测试创建了一个2MB的html文件，相应的css文件为6MB。

起初我尝试使用1.000.000 div和css规则进行这些测试，但Firefox没有批准并开始哭泣，请求我停止。

我使用以下简单的php片段生成了这些元素及其CSS。

<?PHP

    for ($i = 0; $i < 60000; $i++) {
        echo "
#test$i {
    position: absolute;
    width: 1px;
    height: 1px;
    top: " . $i . "px;
    left: 0;
    background: #000;
} <br />
";
    }

?>

并且

<?PHP

    for ($i = 0; $i < 60000; $i++) {
        echo "
<div id=\"test$i\"></div>
";
    }

?>

之后将结果放入html和css文件中以检查结果。

请注意，我的浏览器（Firefox 5）真的不喜欢我玩这个，它确实产生了输出的一些问题，偶尔这个程序没有响应消息也不怕显示它的脸。

这些测试是在本地主机上运行的，由一个简单的XAMPP安装运行，外部服务器可能会导致不同的结果集，但我目前无法测试它。

我在上面测试了一些变体：

在所有生成的div之前放置元素中间和结尾
在中间或结尾放置span的css定义的css文件。

哦，我可以建议：http://www.youtube.com/watch?v=a2_6bGNZ7bA虽然它并没有完全涵盖这个问题，但它确实提供了一些有趣的细节，关于Firefox（以及可能的其他浏览器）如何使用我们投入的东西。

Answer 5

顺序与加载速度无关，只有当样式向下移动时才有意义，所以你不能无缘无故地移动它们。使用ID可能比使用类更快，但您只能在页面上拥有一个ID。加快速度的最佳方法是搜索具有类但仅使用一次的内容，并将其更改为ID。

Answer 6

我会说按顺序排列它们总是最好的 - 所以HTML是最高的，然后是body，然后是它的子规则。

CSS样式表中的规则顺序是否会影响渲染速度？

6 个答案: