The order in which browsers load and render html

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 it

The order in which the browser loads and renders 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. of.

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 semantic interpretive 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 those that have been rendered before) will be re-rendered.

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

Loading of JS

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

2. When references JS, 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 append Child, or even directly use location.href to 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 Presentation.

How to speed up HTML page loading

1. Page weight loss:

a. The fatness and thinness 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 own JavaScript. functions and Prototype.js into a base.js file.

3. Reduce domain name queries:

a. DNS query and domain name resolution are also time-consuming, so reduce external JavaScript, CSS, images and other resource references, the less the use of different domain names, the better.

4. CacheReuse 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, video 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 performing operations such as "error correction" 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 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), the browser sends a request to the server, and the server returns an html file.

2. The browser starts loading the html code and finds that there is a tag inside the head> 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 makes 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> in the code (style.<a href="http://www.php.cn/wiki/927.html" target="_blank">display=”none”). 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 "<a href="http://www.php.cn/code/5991.html" target="_blank">Button, Javascript allows the browser to 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>【Related recommendations】<p>1. <a href="http://www.php.cn/course/list/11.html" target="_self">Html free video tutorial<p>2. <a href="http://www.php.cn/div-tutorial-362996.html" target="_self">html achieves a fixed table around and can scroll up, down, left and right<p>3. <a href="http://www.php.cn/div-tutorial-362995.html" target="_self">Detailed explanation of HTML tags commonly used in front-end development<p>4. <a href="http://www.php.cn/div-tutorial-362994.html" target="_self">Pure html code to complete the scrolling effect through the marquee tag <p>5. <a href="http://www.php.cn/div-tutorial-363090.html" target="_self">htmlDetailed explanation of examples of using Mailto to implement email sending function</script>

The above is the detailed content of The order in which browsers load and render html. For more information, please follow other related articles on the PHP Chinese website!