The HTML page is parsed sequentially from beginning to end. As resources are encountered such as stylesheets, images or scripts, the browser fires off parallel requests for those resources.
Images and stylesheets are not considered blocking resources, meaning that the parsing of the rest of the page can continue while those resources are being fetched.
Script tags that are not marked defer or async are blocking and they must load and execute before the parsing of the rest of the page continues.
Does body section begin to load only once head section is loaded
completely?
Yes. But it does not necessarily wait for all resources specified in the <head> tag. It may start parsing the <body> before all <head> resources have been fetched. But, all tags in the <head> section are parsed before it starts parsing the <body> section.
Does css sheet1 load completely, and then only sheet2 and JS file
start loading?
No. Stylesheets are loaded in parallel and the page does not block further parsing waiting for a stylesheet to load.
Does CSS files load in parallel? same with JS files..? or does CSS and
JS file together load in parallel?
CSS files load in parallel. Multiple script files may be fetched in parallel, but further parsing will not proceed until a script file has been fetched and executed (unless it has an async or defer attribute). As a performance optimization, browsers may "look-ahead" at other resources in the page and may fetch them in parallel. For example, multiple script files may be fetched in parallel, even though their execution must be serially.
Since HQ* images are big files, it takes time to load. does button2
load and show up in page only once HQ1 and HQ2 is loaded completely?
No, images are loaded asynchronously and do not block the loading of the rest of the page or HTML tags.
Does downloading of HQ1 and HQ2 happen in parallel, or is it
synchronous which is first HQ1 and then HQ2?
Images are loaded in parallel up to a point. A browser has certain connection limits and will only load up to N resources from the same server in parallel at once. In your simple web page, HQ1 and HQ2 would probably be loaded in parallel - though this is up to the browser implementation, not something in a specification.
What is the sequence in which a HTML page loads
So, in your sample HTML page:
<html>
<head>
<link rel="stylesheet" href="css/sheet1.css">
<link rel="stylesheet" href="css/sheet2.css">
<script src="scripts/take1.js"></script>
<script src="scripts/take2.js"></script>
</head>
<body>
<button>button1</button>
<img src = "HQ1.jpg" />
<img src = "HQ2.jpg" />
<button>button2</button>
</body>
</html>
Here's a sequence of operation:
- Browser parses
<html> and <head> tags.
- Browser encounters first
<link> tag, sees a reference to an external stylesheet and initiates a server request to download that external stylesheet. The browser does not wait for that request to finish.
- Browser encounters second
<link> tag, sees a reference to an external stylesheet and initiates a server request to download that second external stylesheet. The browser does not wait for that request to finish.
- Browser encounters first
<script> tag specifying an external script file. Browser initiates request from server for the external script file.
- Browser may "look-ahead" and see next
<script> tag and also initiate the request for that external script file.
- Since external
<script> resources are blocking resources, the official page parsing and execution cannot continue until the first script file has been fetched and executed. The browser may look ahead to see if the download of any other resources should be initiated.
- The first script file finishes download. The browser executes that script.
- The second script file finishes download. The browser executes that script.
- At any point in this process if either of the stylesheets finish downloading, they are processed as soon as available.
- After second block script file is processed, page parsing can continue.
</head> and <body> tags are parsed.<button>button1</button> is parsed and added to the body DOM. The browser may do partial rendering at this point.- Both
<img> tags are parsed and fetches for their external images are initiated.
- The second
<button> tag is processed and may be rendered.
- The browser sees the end tags that signify the end of the page.
- At some point in the future, the images finish downloading and rendering is finished. Depending upon the images and the browser, the images may have been doing progressive rendering as they were downloading.
As some others have mentioned, the Timeline section of the Network tab in the Chrome developer tools can be a very effective visual tool for showing you how the download of various page components works.
To illustrate what type of info is in the Network tab in the Chrome developer tools, here's a screenshot from loading a StackOverflow page. The bars on the right side show a timeline for when various resources were first requested and when they finished downloading.
As another resource, this answer load and execute order of scripts contains a detailed description of how/when scripts are downloaded and includes the effects of async and defer attributes.
