No blocking load JS, to prevent JS load can not affect the page display problem _javascript tips

Browser load static resources and JS way is linear loading, so the general situation can be put JS to </body> before, to prevent the UI thread blocking.

And some times we both want JS in the entire page of the head load, and worry about JS blocking caused the site to load slowly, you can use the Non-blocking loading JS technology.

Dynamic script Elements dynamically scripting elements

Dom allows us to dynamically create almost all of the document content of HTML using JavaScript, and a new <script> element can be created very easily through the standard DOM:

var script = document.createelement ("script"); 
Script.type = "Text/javascript"; 
SCRIPT.SRC = "File1.js";  

The new <script> element loads the file1.js source file. This file starts downloading immediately after the element has been added to the page. The point of this technique is that no matter where you start the download, the download and run of the file will not block other page processing.

When a file is downloaded using a dynamic script node, the returned code is usually executed immediately (except for Firefox and Opera, which waits for all previous dynamic script nodes to finish executing).

In most cases, we want to invoke a function to implement a dynamic download of JavaScript files. The following function encapsulation implements the standard implementation and IE implementation:

function Loadscript (URL, callback) { 
  var script = document.createelement ("script"); 
Script.type = "Text/javascript"; 
    
  if (script.readystate) {//ie 
    script.onreadystatechange = function () { 
     if (script.readystate = = "Loaded" | | Script.readystate = = "complete") { 
      script.onreadystatechange = null; 
      Callback ();  
     } 
    ; 
   }  
   else {//others 
    script.onload = function () {callback ();} 
   ;  
  } 
  script.src = URL; 
  document.getElementsByTagName ("Head") [0].appendchild (script);  
 } 
 
Loadscript ("File1.js", function () {//Call 
  alert ("File is loaded!");  

This function accepts two parameters: The URL of the JavaScript file and a callback function that fires when JavaScript receives completion. Property checks are used to determine which event to monitor. The last step of the SRC attribute and add the JavaScript file to the head.

Dynamic script loading is the most common pattern in non-blocking JavaScript downloads because it can be used across browsers and is easy to use.

The above non-blocking load JS, to prevent JS load will not affect the page to show the problem is small series to share all the content, I hope to give you a reference, but also hope that we support the cloud habitat community.