A detailed introduction to HTML page loading and parsing process

The order in which the browser loads and renders HTML

1. IE downloads from top to bottom, and renders from top to bottom. Downloading and rendering are done simultaneously.

2. When rendering to a certain part of the page, all the parts above it have been downloaded (not all related elements have been downloaded).

3. If you encounter a semantically interpretive tag embedded file (JS script, CSS style), then IE's download process will enable a separate connection for downloading.

4. After the style sheet is downloaded, it will be parsed together with all previously downloaded style sheets. After parsing is complete, all previous elements (including those that have been rendered before) will be re-rendered.

5. If there is redefinition in JS or CSS, the later defined function will overwrite the earlier defined function.

JS loading

1. Cannot download and parse in parallel (blocking download).

2. When JS is referenced, the browser sends a js request and will wait for the return of the request. Because the browser needs a stable DOM tree structure, and JS is likely to have

The code directly changes the DOM tree structure, such as using document.write or appendChild, or even directly using location.href to jump. In order to prevent JS modification, the browser

Changing the DOM tree requires rebuilding the DOM tree, so it will block other downloads and rendering.

How to speed up HTML page loading

1. Page weight loss:

a. The size of the page is the most important factor affecting loading speed.

b. Delete unnecessary spaces and comments.

c. Move inline scripts and css to external files.

d. You can use HTML Tidy to reduce the weight of HTML, and you can also use some compression tools to reduce the weight of JavaScript.

2. Reduce the number of files:

a. Reducing the number of files referenced on a page can reduce the number of HTTP connections.

b. Many JavaScript and CSS files can be merged and it is best to merge them. Caibangzi has merged his JavaScript. functions and Prototype.js into a base.js file.

3. Reduce domain name queries:

a. DNS query and domain name resolution also consume time, so it is necessary to reduce the reference to external JavaScript, CSS, images and other resources. The fewer different domain names are used, the better.

4. Cache reuse data:

a. Cache repeatedly used data.

5. Optimize the order of page element loading:

a. First load the content that is initially displayed on the page and the related JavaScript and CSS, then load the HTML related things, such as pictures, flash, videos and other heavy resources that are not initially displayed, which are loaded last.

6. Reduce the amount of inline JavaScript:

a. The browser parser assumes that inline JavaScript will change the page structure, so using inline JavaScript is more expensive.

b. Do not use document.write() as a method of outputting content. Use modern W3C DOM methods to process page content for modern browsers.

7. Use modern CSS and legal tags:

a. Use modern CSS to reduce tags and images. For example, using modern CSS + text can completely replace some pictures with only text.

b. Use legal tags to avoid browsers from performing "error correction" when parsing HTML. HTML Tidy can also be used to slim down HTML.

8. Chunk your content:

a. Do not use nested tables, use non-nested tables or divs instead. Break up a large nested table-based layout into multiple small tables so that you don’t have to wait until the entire page (or large table) is fully loaded before displaying it.

9. Specify the size of the image and table:

If the browser can determine the size of an image or table immediately, it can display the page immediately without having to do some layout work.

b. This not only speeds up the display of the page, but also prevents some inappropriate changes to the layout after the page has finished loading.

c. image uses height and width.

HTML page loading and parsing process

1. The user enters the URL (assuming it is an HTML page and it is the first time to visit), the browser sends a request to the server, and the server returns the HTML file.

2. The browser starts loading the HTML code and finds a <link> tag in the <head> tag that references an external CSS file.

3. The browser sends another request for the CSS file, and the server returns the CSS file.

4. The browser continues to load the code in the <body> part of the HTML, and the CSS file has been obtained, so it can start rendering the page.

5. The browser finds an <img> tag in the code that references an image and sends a request to the server. At this time, the browser will not wait until the image is downloaded, but continue to render the following code.

6. The server returns the image file. Since the image occupies a certain area and affects the layout of the following paragraphs, the browser needs to go back and re-render this part of the code.

7. The browser finds a <script> tag containing a line of Javascript code and runs it immediately.

8. The Javascript script executes this statement, which instructs the browser to hide a <style> in the code (style.display="none"). What a tragedy! Suddenly, this element is missing and the browser has to re-render this part of the code.

9. Finally, the arrival of </html> has arrived, and the browser is in tears...

10. Wait, it’s not over yet. The user clicks the “Change Skin” button in the interface, and Javascript makes the browser change the CSS path of the <link> tag.

11. The browser calls everyone present and says, "Everyone pack up, we have to start over..." The browser requests a new CSS file from the server and re-renders the page.

<<: About the implementation of JavaScript carousel

>>: CSS to achieve Tik Tok subscription button animation effect