The order summary of the browser loading resources such as HTML, DOM, CSS, JAVASCRIPT, IMAGE, FLASH, IFRAME, src attribute, etc.

the order in which page responses are loaded: 1, Domain name analysis, loading html-> loading js and css-> loading pictures and other informationThe DOM detailed steps are as follows:

1. Parses the HTML structure.
2. Load external scripts and style sheet files.
3. Parse and execute the script code.
4. Constructs an HTML DOM model.
5. Load external files such as pictures.
6. The page has finished loading.

        body        {            font-sie:12px;        }    </style>    <link href= "style.css" rel= "stylesheet" type= "Text/css" media= "All"/>    <script src= "Js.js" type= "Text/javascript" ></script>function F1 () {}        </script>            </div>    <script type= "Text/javascript" >        function f2 () {} </script></body >     

The load parsing order for the above code is:?

html→head→title→ #text (page title) →style→ load style → parse style →link→ load external style sheet file → parse external style sheet →script→ load external script file → parse external script file → execute external Script →body→div→script→ load script → parse script → execute script →img→script→ load script → parse script → execute script → load external image file → page initialization complete

The DOM ready method of jquery can manipulate the DOM before loading other information, such as pictures, before the window.onload event triggers.

2, <script> tag is very convenient, as long as the Web page, the browser will read and run. However, it has two serious flaws.

(i) Strict reading order (JS section code dependency problem)

(ii) Performance issues

The browser uses the "sync mode" load <script> tag, which means that the page will "jam" (blocking), wait for the JavaScript file to load, and then run the HTML code later. When there are multiple <script> tags, the browser cannot read at the same time, must read one more to read another, resulting in significantly longer read time, slow page response. To solve these problems, you can load JavaScript files dynamically using the Dom method. The code is as follows:

 　　function loadscript (URL) { var script = document.createelement ("script"); 　　　　Script.type = "Text/javascript"; SCRIPT.SRC =     

The idea is that the browser instantly creates a <script> tag and then reads the JavaScript file "asynchronously". This does not cause the page to clog, but it can cause another problem: the JavaScript files that are loaded are not in the original DOM structure, so in the Dom-ready (domcontentloaded) and Window.onload events The specified callback function is not valid for it.

3. Shorten the page load time method

For example, to load three external JS files jquery.js, world.js, Hello.js can use the following method, compared to the head header introduced three <script> Or, in the body, the last introduction significantly shortens the time to load.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> functionLoadscript (URL, callback) {var script = document.createelement ("Script"); Script.type = "Text/javascript";//IeIf(script.readystate) {Script.onreadystatechange =function() {if (script.readystate = = "Loaded" | | script.readystate = = "complete") {Script.onreadystatechange =null callback ();}} } else {// non ie script.onload = function () {callback ();} script.src = URL; document.getElementById ("Head" // First step loading jquery class library Loadscript ("Jquery/jquery-1.4.1.js",  Function () {// The second step loads hello.js loadscript ("Js/hello.js", Span data-mce-= "" >function () {// Third step load World.js loadScript ("Js/world.js", function () {});}); }); </script> </body>          

4. When the execution engine encounters "<script>", the download and rendering of the page must wait for <script> execution to complete.

5, image, flash and other resources load order

Images, the order in which Flash is loaded is consistent with the order in which they appear, even if the order in which they appear is in the nested div.

6. Loading order of background images

The browser will not begin rendering the style until it has been parsed for all styles, including the external CSS file, and will automatically ignore the overridden style sheet.

So this is an important revelation for us: In a simple HTML and CSS page, the background image is always last loaded , if we want to use a smaller background image as a placeholder, to load a larger picture or Flash file when the user to prompt, Most of the time I am afraid it will not be effective, because the background image is sometimes even after the big picture or Flash file loading completed before it will be loaded. Of course, one of the important prerequisites here is "a page made of HTML and CSS" because JavaScript can have a great impact on the loading of page elements (see 7)

7. JavaScript can have a great impact on the loading of page elements

Reference: http://www.cnblogs.com/dkarthas/archive/2010/07/04/1770989.html

8, about the modern browser three points of attention:

• Law one: Whether the resources download depends on the JS execution results.
• Law two: JS execution relies on the latest CSS rendering.
• Law three: Modern browsers exist prefetch optimization (parallel download).

Conclusion: The head of the external JS, regardless of put, CSS files can not be parallel with the request in the body

Inline JS in head the CSS file can be parallel to the request in the body as long as it is in front of all the inline CSS

Inline JS in head the CSS file cannot be parallel to the request in the body as long as it is behind any of the outside CSS.

The order summary of the browser loading resources such as HTML, DOM, CSS, JAVASCRIPT, IMAGE, FLASH, IFRAME, src attribute, etc.