Home >Web Front-end >JS Tutorial >Summary of JS synchronization, asynchronous and lazy loading implementation

Summary of JS synchronization, asynchronous and lazy loading implementation

php中世界最好的语言Original: 2018-05-12 13:58:041897browse

This time I will bring you a summary of the implementation of JS synchronization, asynchronous and delayed loading, and what are the precautions for the implementation of JS synchronization, asynchronous and delayed loading. The following is a practical case, let's take a look.

1: Synchronous loading

The most commonly used method.

<script src="http://yourdomain.com/script.js"></script>

Synchronous mode, also known as blocking mode , will prevent the browser from subsequent processing and stop subsequent parsing. Only when the current loading is completed, the next step can be performed. Therefore, synchronous execution is safe by default. But if there are behaviors such as outputting document content, modifying DOM, redirection, etc. in js, it will cause page congestion. Therefore, it is generally recommended to place the <script> tag at the end of <body> to reduce page blocking as much as possible. </script>

2: Asynchronous loading

Asynchronous loading is also called non-blocking loading. While the browser is downloading and executing js, it will continue to process subsequent pages. There are three main ways.

Method 1: Also called Script DOM Element

(function(){
 var scriptEle = document.createElement("script");
 scriptEle.type = "text/javasctipt";
 scriptEle.async = true;
 scriptEle.src = "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js";
 var x = document.getElementsByTagName("head")[0];
 x.insertBefore(scriptEle, x.firstChild); 
 })();

attribute is a new asynchronous support in HTML5. This method is called the Script DOM Element method. Both Google Analytics and Google Badge use this asynchronous loading code.

(function(){;
 var ga = document.createElement('script'); 
 ga.type = 'text/javascript'; 
 ga.async = true; 
 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
 var s = document.getElementsByTagName('script')[0]; 
 s.parentNode.insertBefore(ga, s); 
})();

However, this loading method will prevent the onload event from being triggered before the execution is completed. Now, the code of many pages also performs additional rendering work during onload, so it will still block the initialization processing of some pages.

Method 2: Asynchronous loading during onload

(function(){
 if(window.attachEvent){
 window.attachEvent("load", asyncLoad);
 }else{
 window.addEventListener("load", asyncLoad);
 }
 var asyncLoad = function(){
 var ga = document.createElement('script'); 
 ga.type = 'text/javascript'; 
 ga.async = true; 
 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
 var s = document.getElementsByTagName('script')[0]; 
 s.parentNode.insertBefore(ga, s);
 }
)();

This method just puts the method of inserting script in a function, and then puts it in the onload method of the window Execution, thus solving the problem of blocking the onload event triggering.

Note: The difference between DOMContentLoaded and load. The former is after the document has been parsed and the DOM elements in the page are available, but the pictures, videos, audio and other resources in the page have not been loaded. The function is the same as the ready event in jQuery; the difference in the latter is that all resources on the page have been loaded.

Method 3: Other methods

Due to the dynamic nature of JavaScript, there are many asynchronous loading methods: XHR Injection, XHR Eval, Script In Iframe, Script defer attribute, document.write(script tag).

XHR Injection (XHR injection): Get javascript through XMLHttpRequest, and then create a script element to insert into the DOM structure. After the ajax request is successful, set script.text to the responseText returned after the request is successful.

 //获取XMLHttpRequest对象，考虑兼容性。
 var getXmlHttp = function(){
 var obj;
 if (window.XMLHttpRequest)
  obj = new XMLHttpRequest();
 else
  obj = new ActiveXObject("Microsoft.XMLHTTP");
 return obj;
 }; 
 //采用Http请求get方式;open()方法的第三个参数表示采用异步(true)还是同步(false)处理
 var xmlHttp = getXmlHttp();
 xmlHttp.open("GET", "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js", true);
 xmlHttp.send(); 
 xmlHttp.onreadystatechange = function(){
 if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
  var script = document.createElement("script");
  script.text = xmlHttp.responseText;
  document.getElementsByTagName("head")[0].appendChild(script);
 }
 }

XHR Eval: Different from the way XHR Injection executes responseText, responseText is directly executed in the eval() function.

//获取XMLHttpRequest对象，考虑兼容性。
 var getXmlHttp = function(){
 var obj;
 if (window.XMLHttpRequest)
  obj = new XMLHttpRequest();
 else
  obj = new ActiveXObject("Microsoft.XMLHTTP");
 return obj;
 }; 
 //采用Http请求get方式;open()方法的第三个参数表示采用异步(true)还是同步(false)处理
 var xmlHttp = getXmlHttp();
 xmlHttp.open("GET", "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js", true);
 xmlHttp.send(); 
 xmlHttp.onreadystatechange = function(){
 if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
  eval(xmlHttp.responseText);
  //alert($);//可以弹出$,表明JS已经加载进来。click事件放在其它出会出问题，应该是还没加载进来
  $("#btn1").click(function(){
  alert($(this).text());
  });
 }
 }

Script In Irame: Insert an iframe element in the parent window, and then perform the operation of loading JS in the iframe.

 var insertJS = function(){alert(2)};
 var iframe = document.createElement("iframe");
 document.body.appendChild(iframe);
 var doc = iframe.contentWindow.document;//获取iframe中的window要用contentWindow属性。
 doc.open();
 doc.write("<script>var insertJS = function(){};<\/script><body onload=&#39;insertJS()&#39;></script>

The above is the detailed content of Summary of JS synchronization, asynchronous and lazy loading implementation. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of the use of Class feature in es6Next article：Detailed explanation of the use of Class feature in es6

See more

Summary of JS synchronization, asynchronous and lazy loading implementation

Related articles