How Does a Web Page Execute: A Step-by-Step Breakdown?

Execution Sequence of a Web Page

Upon receiving a response for a web page, the browser initiates the following execution sequence:

1. HTML Loading

The browser downloads and parses the HTML document, constructing the Document Object Model (DOM).

2. External Resource Retrieval

Starting from top to bottom, the browser loads external resources (scripts, CSS, images) in parallel.

3. JavaScript Execution

External (synchronous): The browser downloads, parses, and executes external JavaScript files immediately, blocking the HTML parsing.
External (asynchronous): Modern browsers may use non-blocking load techniques, allowing HTML parsing to continue while loading and executing external scripts.
Inline: Inline JavaScript executes within the HTML parsing process.

4. CSS Execution

The browser downloads, parses, and applies CSS rules as it encounters them in the HTML.

5. Document Ready Event

Once all DOM elements and external resources have been loaded and parsed, the browser triggers the "document ready" event, typically $(document).ready().

6. Further JavaScript Execution

JavaScript code that runs after the "document ready" event continues execution.

7. Image Download

The browser downloads images and other media resources according to the specifications in the HTML.

To answer your specific questions:

1. The page loads top-to-bottom, parallel loading external resources.
2. The loading sequence is: HTML -> External Resources -> JavaScript -> CSS -> "Document Ready" Event -> Further JavaScript -> Image Download.
3. Inline JavaScript: During HTML parsing. External JavaScript (synchronous): Blocks HTML parsing. External JavaScript (asynchronous): Continues loading HTML.
4. CSS: Applied as it's encountered in the HTML.
5. $(document).ready: Triggered after all DOM elements and resources have been loaded.
6. Only kkk.png will be downloaded, replacing the original image.

Note:

The execution sequence may vary slightly depending on browser settings (e.g., parallel request limits) and caching mechanisms. Detailed coverage of the browser loading and execution process can be found at: https://browser.engineering/ (open-sourced: https://github.com/browserengineering/book).

The above is the detailed content of How Does a Web Page Execute: A Step-by-Step Breakdown?. For more information, please follow other related articles on the PHP Chinese website!