Blocking download of external JS

Reproduced in: http://www.cnblogs.com/mofish/archive/2011/09/29/2195256.html

All browsers in the download JS, will block all other activities, such as the download of other resources, content rendering and so on. Until JS is downloaded, parsed, executed, and then continues to download additional resources and render the content in parallel.

Some people will ask: Why JS can not be like CSS, image parallel download? Here is a brief introduction to how the browser constructs the page,
When the browser receives an HTML document from the server and converts the HTML into a DOM tree in memory, if a node is found referencing a CSS or image in the process, it will send 1 requests to request the CSS or image, and then proceed to the following conversion , instead of waiting for the request to return, when the request returns, simply put the returned content in the corresponding position in the DOM tree to be OK. But when JS is quoted, the browser sends 1 JS request and waits for the request to return. Because the browser needs 1 stable DOM tree structure, and JS is very likely to have code directly changed the DOM tree structure, such as using document.write or appendchild, Even the direct use of the location.href to jump, the browser in order to prevent the occurrence of JS modified DOM tree, the need to rebuild the DOM tree, so it will block the other download and rendering.

Blocking download diagram: Is the time to visit the Blogjava home page waterfall, you can see that the beginning of the 2 images are parallel download, and the back of the 2 js are blocked download (a 1 download).

Blocking download with JS embedded

Embedded JS refers to the JS code that is written directly in the HTML document. It said that the reference to the external JS will block the subsequent resource download and subsequent content rendering, which embedded JS will be how to block, see the following column 2 code:
Code Listing 1 :

< div >      < ul >          < li > blogjava </ li >          < li > CSDN </ li >          < li > 博客园 </ li >          < li > ABC </ li >          < li > AAA </ li >      < ul >       </ div >  < script type ="text/javascript" >     // 循环5秒钟      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 >

After running, you will find code 1, in the first 5 seconds on the page is a blank, 5 seconds after the page is all displayed. Code 2, the first 5 seconds of BLOGJAVA,CSDN and so on first display, 5 seconds after MSN display.
It can be seen that embedding JS will block the rendering of all content, while external JS will only block the subsequent display of content, 2 ways will block the subsequent download of resources.

Embedded JS causes CSS blocking loading problems

How does a CSS block load? CSS can be downloaded in parallel, under what circumstances will appear blocking loading (in the test observation, IE6 under the CSS is blocked loading, the following test under non-IE6):
Code 1 (for the effect, here is a selection of 1 foreign server CSS):

< htmlxmlns ="http://www.w3.org/1999/xhtml" >     < head >       < title > js test </ title >       < metahttp-equiv ="Content-Type"  content ="text/html; charset=UTF-8"   />         < link type ="text/css"  rel ="stylesheet"  href ="http://69.64.92.205/Css/Home3.css"   />     </ head >     < body >         < imgsrc ="http://www.blogjava.net/images/logo.gif"   />< br />          < imgsrc ="http://csdnimg.cn/www/images/csdnindex_piclogo.gif"   />     </ body ></ html >

Time Waterfall Chart:

Code 2 (add only 1 empty embedded JS):

< head >     < title > js test </ title >     < metahttp-equiv ="Content-Type"  content ="text/html; charset=UTF-8"   />     < link type ="text/css"  rel ="stylesheet"  href ="http://69.64.92.205/Css/Home3.css"   />   < scripttype ="text/javascript" >         function  a(){}   </ script ></ head >< body >         < imgsrc ="http://www.blogjava.net/images/logo.gif"   />< br/>         < imgsrc ="http://csdnimg.cn/www/images/csdnindex_piclogo.gif"   /></ body >

Time Waterfall Chart:

From the time waterfall diagram can be seen, code 2, CSS and pictures are not parallel download, but wait for the CSS to download after the download of the next 2 images, when the CSS followed by embedded JS, the CSS will appear blocking the download of resources behind the situation.
Some people may ask, why not talk about embedded JS blocking the resources behind, but that CSS blocked? Think we now use 1 empty function, parse this empty function 1ms is enough, and the next 2 images are waiting for the CSS download 1.3s after downloading. You can also try to put embedded JS in front of the CSS, there will be no blocking situation.

Root cause: Because the browser will maintain the HTML in the order of CSS and JS, the stylesheet must be loaded before the embedded JS execution, parsing finished. Embedded JS will block the subsequent loading of resources, so the above CSS blocking download situation.

Embedded JS should be placed in what position

1, at the bottom, although placed at the bottom will still block all rendering, but will not block the download of resources.

2, if embedded JS placed in the head, please put embedded JS in front of the CSS.

3. Using defer

4, do not in the embedded JS call long-running function, if must be used, you can use SetTimeout to invoke

PS: Many websites like to embed JS in the head, and used to put behind the CSS, such as See www.qq.com, of course, there are many websites to put JS in front of the CSS, such as Yahoo,google

Blocking download of external JS