Browser loading JS blocking and non-blocking

These days because of the project needs, to achieve a series of JS file loading problems, so, according to the conventional thinking to write a pass, the sad reminder is that after testing the problem;

Why there are so many questions, think carefully or to the browser loading JS principle understanding is not thorough, so I read a lot of information and some of their own practice, summed up the following content;

1, JS in the browser blocking

The general understanding is that the browser in the loading JS will block the browser's rendering operation, but the page performance decision does not want us to load JS when the page rendering impact, so we often put the JS file before the body to load. Instead of putting it in the head to block the rendering of the page. So the question is, if we put JS in the head, how does the browser execute it, in order to load or parallel load it?

In fact, under the old browser, are in order to load, which ensures that the loading of JS dependency will not occur. But the new browser has begun to allow parallel loading JS, that is, I can download the JS file, but still sequential execution of the file.

2, document.write use

We usually use document.write to generate an ad, often this way: document.write (' <script id= ' Posad "type=" Text/javascript "src="/HTTP/ 192.168.3.107:888/control.js?platformcode=tcy&postioncode=a1&filecode=10030 "><\/script>");

This operation is also blocked; a classmate asked, you this is the external JS, then inside the chain, I have done the test, the same, will be blocked.

It is important to remember to make sure that it executes before Dom ready, otherwise it will re-render the entire page.

3, then how to implement non-blocking, then you need to dynamically load JS, through appendchild (script) This way to asynchronous loading JS, in fact, can also be used XHR object to deal with, but this can only solve the non-cross-domain problem, cross-domain xhr is powerless. Another option is the defer and async properties of the new browser, so that you can write it to the head without blocking the browser's rendering.

So after I understand the above, I simply implement a dynamic loading JS module:

    //Loadjs Module(function () {      varLoadjs =function(Deps, callback) {if(typeofDeps = = ' String ') {Deps=[Deps]; }        varLen =deps.length; varj = 0 ; varfn =function() {J++; if(J = =Len)              {callback.apply (window);        }        };  for(vari = 0; i < deps.length; i++) {_loadmod (DEPS[I],FN);      };      }; var_loadmod =function(URL,FN) {varHead = Document.head | | document.getElementsByTagName (' head ') [0] | |document.documentelement; varScript = document.createelement (' script '); Script.type= ' Text/javascript '; Script.charset= ' Utf-8 '; Script.async=true; SCRIPT.SRC=URL; Script.onload= Script.onreadystatechange =function() {             if(!script.readystate | | script.readystateinch{' Loaded ': 1, ' Complete ': 1}) {Script.onload= Script.onreadystatechange =NULL;                    FN ();                    Head.removechild (script); Script=NULL;       }} head.insertbefore (script, head.firstchild); } Window.loadjs=Loadjs; })();

The above is also my two days of preliminary termination, there is not the right place also hope that the children's shoes.

Interested can also refer to these two blog: http://www.w3cfuns.com/blog-5443287-5401014.html or http://www.cnblogs.com/hongcaomao/archive/ 2012/03/27/javascript_loadad.html

Browser loading JS blocking and non-blocking