The order in which the browser loads and renders html

1. 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 download, parse and stop downloading all the elements on the page. Blocking Loading 5. 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 those previously rendered) will be parsed) re-rendering. 6. If there is a redefinition in JS and CSS, the post-defined function will overwrite the pre-defined function.

2. JS Loading

2.1 concurrent download and resolution (blocking download) 2.2 When JS is referenced, the browser sends a jsrequest and waits until the request is returned. Because the browser needs a stable DOM tree structure, and JavaScript code may directly change the DOM tree structure, such as using document. write or appendChild, or even directly use location. href redirects. In order to prevent JS modifications to the DOM tree, the browser needs to re-build the DOM tree, so it will block other downloads and rendering.

3. How to accelerate loading of HTML pages

1. Page weight loss Page slimming is the most important factor affecting loading speed Delete unnecessary spaces and comments Move inline scripts and css to external files 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 Reducing the number of files referenced on the page can reduce the number of HTTP connections 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 queries 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 Use Cache 5. Optimize the page element Loading Sequence First, load the content initially displayed on the page and the related JavaScript and CSS. Load DHTML-related items Such as what is not the first to show the relevant pictures, flash, video and other very fat resources, and finally Load 6. Reduce the number of inline JavaScript The browser parser assumes that inline JavaScript will change the page structure, so the overhead of using inlineJavaScript is high. 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 Use Modern CSS to reduce labels and images. For example, using modern CSS + text can completely replace some text-only images. Use valid tags to avoid "error correction" and other operations when the browser parses HTML. HTMLTidy can also be used to reduce the size of HTML. 8, Chunk your content Do not use nested tables <Table> <Table> <Table> .. <Table> <Table> <Table> Instead, use non-nested tables or divs <Table>... </table> <Table>... </table> <Table>... </table> Splits the layout based on the mass nested tables into small tables, so that the entire page (or large table) content does not need to be loaded during display. 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. This not only accelerates the display of the page, but also prevents improper layout changes after the page is loaded. Image uses height and width Table uses table-layout: fixed and uses the col and colgroup labels to specify the width of columns. 10. make informed decisions based on your browser IE, Firefox, Safari, etc. 11. Page Structure example · HTML · HEAD · LINK... CSS files required for page appearance. Minimize the number offiles for performance while keeping unrelated CSS in separate filesfor maintenance. · SCRIPT .... JavaScript. files for functions required during the loading of thepage, but not any DHTML that can only run after page loads. Minimize the number of files for performance while keepingunrelated JavaScript. in separate files for maintenance. · BODY · Uservisible page content in small chunks (tables/divs) that can bedisplayed without waiting for the full page to download. · SCRIPT .... Any scripts which will be used to perform. DHTML. DHTML script. typically can only run after the page has completely loaded and allnecessary objects have been initialized. there is no need to loadthese scripts before the page content. that only slows down theinitial appearance of the page load. Minimize the number of files for performance while keepingunrelated JavaScript. in separate files for maintenance. If any images are used for rolover effects, you should preloadthem here after the 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 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, which instructs the browser to hide a <div> (style. display = "none") in the code "). Cup, suddenly such an element is missing, and the browser has to re-render this part of 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 to re-render the page.

5. Yahoo's suggestions on Webpage Design Performance:

Http://developer.yahoo.com/performance/rules.html
Http://www.cnblogs.com/smjack/archive/2009/02/24/1396895.html