HTML page loading and parsing process

HTML page loading and parsing process The order in which
browsers load and render html
1. The order of IE download 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 part of the page, all parts above it have been downloaded (not that all associated elements have been downloaded).
3. If you encounter a semantically interpretive tag embedded file (JS script, CSS style), then the download process of IE will enable a separate connection to download.
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 and CSS, the function defined later will override the function defined before.
JS loading
1. Cannot download and parse in parallel (blocking download).
2. When JS is referenced, the browser will always wait for the return of the request when it sends a js request. Because the browser needs a stable DOM tree structure, and there may be
code directly changes the DOM tree structure, such as using document.write or appendChild, or even directly using location.href to jump, the browser is in order to To prevent JS from
modifying the DOM tree, the DOM tree needs to be rebuilt, so other downloads and renderings will be blocked.
How to speed up the loading speed of HTML pages
1. Page weight loss:
a. The fatness of the page is the most important factor affecting the loading speed .
b. Delete unnecessary spaces and comments.
c. Move inline scripts and css to external files.
d. HTML Tidy can be used to slim down HTML, and some compression tools can be used to slim down 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 combined and it is best to combine them. People in the family have merged their JavaScript. functions and Prototype.js into one base.js file.
3. Reduce domain name queries:
a. DNS query and domain name resolution are also time-consuming, so it is necessary to reduce references to external resources such as JavaScript, CSS, and pictures. The less the use of different domain names, the better.
4. Cache reused data:
a. Cache reused data.
5. Optimize the loading order of page elements:
a. First load the initially displayed content of the page and related JavaScript and CSS, and then load HTML-related things, such as what is not initially displayed related pictures, flash, video
and other very fat resources Just load 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 expensive.
b. Do not use the document.write() 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 text-only images.
b. Use legal tags to avoid operations such as "error correction" when the browser parses HTML, and can also be used by HTML Tidy to reduce HTML weight.
8. Chunk your content:
a. Don't use nested tables, use non-nested tables or divs. Decompose a layout based on a large nested table into multiple small tables, so that you don't need to wait until the entire page (or
large table) content is loaded before displaying it.
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 without re-doing 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 a 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 the html file.
2. The browser starts to load the html code and finds that there is a tag inside 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 some of the code in the html, and the CSS file has been obtained, and the page can be rendered.
5. The browser finds a tag in the code that references an image and makes a request to the server. At this point, the browser will not wait until the image is downloaded, but will continue to render the code behind.
6. The server returns the image file. Since the image occupies a certain area and affects the arrangement of the following paragraphs, the browser needs to go back and re-render this part of the code.
7. The browser found a line of Javascript code. It is not vision that

determines gap between people, but vision. Vision can see the same thing, but vision can see different worlds