When an HTML page is loaded, it is parsed sequentially from the beginning to the end. As resources like stylesheets, images, or scripts are encountered, the browser initiates parallel requests to fetch those resources.
Images and stylesheets do not block the parsing of the page, allowing the rest of the content to be processed while these resources are being fetched.
Script tags that do not have the defer or async attribute specified are considered blocking resources. The browser must load and execute these scripts before continuing with the parsing of the remaining page content.
Does loading of the body section begin only after the head section has been fully loaded?
Yes, but the browser may start parsing the <body> section before all resources in the <head> tag have been fetched. However, all elements in the <head> section are parsed before moving on to the <body> section.
Is CSS file sheet1 loaded completely before sheet2 and JS file start loading?
No, stylesheets are loaded in parallel, and the page does not wait for one stylesheet to finish loading before starting to parse another one.
Do CSS files and JS files load in parallel separately, or do they load together in parallel?
CSS files are loaded in parallel, and multiple script files can also be fetched in parallel. However, the execution of scripts will happen serially unless they have the async or defer attribute. Browsers may optimize performance by fetching resources in parallel based on their look-ahead mechanism.
Since HQ* images are large files, does button2 appear on the page only after HQ1 and HQ2 have finished loading?
No, images are loaded asynchronously and do not block other page content from rendering while they are being fetched.
Are HQ1 and HQ2 downloaded in parallel, or is it a sequential process where HQ1 loads first followed by HQ2?
Images are typically loaded in parallel up to a certain limit determined by the browser's connection constraints. In your scenario, HQ1 and HQ2 would likely be fetched in parallel, but this behavior can vary based on browser implementations.
What is the sequence in which an HTML page loads?
In the sample HTML page provided:
<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>
The loading sequence can be summarized as follows:
- The browser parses the
<html> and <head> tags initially.
- External stylesheet references in the
<head> trigger server requests, which are initiated concurrently by the browser.
- Similarly, external script files referenced in the
<head> result in individual server requests launched in parallel.
- Script files serve as blocking resources, requiring their download and execution before further processing of the page can proceed.
- After the initial script finishes downloading and executing, subsequent actions such as processing additional scripts or handling stylesheets take place.
- Parsing continues with the
<body> section once the critical rendering path is unblocked by completed resource downloads.
- Individual elements within the
<body> are processed sequentially, potentially leading to partial rendering during the loading process.
- Images like HQ1 and HQ2, though large, load asynchronously and do not hinder the ongoing rendering of the page content.
For further insight into resource loading patterns and timing, utilizing tools like Chrome's Network tab can provide valuable insights through visual representations of resource timelines.
To delve deeper into script loading behaviors, refer to this detailed explanation on the order of script loading, including discussions on the impact of attributes like async and defer.