Research on script tags in HTML_html/css_WEB-ITnose

Script's blocking feature

Scripts without async or defer attributes, as well as inline scripts, are fetched and executed immediately, before the browser continues to parse the page. - MDN

the blocking nature of JavaScript, which is to say that nothing else can happen while JavaScript code is being executed. In fact, most browsers use a single process for both user interface ( UI) updates and JavaScript execution, so only one can happen at any given moment in time. The longer JavaScript takes to execute, the longer it takes before the browser is free to respond to user input. - Nicholas C. Zakas "High Performance JavaScript 》

The meaning of the two quotes quoted above is roughly that when the browser parses the DOM document, it will download and execute it immediately once it encounters the script tag (without defer and async attributes). The browser's parsing of the document will stop until the script code is executed. On the one hand, this blocking behavior occurs because the browser's UI rendering, interactive behavior, etc. are single-threaded operations. On the other hand, the code in the script may affect the parsing of subsequent documents, such as the following code:

html<script type="text/javascript">  document.write("The date is " + (new Date()).toDateString());</script>

This blocking feature will seriously affect the user experience. Here are several optimization solutions:

• Try to put the script at the back of the document to reduce the blocking of the document. It is best to put in front of .
• Try to put the scripts in one file according to their dependencies

But a better way is the following nonblocking script loading method:

1. Deferred Script

Script has a defer attribute. A script with this attribute indicates that this script will not modify the DOM, so this script will be triggered after the document tree is fully parsed ( to be executed after the document has been parsed). But this attribute is not supported by all browsers.

2. Dynamic Script Elements (dynamic script)

The principle is to use script to create a script element, set src to the URL where the script needs to be dynamically added, and then add this script to the DOM. Sometimes we need to perform certain operations after the dynamic script is loaded. This requires us to add a callback function after the script is loaded. This can be achieved through the onload event of script. The following implementation code:

jsfunction loadJS(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{     script.onload = function(){      callback();    }      }  script.src = url;  document.getElementsByTagName('head')[0].appendChild(script);}

Sometimes we need our dynamically loaded scripts to be executed in the order we load them, but the above implementation does not guarantee this. The loaded scripts will be executed immediately after the download is completed. , not in the order we defined. It is not difficult to solve this problem. You can refer to the following code:

jsloadJS('a.js', function(){  loadJS('b.js', function(){    loadJS('c.js', function(){      app.init();    })  })})

When there are a large number of scripts that need to be added dynamically, you will also encounter problems when writing like this; another solution is to use some ready-made Libraries, such as LABjs

3. XMLHttpRequest Script Injection (XHR dynamic insertion)

The principle is to use the XMLHttpReques (XHR) object to dynamically obtain a piece of JS code and then insert it into the document.
One advantage compared to other methods is that it can be "lazy executed", that is, the JS code has been downloaded first and not executed, and can be executed when needed (?) (the previous dynamic script will be executed immediately after downloading implement). Implementation code:

jsfunction xhrLoadJS (url, callback){  var xhr = new XMLHttpRequest();  xhr.open('get', url, true);  xhr.onreadystatechange = function(){    if(xhr.readyState == 4){      if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){        var script = document.createElement('script');        script.type = 'text/script';        script.text = xhr.responseText;        eval(xhr.responseText);  // 执行代码        document.body.appendChild(script);        callback();      }    }  }  xhr.send(null);}

The disadvantage is that cross-domain requests cannot be made

Reference

Javascript loading and execution

MDN Script element

Chapter 1 "Loading and Execution" of "High Performance JavaScript" by Nicholas C. Zakas