StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POLoad and execution sequence of a web page?
text
Body
copied!<p>I have done some web based projects, but I don't think too much about the load and execution sequence of an ordinary web page. But now I need to know detail. It's hard to find answers from Google or SO, so I created this question.</p> <p>A sample page is like this:</p> <pre><code><html> <head> <script src="jquery.js" type="text/javascript"></script> <script src="abc.js" type="text/javascript"> </script> <link rel="stylesheets" type="text/css" href="abc.css"></link> <style>h2{font-wight:bold;}</style> <script> $(document).ready(function(){ $("#img").attr("src", "kkk.png"); }); </script> </head> <body> <img id="img" src="abc.jpg" style="width:400px;height:300px;"/> <script src="kkk.js" type="text/javascript"></script> </body> </html> </code></pre> <p>So here are my questions:</p> <ol> <li>How does this page load?</li> <li>What is the sequence of the loading?</li> <li>When is the JS code executed? (inline and external)</li> <li>When is the CSS executed (applied)?</li> <li>When does $(document).ready get executed?</li> <li>Will abc.jpg be downloaded? Or does it just download kkk.png?</li> </ol> <p>I have the following understanding:</p> <ol> <li>The browser loads the html (DOM) at first.</li> <li>The browser starts to load the external resources from top to bottom, line by line.</li> <li>If a <code><script></code> is met, the loading will be blocked and wait until the JS file is loaded and executed and then continue.</li> <li>Other resources (CSS/images) are loaded in parallel and executed if needed (like CSS).</li> </ol> <p>Or is it like this:</p> <p>The browser parses the html (DOM) and gets the external resources in an array or stack-like structure. After the html is loaded, the browser starts to load the external resources in the structure in parallel and execute, until all resources are loaded. Then the DOM will be changed corresponding to the user's behaviors depending on the JS.</p> <p>Can anyone give a detailed explanation about what happens when you've got the response of a html page? Does this vary in different browsers? Any reference about this question?</p> <p>Thanks.</p> <p>EDIT:</p> <p>I did an experiment in Firefox with Firebug. And it shows as the following image: <img src="https://i.stack.imgur.com/iqsJ7.png" alt="alt text"></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload