Detailed introduction to HTML page loading and parsing process

The order in which browsers load and render HTML, how to speed up HTML page loading, HTML page loading and parsing processes, etc., will be introduced in detail in this article. Interested friends should not miss Browser loading and The order of rendering html

1. The order of IE downloading is from top to bottom, and the order of rendering is also from top to bottom. Downloading and rendering are performed at the same time.

2. When rendering to a certain part of the page, all parts above it have been downloaded (this does not mean that all associated elements have been downloaded).

3. If you encounter a semantically interpretable tag embedded file (JS script, CSS style), then the IE 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 the parsing is completed, all previous elements (including previously rendered ones) will be re-rendered.

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

Loading of JS

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 it is very likely that there is

code in JS that directly changes the DOM tree structure, such as using document.write or appendChild, or even directly using location.href. Jump, in order to prevent JS from modifying the DOM tree, the browser needs to rebuild the DOM tree, so it will block other downloads and renderings.


How to speed up HTML Page loading speed
1. Page weight loss:

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

b. Delete unnecessary spaces and comments.

c. Move the inline script and css to external files.

d. You can use HTML Tidy to lose weight for HTML, and you can also use some compression tools to lose weight for JavaScript.

2. Reduce the number of files:

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

b. Many JavaScript and CSS files can be merged and are best merged. Caibangzi has merged its JavaScript. functions and Prototype.js into a base.js file.

3. Reduce domain name queries:

a. DNS queries and domain name resolution are also time-consuming, so it is necessary to reduce references to external JavaScript, CSS, images and other resources. The more different domain names are used, Less is better.

4. Cache reused data:

a. Cache reused data.

5. Optimize the loading order of page elements:

a. First load the content initially displayed on the page and the JavaScript and CSS related to it, then load HTML-related things, like what is not initially displayed Relevant pictures, flash, videos and other very fat resources are loaded last.

6. Reduce the number of inline JavaScript:

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

b. Do not use document.write() to output content, use modern W3C DOM methods to handle 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 images with only text.

b. Use legal tags to prevent the browser from doing "error correction" and other operations when parsing HTML. It can also be used by HTML Tidy to slim down HTML.

8. Chunk your content:

a. Do not use nested tables, but use non-nested tables or p. Break the layout based on a large nested table into multiple small tables, so that there is no need to wait until the entire page (or large table) content is loaded before displaying it.

9. Specify the size of images and tables:

a. If the browser can immediately determine the size of the image or table, then it can display the page immediately without having to re-layout. Work.

b. This not only speeds up the display of the page, but also prevents some inappropriate changes in the layout after the page is loaded.

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 visit), and the browser sends a request to the server. The server returns the html file.

2. The browser starts loading the html code and finds that there is a tag in the

tag that refers to an external CSS file.

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

4. The browser continues to load the code of the part of the html, and the CSS file has been obtained, and the page can be rendered.

5. The browser finds an 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 will continue to render the subsequent code.

6. The server returns the image file. Since the image occupies a certain area and affects the arrangement of subsequent 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 quickly. <br/><br/>8. The Javascript script executes this statement, which instructs the browser to hide a certain <style> (style.display="none") in the code. Oops, suddenly such an element is missing, and the browser has to re-render this part of the code. <br/><br/>9. Finally waited for the arrival of , and the browser burst into tears... <br/><br/>10. Wait, it’s not over yet, the user clicked "Skin Change" in the interface " button, Javascript lets the browser change the CSS path of the <link> tag. <br/><br/>11. The browser summoned everyone present, "Everyone pack your bags, we have to start over...", browse The server requests a new CSS file from the server and re-renders the page. <p>For more detailed introduction to the HTML page loading and parsing process, please pay attention to the PHP Chinese website! </script>