HTML page loading and parsing process

The order in which the browser loads and renders html

1. The order of IE download is from top to bottom, and the rendering order is from top to bottom. Download and rendering are performed simultaneously.

2. When rendering a part of the page, all the above parts have been downloaded (not to say that all associated elements have been downloaded ).

3. if you encounter a semantic label embedded file (JS script, CSS style), then the IE download process will enable separate connections for download.

4. after the style sheet is downloaded, it will be parsed together with all the previously downloaded style sheets. After the parsing is completed, all the elements (including previously rendered) will be re-rendered.

5. If there is a redefinition in JS and CSS, the post-defined function will overwrite the pre-defined function.

JS Loading

1. Parallel download and parsing are not allowed (blocking download ).

2. When JS is referenced, the browser will always wait for the return of this request to send one JS request. Because the browser needs a stable DOM tree structure, JS may have

CodeDirectly changed the DOM tree structure, such as using document. Write or appendchild, or even directly using location. href for redirect. In order to prevent JS repair, the browser

To change the DOM tree, you need to re-build the DOM tree, so it will block other downloads and presentations.

How to accelerate loading of HTML pages

1. Page weight loss:

A. Page fatness is the most important factor affecting the loading speed.

B. Delete unnecessary spaces and comments.

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

D. You can use HTML tidy to lose weight for HTML, or 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. It is best to merge many JavaScript and CSS files. Financial helpers merge their Javascript. Functions and prototype. js into a base. js file.

3. Reduce domain name query:

A. DNS query and resolution of domain names also consume time. Therefore, to reduce reference to external JavaScript, CSS, images, and other resources, the fewer domain names, the better.

4. cache reuse data:

A. cache the reused data.

5. Optimize the page element loading sequence:

A. First load the content initially displayed on the page and the JavaScript and CSS related to it, and then load HTML-related things, such as what is not the first to display the relevant images, Flash, and video.

Wait until very fat resources are loaded.

6. Reduce the number of inline javascript:

A. browser parser assumes that inline JavaScript will change the page structure, so the overhead of using inline Javascript is high.

B. Do not use the document. Write () method to output content. Use the modern W3C DOM method to process page content for modern browsers.

7. Use Modern CSS and legal labels:

A. Use Modern CSS to reduce labels and images. For example, using modern CSS + text can completely replace some text-only images.

B. Use valid tags to avoid "error correction" and other operations when the browser parses html. html tidy can also be used to lose weight for HTML.

8. Chunk your content:

A. Do not use nested tables, rather than nested tables or Div. Splits layout of a large nested table into multiple small tables, so you do not need to wait until the entire page (or

Large table.

9. Specify the image and table size:

A. If the browser can immediately determine the size of the image or table, it can immediately display the page without re-arranging the layout.

B. This not only accelerates page display, but also prevents improper layout changes after page 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 accessed for the first time), the browser sends a request to the server, and the server returns the HTML file.

2. the browser starts loading HTML code and finds that the

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

4. the browser continues to load the <body> part of the HTML code, and the CSS file is ready to render the page.

5. the browser finds a tag in the code that references an image and sends a request to the server. In this case, 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. Because the image occupies a certain area and affects the layout of the subsequent sections, the browser needs to go back and re-render the code.

7. the browser finds a <SCRIPT> tag containing a line of JavaScript code and runs it quickly.

8. the Javascript script executes this statement. It instructs the browser to hide a <style> (style. Display = "NONE") in the code "). Cup, suddenly the cost of such a dollar

The browser has to re-render this part of the code.

9. the browser burst into tears after the arrival of

10. Wait a moment. The user clicks the "skin change" button on the interface, and JavaScript changes the CSS path of the <link> label for the browser.

11. The browser called <div> <span> <ul> <li> and said, "Everybody is packing up and we have to come back ......", The browser requests a new CSS file from the server,

Re-render the page.