Three methods to realize JS asynchronous loading

One 、 Why write Load asynchronously ：

①js Loading itself belongs to Synchronous loading Of , load js Document meeting Blocking documents , Once the network speed is bad , So the whole site will wait js Loading without subsequent rendering, etc . But some tools and methods need Load on demand , There are some tools js File it will not change the page , Use reload , No need not load .

② But in the actual development, we only need to put script The tag is placed at the bottom of the page . There is no need to write Redundant code , But loading on demand must be the top priority of the interview ！！！

Two 、JS Load asynchronously There are three solutions to this problem ：

①defer

​ script Add... To the label defer attribute , Load asynchronously

​ 1. But wait dom All documents have been parsed （dom Tree generated ） To be executed .

​ 2. Only IE It works ;

②async

​   script Add... To the label async attribute , Load asynchronously

​   1. Execute after loading ;async Only external scripts can be loaded

​   2. Can't take js Written in script In the label .

​   3.w3c standard ,IE9 The following is not supported

③ Encapsulate a function compatible asynchronous load js File, and the functions in the file can be executed on demand （ Load on demand ）

<script>
        function loadScript(url,callback){
            //url It's loaded on demand js file 
            //callback It's loaded on demand js A function in the file 

            // 1.  Create a script label 
            var script = document.createElement('script');    
            //  Handle ie Compatibility 
            if(script.readyState){
                script.onreadystatechange = function(){
                    //  If script Download completed 
                    if(script.readyState == 'complete' || script.readyState == 'loaded'){
                        callback();
                    }
                }
            }else{
                //  monitor script Download status of   When the status changes to download complete   Re execution callback
                script.onload = function(){
                    callback();
                }
            }
            // The purpose introduced later is if IE If the download is too fast （ Faster than reading programs ）
            //IE Of readystatechange  When the event detects the status code , It's already from loading become complete perhaps loaded（ Finished loading the file at a very fast speed , You haven't had time to test ）
            //  Then if you test it again, it won't change , It's always been complete perhaps loaded
            // This time is a hindsight , The test is useless .
            // 2.  to script add src  The introduction of a js file 
            script.src = url;
            // 3.  Append to body
            document.body.appendChild(script);
        }
    </script>

3、 ... and 、 Finally added ： document Three states

​   ①loading         Loading status ,dom The tree is being drawn

​   ②interactive    Active state ,dom Tree drawing complete

   ③complete     Completion status （ Older browsers may be loaded）,dom The tree drawing is completed and all resources are downloaded

This is recorded for future use , I also hope the big guys can communicate more , Leave more messages , Point out my shortcomings ！

You can study it if you need it ！！