Menu
What is the sequence in which a HTML page loads. Please see below a basic HTML outline -
<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> What i know - (please correct me if i am not right)
head section is loaded first. and then body section loads.
My questions -
1. Does body section begin to load only once head section is loaded completely?
2. Does css sheet1 load completely, and then only sheet2 and JS file start loading?
3. Does CSS files load in parallel? same with JS files..? or does CSS and JS file together load in parallel?
4. 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?
5. Does downloading of HQ1 and HQ2 happen in parallel, or is it synchronous which is first HQ1 and then HQ2?
569
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.
HTML pages are interpreted on the fly and read in their entirety from top to bottom - so, the first elements will load first, the last last.
To read an HTML file, you can use any text editor (e.g notepad, notepad++, or any specialized HTML editor). However, if you want to see what the program looks like, you need to run it on a web browser, which is designed to read and render HTML files. Write or copy HTML into a basic text editor.
Explanation: Stage 1: All the browsers download the HTML and CSS script from the server and start off by parsing HTML tags to DOM nodes in a tree called content tree. While the HTML doc being parsed browser rendering engines construct another tree called the Render tree.
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:
<html> and <head> tags.<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.<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.<script> tag specifying an external script file. Browser initiates request from server for the external script file.<script> tag and also initiate the request for that external script file.<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.</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.<img> tags are parsed and fetches for their external images are initiated.<button> tag is processed and may be rendered.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.
111
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
