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

1. HTML Document: The browser downloads the HTML document and begins parsing it.
2. Inline Resources (Scripts and Styles): As the browser encounters inline <script> and <style> tags, it parses and executes them immediately.</script>
3. External Resources (Scripts and CSS): External script files (
4. 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
• 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/)

The above is the detailed content of How Does a Web Browser Load and Execute a Web Page\'s Contents?. For more information, please follow other related articles on the PHP Chinese website!