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

Understanding the Load and Execution Sequence of a Web Page

Introduction

When a user requests a web page, the browser undergoes a systematic process to load and render the page. This process involves the sequential download, parsing, and execution of various resources, including HTML, CSS, JavaScript, and images.

Load and Execution Sequence

HTML Parsing:

1. The browser loads the HTML document and initiates the parsing process.
2. HTML parsing creates the Document Object Model (DOM), which represents the structure and content of the page.

External Resource Download:

3. While parsing HTML, the browser detects external resources such as CSS files and JavaScript scripts.
4. The browser initiates asynchronous downloads of these resources in parallel.

Inline CSS and JavaScript Execution:

5. As the HTML is parsed, the browser encounters inline CSS and JavaScript blocks.
6. These resources are executed immediately during parsing.

CSS Application:

7. When a CSS file is downloaded, the browser parses and applies the rules to the DOM.
8. Elements in the DOM are styled accordingly.

JavaScript Execution:

9. External JavaScript files are downloaded and executed once they are encountered during HTML parsing.
10. The browser blocks parsing until JavaScript execution is complete.

DOM Manipulation:

11. Once parsing is finished, the DOM is ready for manipulation.
12. JavaScript can modify the DOM, affecting the layout and content of the page.

Document Ready Event:

13. When the HTML parsing and external resource loading are complete, the document ready event is fired.
14. JavaScript code within this event is executed to initialize page elements and handle user interactions.

Image Loading

In your example, abc.jpg is downloaded and displayed when encountered during HTML parsing. kkk.png is downloaded and set as the image source when the $(document).ready event is triggered.

Browser Differences

The load and execution sequence may vary slightly depending on the browser. For instance, some browsers limit the number of simultaneous requests per domain to optimize resource loading.

caching

Caching mechanisms impact resource loading. Cached resources can be loaded from storage instead of the server, reducing download time.

Parallel Execution

Generally, HTML parsing, JavaScript/DOM manipulation, and CSS application run in parallel in separate threads. However, JavaScript execution can block HTML parsing until script completion. CSS rules are applied incrementally, allowing for asynchronous rendering.

References

• [Browser Engineering Book](https://browser.engineering/)
• [jQuery Documentation](https://docs.jquery.com/Tutorials:Introducing_$(document).ready())

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