4

just for example - sleep 10sec css file

<!DOCTYPE html>
<html>
<head>
    <link href='http://2.cuzillion.com/bin/resource.cgi?type=css&sleep=10&n=2&t=1379426970&.css?v=1010' rel='stylesheet' />
</head>
<body>
   <h1>Hello World!</h1>
</body>
</html>

Hello world will be shown in 10 sec

http://plnkr.co/edit/HyueD8agoYVmCfuRwjGJ?p=preview

user2788132
  • 43
  • 3
  • http://stackoverflow.com/questions/4772333/are-css-stylesheets-loaded-asynchronously – gvee Sep 17 '13 at 15:05

2 Answers2

9

Current browsers will render the content after the linked stylesheets when these are fully loaded. This avoids content flickering otherwise you would always see the pages for a short time without the rules of the stylesheets being applied.

And because the stylesheet has a delay of 10 seconds the part of page rendering after it is delayed also for 10 secs.

This is not only true for stylesheets but also for scripts (that are not loaded with the async attribute).

EDIT To the comment of Ryan Kinal. The browsers have multiple passes. One that parses the html code and that will start to download the found resources. And one pass that will execute the resource and render the html in order. So the stylesheets and scripts are not necessarily loaded in order. The only important part is that they are applied/executed in the order they appear in the html structure.

It is like a construction manual where it is required to do the things step by step. You can read it before you build. Order the necessary items. But you can only continue with the next step at the time when you receive the necessary items for that step. So if you received everything except the first part you can't start building.

Google-Developer: Put CSS in the document head

[...] Browsers block rendering a web page until all external stylesheets have been downloaded. [...] Therefore, it's important to put references to external stylesheets, as well as inline style blocks, in the head of the page. By ensuring that stylesheets are downloaded and parsed first, you can allow the browser to progressively render the page. [...]

Google-Developer: Optimize the order of styles and scripts

[...] Because JavaScript code can alter the content and layout of a web page, the browser delays rendering any content that follows a script tag until that script has been downloaded, parsed and executed. However, more importantly for round-trip times, many browsers block the downloading of resources referenced in the document after scripts until those scripts are downloaded and executed. On the other hand, if other files are already in the process of being downloaded when a JS file is referenced, the JS file is downloaded in parallel with them. [...]

MDN: Tips for authoring fast-loading HTML pages: Minimize the number of files

Too much time spent querying the last modified time of referenced files can delay the initial display of a web page, since the browser must check the modification time for each CSS or JavaScript file, before rendering the page.

MDN: Optimizing your pages for speculative parsig

Traditionally in browsers the HTML parser has run on the main thread and has blocked after a </script> tag until the script has been retrieved from the network and executed. The HTML parser in Firefox 4 and later supports speculative parsing off the main thread. It parses ahead while scripts are being downloaded and executed. As in Firefox 3.5 and 3.6, the HTML parser starts speculative loads for scripts, style sheets and images it finds ahead in the stream. However, in Firefox 4 and later the HTML parser also runs the HTML tree construction algorithm speculatively. The upside is that when a speculation succeeds, there's no need to reparse the part of the incoming file that was already scanned for scripts, style sheets and images. The downside is that there's more work lost when the speculation fail

t.niese
  • 39,256
  • 9
  • 74
  • 101
  • Well answered. I didn't think about the query string when I answered. Always nice to see unusual ways of doing a task like this to remind you of the diversity that programming affords you! – BenM Sep 17 '13 at 15:06
  • Any source link will act as back bone to your post.. :) (I am trying here, but I can't find any). – Mr_Green Sep 17 '13 at 15:16
  • @Mr_Green: I'm currently reformulating the answer because of some inaccuracies in writing and looking for a proofing link. – t.niese Sep 17 '13 at 15:19
  • 1
    Interestingly, multiple stylesheets will be downloaded at the same time. So, if you have one that sleeps for 10 seconds, and another that sleeps for, say, 7 seconds, the result will be that the page waits for around 10 seconds, rather than around 17 seconds. – Ryan Kinal Sep 17 '13 at 15:29
  • @Mr_Green i have added two references to Google-Developer, but I'll check if I could find another additional source. – t.niese Sep 17 '13 at 16:14
0

Sorry original answer I read question incorrectly:

Ok so the browser interprets html files from top to bottom, this will cause it to download any files that are linked to it before rendering the actual html.

Because of this it is recommended to load JavaScript at the bottom of the file as an example as they can get pretty big.

I have not really seen a real big css file, in terms of actual file size that can cause a very large delay.

I also do not know what the implication are of loading css at the bottom of the html, maybe someone can clarify this.

Try:

<!DOCTYPE html>
<html>
   <head>

   </head>
   <body>
       <h1>Hello Plunker!</h1>
   </body>
  <link href='http://2.cuzillion.com/bin/resource.cgi?type=css&sleep=10&n=2&t=1379426970&.css?v=1010' rel='stylesheet' />
</html>

UPDATE

See answer by t.niese why css should not be at the bottom

Armand
  • 9,847
  • 9
  • 42
  • 75