HTML page is loaded and resolution process:
1. Users enter the URL (assumed to be a html page, and is the first visit), the browser sends a request to the server, the server returns html file.
2. html browser begins to load the code, find a <link> tag references external CSS files within the <head> tag.
3. The browser also issued a request to the CSS file, the server returns the CSS file.
4. The browser continues to load the code in html <body> section, and the CSS file has got hands, you can begin to render a page.
The browser sees a <img> tag references a picture request to the server code. In this case the browser does not wait until the picture is downloaded, but continue to render the code behind.
6. Return to image file server, because the picture takes up a certain area, affecting the back of the paragraph arrangement, the browser needs to go back and re-render this part of the code.
7. browser found <script> tag contains a line of Javascript code, it runs quickly.
8. Javascript script execution of this statement, it instructs the browser to hide out in the code of a <style> (style.display = "none "). Cup ah, suddenly less so an element, the browser has to re-render this part of the code.
9. until finally </ html> soon, browser tears ......
10 and so on, not finished, the user interface point a bit of "skinning" button, Javascript allows the browser for a moment <link> CSS path labels.
11. browser convened all of you <div> <span> <ul > <li> Who "Everybody pack to pack, we have to start over ......", the browser requests a new CSS file to the server, re-rendering the page.
Related:
First, the browser load and render html in order
1. IE download order from top to bottom, are rendered in the order from top to bottom, downloading and rendering are performed simultaneously.
2. when rendering to a certain part of the page, all of the above have been part of their download is complete (not to say that all associated elements have been downloaded).
3. If you encounter interpretive semantic tags embedded in files (JS script, CSS style), then the time of the download process will enable IE to download a separate connection.
4. style sheets after the download is complete, it will be parsed and all style sheets previously downloaded together, after completion of the analysis, will have had all the elements (including previously rendered) re-rendering.
5. JS, CSS redefined if the after-defined function defined function to cover the front.
Two, JS load
1 not parallel downloading and parsing (blocking download).
2. When quoted JS when the browser sends a js request would have been waiting for the return of the request. Because the browser needs a stable DOM tree structure, and is likely to have in JS code directly change the DOM tree structure, such as using document.write or appendChild, location.href even jump directly use the browser to prevent JS modify the DOM tree, you need to rebuild the situation DOM tree, so it will block other downloads and rendering.
Third, how to speed up HTML page load speed
1. page weight loss:
. A too fat affect the loading speed of the page is the most important factor.
b. Remove unnecessary space, and comments.
c. The inline the script and css moved to an external file.
d. You can use HTML Tidy to HTML to lose weight, you can also use some compression tool to lose weight to JavaScript.
2. Reduce the number of files:
a. to reduce the number of references to the page file can reduce the number of HTTP connections.
b. a lot of JavaScript, CSS files can be merged the best merger.
3. Reduce domain name query:
. A domain name is the DNS queries and resolve time-consuming, so to reduce the reference to an external JavaScript, CSS, images and other resources, use a different domain name, the better.
4. The data cache reuse:
A data cache reuse.
5. Optimize the load order of page elements:
A first load the page initially displays the content and associated JavaScript and CSS, and then load the HTML related things, like what not initially very fat resources related images, flash, video display. it is loaded last.
6. Reducing the number of inline JavaScript:
. A browser parser will assume inline JavaScript page structure will change, so the use of inline JavaScript larger overhead.
b. Do not use document.write () method outputs the contents of this, the use of modern W3C DOM methods to deal with the page content for modern browsers.
7. Use of modern CSS and legitimate label:
A label to reduce the use of modern CSS and images, such as the use of modern CSS + text can replace some of the text-only images.
b. Use a legitimate label to avoid doing "error correction" operations such as parsing HTML browser, also may be to HTML HTML Tidy to lose weight.
8. Chunk your content:
a. Do not use a nested table, and a non-nested table or div. The table is based on bulk nested layout table into a plurality of small, thereby eliminating the need to wait until the entire page (or a large table) until they have finished loading all of the contents of the display.
9. Specify the image and table size:
. A browser can determine if the image or the size of the table immediately, then it can not display the page immediately and re-do some of the work layout arrangements.
b. This not only speeds up the display of pages, but also can prevent some inappropriate to change the page finishes loading layout.
c. image using height and width.
https://zhidao.baidu.com/question/426714311168151572.html