Does the order of rules in a CSS stylesheet affect rendering speed?

问题

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?

回答1:

I can't speak to order of the rules as it relates to speed.

However, as CSS stands for Cascading Stylesheets I consider it a moot point as the order of your rules does matter. So you aren't necessarily at liberty to move them around freely. Unless of course you supply continually more specific selectors (i.e. html body div.foo), which I think would have performance implications. If nothing else in file size.

In the end, remember that premature optimization is the root of all evil. Furthermore, there are other things that will have greater effect on speed (minification, static domain, etc) than rule order. Not to mention there is something to be said for code readability.

回答2:

It matters for the importance of your selectors, adding details such as classes or IDs or parent elements will increase the importance of that rule over others.

Also, it may or may not decrease the speed of the browser who have to interpret it, but for sure it will increase the size of your CSS file to download and possibly be cached (not all handheld devices cache files bigger than a specified size).

CSS selectors specificity

回答3:

It's typically not a good practice to strict type your classes and ID's to a specific element type.

div.foo {}

Will only work for Div's. Then you can't reuse that style elsewhere unless it's a Div element.

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

This is a slightly better approach.

回答4:

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.

回答5:

The order doesn't matter in loading speed, it only matters when the styles cascade down, so you can't move them around willy-nilly. Using IDs may be faster than using classes, but you can only have one ID on a page. The best way to speed it up would be searching for things that have a class but are only used once, and changing it to an ID.

回答6:

I'd say it's always best to order them in hierarchical order - so HTML is top, followed by body, followed by it's child rules.

来源：https://stackoverflow.com/questions/6944190/does-the-order-of-rules-in-a-css-stylesheet-affect-rendering-speed

标签

html

css

optimization

rendering

minify