Introduced synchronous load, asynchronous loading, lazy loading

Synchronous load synchronous mode, also known as blocking mode, the browser will prevent subsequent processing, stopping the analytical follow-up documents, execution, such as the rendered image. Browser reason synchronous mode, because the js file has loaded the default behavior of the operation of the dom, redirect the output document, etc. Therefore, the synchronization is the most secure. Before js will usually be loaded into the body end tag that can be loaded last in js page rendering to minimize obstruction of the page. This will let the page displays

simply put

js on the page to load can block the unloaded css, html loaded with rendering

• asynchronous loading is also called non-blocking mode loaded, the browser downloads js the same time, while also perform the subsequent page processing.

In the script tag, create a script with js elements and inserted into the document, this is the asynchronous loading js files.

• Synchronous loading process is the waterfall model, asynchronous loading process is concurrency model.

simply put

• asynchronous loading will not block unloaded css, html loading,

Lazy loading (lazy loading)

 

Lazy loading: some js code page is not initiated immediately when needed, and in some cases later was needed. Lazy loading is not initially load these temporarily without js, but then be loaded asynchronously or by controlling js when needed later.

simply put

• When using the re-execution, execution does not

Code sharing the encapsulated

 function loadScript() {
   var script = document.createElement("script");
   script.type = "text/javascript";
 //<script style = “text/javascript”>
   script.src = url;
 //<script style = “text/javascript” url = “”>
   if(script.readyState) {}
// readyState载入中
   (function() {
   function async_load() {
   var s = document.createElement('script');
   s.type = 'text/javascript';
   s.async = true;
   s.src = 'Http://yourdomain.com/script.js' ;
    var X = document.getElementsByTagName ( 'Script') [0 ]; 
   x.parentNode.insertBefore (S, X); 
// the parentNode parent node returns the element 
 / / insertBefore inserted next child node of the current node 
   }
    IF (window.attachEvent)
  // the attachEvent layer code with the phase separation layer ul 
  window.attachEvent ( 'the onload' , async_load);
    the else 
  window.addEventListener ( 'Load', async_load, to false ); 
   }) ();