JavaScript - load asynchronously

Synchronous mode, also known as blocking mode, blocks subsequent processing by the browser, stops subsequent parsing, and therefore stops subsequent file loading (such as images), rendering, and code execution.

The reason why   js  needs to be executed synchronously is that there may be behaviors such as outputting  document  content, modifying dom , and redirecting in js  , so it is safe to execute synchronously by default.

js is in synchronous mode by default, so we usually write it before </body>, because once we encounter such js code, we have to stop and load it.

Think about when we open a page with nothing, do you still want to use it? It must be the most basic html, css has to be loaded.

Disadvantages of js asynchronous loading: There are some loading tool methods, there is no need to block documents, too much js loading will affect the efficiency of the page, once the network speed is not good, then the entire website will wait for js to load without rendering.

There are three ways to implement asynchronous loading in js:

1：defer

defer is loaded asynchronously, but will not be executed until the DOM document is fully parsed. Only IE can be used, and the code can also be written inside the script tag.

    <script  type='text/javascript' src='jq.js' defer='defer'></script>

Then at this time, it will not stop to load the js file, but restart a thread to load the file.

The execution time is when the document has been parsed.

2. async asynchronous loading, when the loading is complete, it will be executed. Async can only load external scripts, and cannot write js into script tags.

Compatible with IE9 and above.

    <script  type='text/javascript' src='jq.js' async='async'></script>
    <script  type='text/javascript'  async='async'>
       var a=3;
    </script>

The second is wrong, you can't write code in it. The others are the same as the first one.

3.

onload event. Executed when the object is loaded.

But the script tag on IE does not have this, it provides a status code readyState which stores some state.

script.readyState stores 'loading' at the beginning, and 'complete' or 'loaded' when loading is complete.

IE also provides an event onreadystatechange, but when readystate finds a change, it will trigger.

var script=document.createElement('script');
script.style='text/javascript';
script.src='jq.js';
scrip.onreadystatechange =function() {
    if (script.readyState=='complete'||script.readyState='loaded') {
             //implement
     }
 }

We encapsulate a function, when we need to load a js file asynchronously, and then execute a function callBack when the loading is complete (load the function in the file)

         function loadScript(url,callBack) {
             var script=document.createElement('script');
             script.style='text/javascript';
             if (script.readyState) {
                 script.onreadystatechange=function() {
                     if (script.readyState=='complete'||script.readyState=='loaded') {
                         callBack();
                     }
                 }
             }
             else {
                 script.onload =function() {
                     callBack();
                 }
             }
             script.src=url;//We bind the event first, and then load the file, because if the file is loaded first, in case the file is small and the loading is finished, the following code has not been executed, and the readyState will change, which is embarrassing.
             document.head.appendChild(script);
         }

In this way, if we call it, we have to write it like this.

    loadScript('jp.js',function() {
        // function to be executed
    });

You can also pass strings in and out, so use eval to solve it.

Why? Obviously, if we write the function reference directly, the file will not be loaded. Where does the function reference come from? We set a layer of functions. When preprocessing, we don't care what the code in the function is.