Page load process

* Html parsing process

1. Users enter the URL (assumed to be a html page, and is the first visit), the browser makes a request to the server, the server returns html file;
2. The browser begins to load html code and found <head>to have a label inside the <link>label references external CSS file;
3. the browser also issued a request to the CSS file, the server returns the CSS file;
4. browser to continue loading the html <body>code portion, the CSS file and get our hands already, you can start rendering the page;
(this time will loading by blocking external style, the style will not clog the external load subsequent external script, but will block an external script execution, until the external load and parse style finish.)
(If the async attribute subsequent external script containing (IE is the defer), then style does not block external load and execute the script)
5. browser finds a code <img>label references a picture, make a request to the server. 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-rendering this part of the code;
7 browser found a line of Javascript code that contains the <script>label, quickly run it;
8.Javascript script is executed style.display=”none”, it instructs the browser to hide a lost code <div>. Suddenly less so an element, the browser has to re-render this part of the code;
9. until finally </html>the arrival of execution over the rendering of the page is loaded, the browser tears ......
10. At this time, if the user points bit interface "skinning" button, Javascript allows the browser changed my <link>CSS path of the label;
11. browser convened here you <div><span><ul><li>are, "Everybody pack to pack, we have to start over ......", the browser requests a new CSS file to the server, re-rendering the page.

After the completion of html parsing HTML parsing After the completion of the DOM tree and CSS style has been to begin building presents tree RenderTree

* Process Analysis

Browser to download the order from top to bottom, rendering the order is from top to bottom.
Because the browser uses a top-down parse, parsing will block the browser in the face of styles (link, style) and script file (script), until the external resource load and parse or continue down until after finished parse html.

* JS loaded

Not parallel downloading and parsing (blocking download)
when referring to the JS time, 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.

Guess you like

Origin www.cnblogs.com/HelloJC/p/11290341.html