The order in which the browser loads and renders HTML

the order in which the browser loads and renders HTML

1. The order of IE download is from top to bottom, the order of rendering is also from top to bottom, downloading and rendering are carried out simultaneously.

2. When rendering to a portion of a page, all of its parts have already been downloaded (not that all associated elements have been downloaded).

3. If you encounter semantic explanatory tags embedded file (js script, CSS style), then the download process of IE will enable a separate connection to download.

4. After the download is complete, the stylesheet will be parsed with all previously downloaded stylesheets, and once the parsing is complete, all previous elements (including previously rendered) will be rendered again.

5. JS, CSS, if there is a redefinition, after the definition function will overwrite the pre-defined function.

JS's Loading

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

2. When JS is quoted, the browser sends 1 JS request and waits for the request to be returned. Because the browser needs 1 stable DOM tree structure, and JS is likely to have

Code directly changes the structure of the DOM tree, such as using document.write or appendchild, or even the direct use of location.href to jump, the browser in order to prevent the occurrence of JS repair

Changing the DOM tree requires rebuilding the DOM tree, so it blocks other downloads and renders.

how to speed up HTML page loading

1. Page Weight loss:

A. The Feishou of the page is the most important factor affecting the loading speed.

B. Remove unnecessary spaces, comments.

C. Move the inline script and CSS to an external file.

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

2. Reduce the number of documents:

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

B. Many javascript, CSS files can be combined with the best combination, and others through these their javascript. Functions and Prototype.js merged into a base.js file.

3. Reduce the domain name query:

A. DNS queries and resolving domain names are also time consuming, so to reduce the use of external JavaScript, CSS, pictures and other resources of reference, different domain names, the less the better.

4. Cache Reuse Data:

A. Cache data that is reused.

5. Optimize page element Loading order:

A. First load the contents of the page initially displayed and the associated JavaScript and CSS, and then load the HTML related things, like what is not initially displayed related to the image, Flash, video and other very fat resources on the last load.

6. Reduce the number of inline javascript:

A. Browser parser assumes that inline JavaScript will change the structure of the page, so it is expensive to use inline JavaScript.

B. Do not use the document.write () method of outputting content, using the modern internet of things dom method to process page content for modern browsers.

7. Use modern CSS and legal tags:

A. Using modern CSS to reduce labels and images, such as using modern css+ text, can completely replace text-only images.

B. Use legitimate tags to avoid browser parsing HTML "error correction" and so on, you can also be HTML Tidy to the HTML to lose weight.

8. Chunk Your content:

A. Do not use nested table, instead of using a non-nested table or Div. Breaks down the layout of a table based on a chunk of nesting into smaller table so that it does not have to wait until the entire page (or large table) is fully loaded to display.

9. Specify the size of the image and table:

A. If the browser can immediately determine the size of the image or table, then it can immediately display the page instead of doing some layout work again.

B. This not only accelerates the display of the page, but also prevents some improper 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 is the first access), the browser makes a request to the server, and the server returns the HTML file.

2. The browser starts loading the HTML code, and the discovery
3. The browser also issued a request for CSS files, the server returned this CSS file.

4. The browser continues to load the HTML <body> part of the code, and the CSS file has been handed, you can start to render the page.

5. The browser finds a tag in the code that refers to a picture that makes a request to the server. Instead of waiting for the picture to finish downloading, the browser continues to render the following code.

6. The server returns a picture file, because the image occupies a certain area, affecting the layout of the later paragraphs, so the browser needs to go back to re-render this part of the code.

7. The browser discovers a <script> tag containing a line of JavaScript code and runs it quickly.

8. The JavaScript script executes this statement, which commands the browser to hide a <style> (style.display= "None") from the code. The cup is suddenly missing such an element, the browser has to re-render this part of the code.

9. Finally the arrival of
10. Wait, the user points the "skin" button in the interface, JavaScript lets the browser change the CSS path of the <link> tag.

11. The browser summoned all the people here <div><span><ul><li>, "Everybody pack up, we have to start again ...", the browser requests a new CSS file to the server and re-renders the page.

The order in which the browser loads and renders HTML