How Does a Web Browser Load and Execute a Web Page\'s Contents?

Load and Execution Sequence of a Web Page Overview

When a web page is requested, the browser performs a series of tasks to load and execute its contents. This involves processing the HTML document, fetching and executing external resources, and rendering the page.

Sequence of Loading HTML Document: The browser downloads the HTML document and begins parsing it. Inline Resources (Scripts and Styles): As the browser encounters inline and tags, it parses and executes them immediately. External Resources (Scripts and CSS): External script files ( ) are downloaded, parsed, and executed. External CSS files ( ) are downloaded and applied to the page. Images and Other Content: The browser concurrently downloads images and other resources specified in the HTML document. Execution of JavaScript Inline JavaScript: Inline JavaScript is executed immediately upon being parsed.

External JavaScript:

Blocking: If an external script is marked with defer or async, the browser downloads it and executes it before continuing to parse the HTML. Non-Blocking: If an external script is marked with load, the browser downloads it and executes it asynchronously, without blocking the HTML parsing. Execution of CSS CSS is applied to the page as it is encountered in the or link tags. Changes to CSS after the page has been parsed and rendered will dynamically update the page's appearance. Timing of $(document).ready The $(document).ready function executes when all the HTML elements and external resources have been loaded and executed. This ensures that the JavaScript code can safely interact with the page's elements.

Image Download abc.jpg will be downloaded if it is the first time it is encountered on the page. kkk.png will be downloaded and replace abc.jpg in the element because it is dynamically set using JavaScript. Variations Across Browsers The load and execution sequence may vary slightly across different browsers, but the general principles remain the same.

References [Browser Engineering Book](https://browser.engineering/) [JavaScript Execution Order in Web Pages](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) [Page Lifecycle in Browsers](https://addyosmani.com/blog/page-lifecycle-in-browsers/)