CSS样式表中的规则顺序会影响渲染速度吗？ [英] Does the order of rules in a CSS stylesheet affect rendering speed?
问题描述
虽然这可能会导致一个简单的是或否的答案，我仍然会去。
请考虑以下示例：
HTML
< html>
< head>
< / head>
< body>
< div class =foo>
< span class =bar> Hello world！< / span>
< p>一些真正有趣的文字。< / 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 * /
}
浏览器关心吗？
我们应该吗？
在询问前阅读：
没有闪光的内容它只是加载页面的方式更长（方式更长：D）
测试我运行
我创建了一个测试页面与60.000 div元素，唯一ID属性。每个ID都有自己的css规则。下面我有一个具有CLASS属性的单个span元素，它也有一个css规则链接到它。
这些测试创建了一个2MB的html文件， css文件6MB。
一开始我用1.000.000 divs和css规则尝试这些测试，但是Firefox没有批准，开始哭泣，要求我停止。 / p>
我用以下简单的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）真的不喜欢我玩弄这个，它真的有一些问题生成输出，偶尔这个程序没有响应消息不害怕显示它的脸。这些测试在localhost上运行，通过简单的XAMPP安装运行，可能外部服务器导致不同的结果集，但我目前无法测试。
我测试了以上的几个变体：
- 将元素放置在所有生成的div之前，在
中间和结尾 - 将span的css定义放在中间或结尾
的css文件。
我可以建议： http://www.youtube.com/watch?v=a2_6bGNZ7bA ，但它不完全涵盖这个问题，它提供了一些有趣的细节，如何Firefox （以及可能的其他浏览器）处理我们抛出的东西。
While this could possibly result in a simple yes or no answer I'll go for it anyway
Consider the following example:
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 */
}
Will the order in which css rules appear, have any effect on how (fast) the browser can render the page? ( in this example it won't really matter, but consider a real website with loads of html and css )
So the above css script will render faster or easier for the browser than :
div.foo p {
/* some css */
}
div.foo span.bar {
/* some css */
}
div.foo {
/* some css */
}
body {
/* some css */
}
html {
/* some css */
}
Do browsers care? Should we?
Read before asking:
- 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?
After some more testing and reading I came to the following conclusion, no, it does not matter. Even after some ‘extreme’ testing, I could not find anything that supports the idea that the order matters.
There were no 'flashed of unstyled content' or the likes, it just took way longer to load the page ( way way longer :D )
Tests I ran I created a test page with 60.000 div elements, each having a unique ID attribute. Each of these ID’s had their own css rule applied to it. Below that I had a single span element with a CLASS attribute, which was also had a css rule linked to it.
These tests created a html file of 2MB with a corresponding css file of 6MB.
At first I attempted these tests with 1.000.000 divs and css rules, but Firefox did not approve and started crying, begging me to stop.
I generated these elements and their css with the following simple php snippets.
<?PHP
for ($i = 0; $i < 60000; $i++) {
echo "
#test$i {
position: absolute;
width: 1px;
height: 1px;
top: " . $i . "px;
left: 0;
background: #000;
} <br />
";
}
?>
And
<?PHP
for ($i = 0; $i < 60000; $i++) {
echo "
<div id=\"test$i\"></div>
";
}
?>
The result was put in a html and css file afterwards to check the results.
Mind you, my browser ( Firefox 5 ) really did not appreciate me playing around with this, it really had some issues generating the output, the occasional this program is not responding message was not afraid to show it's face.
These tests were ran on a localhost, ran by a simple XAMPP installation, it might be possible that external servers result in a different resultset, but I am currently unable to test that.
I tested a few variations on the above:
- Placing the element before all the generated divs, in the middle and at the end
- Placing the span’s css definition before, in the middle or at the end of the css file.
Oh and may I suggest: http://www.youtube.com/watch?v=a2_6bGNZ7bA while it doesn't exactly cover this question, it does provide some interesting details about how Firefox ( and possibly other browsers )work with the stuff we throw at it.
这篇关于CSS样式表中的规则顺序会影响渲染速度吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
