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

Breakdown of Web Page Loading and Execution

Question: What is the sequence of loading and execution of a web page?

Answer:

1. HTML Parsing:

• Browser downloads and parses the HTML document, creating the Document Object Model (DOM).

2. Resource Loading:

• External resources are downloaded in parallel:

  • JavaScript (external scripts)
  • CSS (external style sheets)
  • Images

3. JavaScript Execution:

• Inline JavaScript in <script> tags is executed.</script>
• External JavaScript files are parsed and executed when downloaded.

4. CSS Execution:

• External CSS files are downloaded and parsed.
• CSS rules are applied to the DOM elements.

5. DOM Modifications:

• $(document).ready() event fires when the DOM is ready (all resources loaded).
• Internal JavaScript (within <script> tags) executes, potentially modifying the DOM.</script>

6. Resource Display:

• Images and other external resources are displayed on the web page.

7. Additional JavaScript Execution:

• External JavaScript files loaded after DOM is ready continue to execute.

Image Download:

• Both abc.jpg and kkk.png will be downloaded.
• The image displayed in the element will be kkk.png, as its src attribute is updated by the JavaScript code.

Browser Execution Flow:

The sequence of loading and execution may vary slightly between browsers, but the general flow outlined above remains consistent.

Parallelism:

Some resources, such as CSS and images, can be loaded in parallel without blocking the parsing of HTML. However, external JavaScript files block the parsing of HTML until they are downloaded and executed.

Reference:

• [Browser Engineering: Load and Execution of a Web Page](https://browser.engineering/posts/load-execute-web-page/)
• [Google Developers: JavaScript Execution Order](https://developers.google.com/web/fundamentals/primers/html-and-css/script-execution)

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