Home > Article > Web Front-end > The order in which browsers load and render html
The order in which browsers load and render html
- Y2JOriginal
- 2017-05-24 09:14:593097browse
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
5. The browser finds an
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