Menu
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
419
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
120
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
