微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

html – CSS样式表中的规则顺序是否影响渲染速度?

虽然这可能会导致一个简单的是或否答案我会去,它反正

请考虑以下示例:

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 */
}

浏览器是否关心?
我们应该吗?

在询问前阅读:

> Is this how you would structure your CSS stylesheet?
> What’s the best way to organize CSS rules?
> How do browsers read and interpret CSS?

解决方法

我不能说这个规则的顺序与速度有关.

然而,由于CSS代表级联样式表,我认为它是一个模糊点,因为您的规则的顺序是重要的.所以你不一定有自由地将它们自由移动.除非您当然会提供不断更具体的选择器(即html body div.foo),我认为这将具有性能影响.如果没有别的文件大小.

最后,请记住,过早优化是所有邪恶的根源.此外,还有其他一些事情会比规则顺序影响速度(缩小,静态域等).更不用说代码可读性有待进一步说明.

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐