Js anti-blocking loading and js blocking Loading

Js anti-blocking loading and js blocking Loading

Js anti-blocking Loading

<script type="text/javascript">function scriptDomElement (u) {  var s = document.createElement('script');  h = document.getElementsByTagName('body')[0];  s.src = u;  s.async = true;  if(h)h.appendChild(s,h.firstChild);}scriptDomElement('http://*************************?t=20140717');</script>

Javascript loading is not blocked.

This cannot be generalized. If there are few or no external link elements on your page, there will be no download blocking. If your page references a large number of external files, such as css and images, you can directly write all the scripts in the script tag of the page (even below the end of the body Tag) instead of external links, it is also possible that the external css file is not downloaded when the script is running. Generally, the method to be executed during page initialization will be written in the onload event.

How can I determine whether JS loading is complete during dynamic loading?

In the normal loading process, js file loading is synchronized. That is to say, during js loading, the browser will block the parsing of the following content. At this time, dynamic loading is particularly important. Because it is asynchronously loaded, it can be automatically downloaded in the background, without interfering with the normal parsing of other content, you can increase the speed of page loading for the first time.
In IE or some IE kernel-based browsers (such as Maxthon), it is determined by the readystatechange method of the script node. In other browsers, it is usually determined by the load event. The following code:
Function dynamicLoad () {var _ doc = document. getElementsByTagName ('head') [0];
Var script = document. createElement ('script ');
Script. setAttribute ('type', 'text/javascript ');
Script. setAttribute ('src', 'jquery-1.4.js ');
Script. onload = script. onreadystatechange = function (){
If (! This. readyState | this. readyState = 'loaded' | this. readyState = 'complete '){
Alert ('done');} script. onload = script. onreadystatechange = null ;}}
This is because if the script node is not added to the DOM tree, it will not respond to the script load event in chrome and firefox. But IE does .. The modified code is as follows:
Function dynamicLoad () {var _ doc = document. getElementsByTagName ('head') [0];
Var script = document. createElement ('script ');
Script. setAttribute ('type', 'text/javascript ');
Script. setAttribute ('src', 'jquery-1.4.js ');
_ Doc. appendChild (script );
Script. onload = script. onreadystatechange = function (){
If (! This. readyState | this. readyState = 'loaded' | this. readyState = 'complete '){
At this time, all browsers can respond. You can try it ~