The order in which the browser loads and renders HTML

1. The order in which the browser loads and renders HTML

1. The order in which the browser loads and renders HTML
2. IE download order is from top to bottom, the order of rendering is also from top to bottom, download and rendering are simultaneous.
3. When you render to a portion of a page, all of its parts are already downloaded (not that all associated elements have been downloaded)
4. If you encounter semantic explanatory tags embedded file (js script, CSS style), then the download process of IE will enable the individual connection to download.
5. And after the download, parsing, the parsing process, stop all elements of the page down the download. Blocking loading
6. After the download is complete, the stylesheet is parsed with all previously downloaded stylesheets, and after parsing is complete, all previous elements (including previously rendered) are re-rendered.
7. JS, CSS, if there is a redefinition, after the definition function will overwrite the pre-defined function

2. JS Loading

1. Cannot download and analyze in parallel (blocking download)
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

The
1. page loses weight. The Feishou of the page is the most important factor that affects the loading speed. Remove unnecessary spaces, comments. Move the inline script and CSS to an external file, use HTML Tidy to lose weight for HTML, and use some compression tools to reduce the number of files for JavaScript
2. . Reducing the number of files referenced on the 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. to reduce the domain name query. DNS queries and resolving domain names are also time consuming, so to reduce references to external JavaScript, CSS, pictures, and other resources, the less use of different domain names the better the
4. cache reuses the data. Use the cache bar
5. to optimize the page element load order. First load the contents of the page initially displayed and the associated JavaScript and CSS, and then load the DHTML related things, like what is not initially displayed related images, Flash, video and other very fat resources on the last load
6. reduce inline The number of JavaScript. Browser parser will assume that inline JavaScript will change the structure of the page, so use the inline JavaScript overhead, do not use document.write () this way of output content, using modern Dom method to handle page content for modern browsers
7. use modern CSS and legitimate tags. Using modern CSS to reduce labels and images, such as using modern css+ text can completely replace some text-only images, using legitimate tags to avoid browser parsing HTML "error correction" and so on, but also can be HTML Tidy to the HTML weight loss
8. Chunk your content. Do not use nested tables
9. to 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 rearranging the layout of the work, which not only speed up the page display, but also prevent the page after the loading of the layout of some improper changes. The
10. chooses the policy wisely based on the user's browser. IE, Firefox, Safari, etc.
11. page Structure Example

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, and the server returns the HTML file;
2. The browser starts loading the HTML code and finds a tag within 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 section 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 later paragraphs, so the browser needs to go back 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

Original link: http://renyongjie668.blog.163.com/blog/static/1600531201097062789/

The order in which the browser loads and renders HTML