The order in which the browser loads and renders HTML

Before the array, found this article, found themselves to develop the site for so long time, not very clear this, today and everyone to share.
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> Instead of using a non-nested tables or divs <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 tag in the tag that references the external CSS file; 3. The browser also issued a request for CSS files, the server returned the CSS file; 4. The browser continues to load the HTML part of the code, and the CSS file has been handed, you can start to render the page; 5. The browser finds a tag in the code that references a picture and makes a request to the server. At this point the browser will not wait until the picture is finished downloading, but continue to render the following code; 6. 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 return to re-render this part of the code; 7. The browser discovers a

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.htmlhttp://renyongjie668.blog.163.com/blog/ static/1600531201097062789/

The order in which the browser loads and renders HTML