Rendering styles

October 4th, 2006. Tagged: browsers, CSS, firefox

The question is - what will a browser do, given a page with several stylesheets, each of them probably overwriting definitions from the previous ones? Will the browser render the page using the first received css file, while downloading the other ones and after that partially re-rendering where required? The answer is: no, the browser will wait until all CSS files are downloaded, (then probably merge all definitions, just a wild guess) and will render once.

Test

I did this test - one page with two stylesheets that contain pretty much the same selectors for different table styles (thanks to this gallery). Each of the CSS files is actually a PHP script and has a call to sleep(), one sleeps for 5 seconds, the other one for 10.

Result

The browser sits there and waits for the both styles, rendering nothing (except for the page title, but that's not really rendering, is it?). So nothing happens for 10 seconds, then the second style is used for the final rendering. This happens in both FF and IE.

Misc

I also tried sleeping in the actual page, and flushing the output after each row. In my home environment FF renders each row as it's received, but in my hosted environment, it waits for the whole table. IE alsways waits for the complete table.

If I put the page to too much sleep so that the php script dies before the second stylesheet is dowloaded, the browser uses whatever is at hand (css1) to render the page.

Demo/download

Tell your friends about this post: Facebook, Twitter, Google+

12 Responses

  1. [...] The thing is, when it comes to performance, the browser won’t render any part of the page, until all stylesheets are downloaded (fiddled with here). That includes, unfortunately, stylesheets not designed for the currently rendered media. In other words, the browser won’t display your page, until the print stylesheet is also downloaded, although it’s not used at all for displaying the page. That sucks and should really be addressed in future browser versions. [...]

  2. This article always speaks about “the browser” but in the last paragraphs we learn that it’s just FF and IE (which versions?). As far as I know, there are no recommandation of W3C on the subject, so each browser is free to act as it wants to. For instance, have a look at Opera8/9, it behaves differently. And Safari or konqueror or new versions of FF might be smart, too.

  3. Thanks Mytskine for the comment. You’re right – Opera does render the page, then re-renders when the first css arrives, the does it again when the second css arrives.

    I tested again with the latest IE, FF and Safari (on Windows) – they all wait for all css files, before rendering. It makes sense in a way, because re-rendering the page can be expensive and doing it several times in one request is probably something browsers want to avoid.

  4. [...] Another idea – as shown in a previous post, the browsers (except Opera) won’t show anything until the last bit of CSS is downloaded. So if you put you big-ass CSS file at the bottom of the page (which is exactly the opposite of what you should be doing when aiming at performance) you might also achieve the desired flicker-free rendering. Post this entry to: » del.icio.us  » Digg  » Furl  » Newsvine  » reddit  » Y! [...]

  5. [...] way — since IE will not render anything until the very last bit of CSS comes down the wire (more info), and your because CSS has a dependency on a filtered image, the rendering is blocked until the [...]

  6. Stoyan,

    does this means that browsers won’t download background images referenced in an external style sheet before a flush()?

    Said otherwise, does the technik you explain here:

    http://www.phpied.com/progressive-rendering-via-multiple-flushes/

    applied to style sheets speeds up the download of background images?

  7. architectural rendering…

    [...]Rendering styles / Stoyan’s phpied.com[...]…

  8. [...] block rendering until all CSS arrives. With the worst possible experience: white [...]

  9. Kemberly Huneycutt

    Sleeping for too long can damage your circadian rhythm. The circadian rhythm is your 24 hour ‘clock’ controlled by a central part of the brain. This clock tells us when we are sleepy by altering the body temperature by a few degrees. When the body temperature is lowered, we feel sleepy. Conversely when it is raised, we feel awake and alert.;

    Check out the most recently released blog post on our own website
    <.http://www.foodsupplementcenter.com/magnesium-for-migraines/

  10. […] from an unavailable server, the browser won’t even start rendering the page at all (see e.g. http://www.phpied.com/rendering-styles/) until some browser timeout triggers (commonly 30 seconds). This again, gives the user a bad […]

  11. Stone wedding anniversary jewelry tend to be this kind of stylish along with adoring approach to rejoice being married. Expensive diamonds possess for many years raised to get natural beauty along with quality, plus a treat regarding expensive diamonds will joy. The fantastic announcement is always that you will discover on-line bracelets methods offering precious stone wedding anniversary jewelry as well as other fine jewelry during very reasonable prices..
    UGG ֩` ҎƷ Ҋ֤ 2013 http://www.tcs.nsw.edu.au/category/index_ugg327.htm

  12. After I initially left a comment I seem to have clicked on the -Notify me when new comments are added- checkbox and from now
    on whenever a comment is added I get four emails with the exact
    same comment. There has to be an easy method you are able to remove me from that service?
    Cheers!

Leave a Reply