The order in which the browser loads and renders HTML

Before, in the group to everyone to do a "browser loading and rendering HTML order" share (PS: This front of the HTML a few words on the 51testing may show a bit of a problem), here to summarize it.
1. The order in which the browser loads and renders HTML
1, IE download order is from top to bottom, the order of rendering is also from top to bottom, download and rendering is at the same time.
2. When rendering to a part of the page, all the above parts have been downloaded (not that all associated elements have been downloaded)
3, if you encounter semantic explanatory tag embedded file (JS script, CSS style), then the download process of IE will enable a separate connection to download.
4, and after the download to parse, parsing process, stop all the page down the download of elements. Blocking loading
5. After the download is complete, the stylesheet will be parsed with all of the previously downloaded stylesheets, and once the parsing is complete, all previous elements (including previously rendered) will be rendered again.
6, JS, CSS if there is a redefinition, after the definition function will overwrite the pre-defined function
2. JS Loading
2.1 Cannot download and analyze in parallel (blocking download)
2.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 very likely to have code directly changed the DOM tree structure, such as using document.write or appendchild, Even the direct use of the location.href to jump, the browser in order to prevent the occurrence of JS modified DOM tree, the need to rebuild the DOM tree, so it will block the other download and rendering.
3. How to speed up HTML page loading
1, page weight loss
Page Feishou is the most important factor affecting loading speed.
Remove unnecessary spaces, comments
Move the inline script and CSS to an external file
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 files
Reducing the number of files referenced on a page can reduce the number of HTTP connections
Many JavaScript, CSS files can be merged with the best merge, and others through these their javascript. Functions and Prototype.js merged into a base.js file.
3, reduce domain name query
DNS query and resolution domain names are also time consuming, so to reduce the external JavaScript, CSS, pictures and other resources, the use of fewer different domain names the better
4, Cache reuse data
Use the cache.
5. Optimize page element Loading order
First load the content that the page initially displays and the JavaScript and CSS associated with it
And then load DHTML-related stuff
Like what is not initially displayed related pictures, flash, video and other very fat resources on the last load
6, reduce the number of inline JavaScript
Browser parser assumes that inline JavaScript will change the page structure, so using inline JavaScript is expensive
Do not use the document.write () approach to output content, using the modern internet of things dom method to process page content for modern browsers
7, using modern CSS and legal tags
Use modern CSS to reduce labels and images, such as using modern css+ text to replace only text-only images
Use legitimate tags to avoid browser parsing HTML "error correction" and so on, you can also be HTML Tidy to the HTML weight loss
8,chunk your Content
Do not use nested tables
<table>
<table>
<table>
..
<table>
<table>
<table>

<table>
<table>
<table>
..
<table>
<table>
<table>

Instead of using a non-nested tables or divs
<table>...</table>
<table>...</table>
<table>...</table>

<table>...</table>
<table>...</table>
<table>...</table>

The layout of tables based on chunks of nesting is decomposed into small tables so that the contents of the entire page (or large table) are not loaded when displayed
9, specify the size of the image and tables
If the browser can immediately determine the size of the image or tables, then it can immediately display the page instead of doing some layout work again.
This not only speeds up the display of the page, but also prevents some improper changes to the layout after the page has finished loading.
Image using height and width
Table uses table-layout:fixed and specifies the width of the columns using col and colgroup tags
10, according to the user browser wise choice strategy
IE, Firefox, Safari, etc.
11, example of page structure
· Html

· HEAD

· LINK ...
CSS files required for page appearance. Minimize the number of files for performance while keeping unrelated CSS in separate files for maintenance.

· SCRIPT. ...
Javascript. Files for functions required during the loading of the page, and not any DHTML, can only run after page loads.
Minimize the number of files for performance while keeping unrelated JavaScript. In separate files for maintenance.

· BODY
· User visible page content in small chunks (Tables/divs) the can is displayed without waiting for the full page to DOWNL Oad.

· SCRIPT. ...
Any scripts which is used to perform. Dhtml. DHTML script. Typically can only run after the page had completely loaded and all necessary objects had been initialized. There is no need to load these scripts before the page content. That is slows down the initial appearance of the page load.
Minimize the number of files for performance while keeping unrelated JavaScript. In separate files for maintenance.
If any images is used for rollover effects, you should preload them this page content has downloaded.



4.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, the server returns the HTML file;
2. The browser starts loading the HTML code and discovers that there is a <link> tag in the 3. The browser also issued a request for CSS files, the server returned the 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 found a 6 in the code. The server returns a picture file, because the picture occupies a certain area, affecting the layout of the following 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;
The 8.Javascript script executes this statement, which commands the browser to hide one of the <div> (style.display= "None") from the code. The cup has, suddenly missing such an element, the browser has to re-render this part of the code;
9. Finally waiting for the arrival of the 10. Wait, the user has clicked on the "skin-changing" button in the interface, JavaScript lets the browser change the CSS path of the <link> tag;
11. The browser called All of you <div> <span> <ul> <li>, "Everybody pack up, we'll have to start over ...", the browser requests a new CSS file to the server and re-renders the page.

5.Yahoo of Web Design performance recommendations, the personal feeling is very good to say.
English version: http://developer.yahoo.com/performance/rules.html
Chinese translation: http://www.cnblogs.com/smjack/archive/2009/02/24/1396895.html

Resources:
http://hideto.javaeye.com/blog/133384
Http://blog.chinaacc.com/liuzhantao/blog/20100430-3015241029081.html