Blocking downloads for external JS
All browsers in the download JS, will prevent all other activities, such as other resources download, content rendering and so on. To the JS download, resolution, execution is completed before beginning to continue to download other resources in parallel and render content.
Some people will ask: Why JS can not be like CSS, image like the parallel download? Here is a brief introduction to the principle of browser construction page,
When the browser receives the HTML document from the server and converts the HTML into a DOM tree in memory, if a node is referenced with CSS or image in the conversion process, 1 requests are sent to request CSS or image, and then continue with the following conversion Without waiting for the request to return, and when the request returns, just put the returned content in the corresponding position in the DOM tree and OK. But when the reference JS, the browser sent 1 JS request will be waiting for the request to return. Because browsers need 1 stable DOM tree structure, and JS is very likely to have code directly changes the DOM tree structure, such as using document.write or appendchild, Even the direct use of the location.href to jump, the browser to prevent the occurrence of JS to modify the DOM tree, the need to rebuild the DOM tree, so it will block other downloads and rendering.
Blocked download diagram: The following image is to visit the Blogjava home Page Time Waterfall Chart, you can see that the beginning of the 2 images are in parallel download, and the following 2 js are blocked download (a 1 download).
Blocking downloads embedded in JS
Embedding JS refers to the JS code written directly in the HTML document. The above said that the reference to the external JS will block the subsequent download of resources and content, which embedded JS will be how to block, see the following column 2 code:
Code 1:
Copy Code code as follows:
<ul>
<<li>blogjava></li>
<li>CSDN></li>
<li> Blog Park ></li>
<li>ABC></li>
<li>AAA></li>
<ul>
<div>
<script type= "Text/javascript" >
Loop for 5 seconds.
var n = number (new Date ());
var n2 = number (new Date ());
while ((N2-n) (6*1000)) {
N2 = number (new Date ());
}
</script>
<div>
<ul>
<li>MSN></li>
<li>GOOGLE></li>
<li>YAHOO></li>
</ul>
</div>
Code 2 (the code in Test.zip is the same as code 1 's JS code):
Copy Code code as follows:
<div>
<ul>
<li>blogjava></li>
<li>CSDN></li>
<li> Blog Park ></li>
<li>ABC></li>
<li>AAA></li>
<ul>
<div>
<script type= "Text/javascript" src= "Test.zip" ><script>
<div>
<ul>
<li>MSN></li>
<li>GOOGLE></li>
<li>YAHOO></li>
</ul>
</div>
After running, you will find that code 1, in the first 5 seconds of the page is a blank, 5 seconds after the page is all displayed. In code 2, the first 5 seconds in the first display, BLOGJAVA,CSDN, 5 seconds after MSN display.
It can be seen that embedded JS blocking the rendering of all content, and external JS will only block the subsequent content of the display, 2 ways will block the subsequent download of resources.
Embedding JS causes the problem of CSS blocking loading
How can CSS block load? CSS can be downloaded in parallel, under what circumstances will be blocked load (in the test observation, IE6 under the CSS are blocked load, the following test under IE6):
Code 1 (for the effect, here are 1 foreign server CSS):
Copy Code code as follows:
<title>js test>title>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<link type= "Text/css" rel= "stylesheet" href= "Http://69.64.92.205/Css/Home3.css"/>
<body>
<</span>br/>
</body>
Time Waterfall Chart:
Code 2 (adds only 1 empty embedded JS):
<title>js test>title>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<link type= "Text/css" rel= "stylesheet" href= "Http://69.64.92.205/Css/Home3.css"/>
<script type= "Text/javascript" >
function A () {}
</script>
<body>
<</span>br/>
</body>
Time Waterfall Chart:
From the time waterfall can be seen in code 2, CSS and pictures do not download in parallel, but wait until the CSS download to download the following 2 pictures in parallel, when the CSS followed by embedded JS, the CSS will be blocked behind the download of resources.
One might ask, why don't you say that embedded JS blocks the resources behind, but that CSS is blocked? Think we are now using 1 empty functions, parsing this empty function 1ms is enough, and the back of the 2 images are after the CSS download 1.3s after the download began. We can also try to embed JS in front of the CSS, there will be no blocking situation.
Root cause: Because browsers maintain the order of CSS and JS in HTML, stylesheets must be loaded and parsed before the embedded JS is executed. and embedded JS will block the subsequent load of resources, so there will be the above CSS blocking downloads.
Embedded JS should be placed in what position
1, put at the bottom, although put at the bottom will block all rendering, but will not block the resource download.
2, if embedded in the head of JS, please embed JS in the CSS header.
3. Use defer
4, do not in the embedded JS call run longer functions, if you must use, you can use settimeout to call
PS: Many sites like to embed JS in the head, and the habit is placed behind the CSS, for example, see www.qq.com, of course, there are many sites are JS placed in front of the CSS, such as Yahoo,google
[Statement] Reproduced please indicate the source: http://www.blogjava.net/BearRui/. No commercial!
