js的异步加载

//方法一：
 <script src="demo.js" defer></script>
//方法二： 
   <script src="demo.js" async></script>
//asynchronous javascript and xml => ajax 
    <!-- defer与async的区别 -->
    <!-- defer需要等待dom全部解析完才执行，且只能在ie9以下的浏览器使用 -->
    <!-- async是w3c的标准方法，加载完立刻执行，只能加载外部脚本文件 -->
   //方法三：
     <script>
        function loadScript(url,callback){
            var script = document.createElement('script');
            script.type = "text/javascript";
            // 先绑定事件
            if(script.readyState){   //ie没有onload的方法 只有readyState状态
                script.onreadystatechange = function(){
                    if(script.readyState == 'loaded'||script.readyState == 'complete'){
                        // callback();
                        // eval(callback);
                        tools[callback]();
                    }
                }
            }else{   //兼容safari  chrome firefox opera
                script.onload = function(){
                    // callback();
                    // eval(callback);
                    tools[callback]();
                }
            }
            script.src = url;
            document.head.appendChild(script);
        }
        // loadScript('tri.js',function(){
        //     test();
        // });
        // loadScript('tri.js',"test()");
        loadScript('tri.js',"test");    
    </script>
    //tri.js
    function test(){
    console.log('a');
}
var tools = {
    test:function(){
        console.log('b');
    }
}

//加载完再执行
window.onload = function(){}
//解析完就执行  =>快
$(document).ready(function(){})
//打印的是 interactive  意思是：解析完毕
  document.addEventListener('DOMContentLoaded',function(){
        console.log(document.readyState);
       },false);
//写个原生的快速加载js
  <script>
       document.addEventListener('DOMContentLoaded',function(){
           var div = document.getElementsByTagName('div')[0];
           console.log(div);
       },false)
    </script>
    
    <div style="width: 100px;height: 100px;background-color: rebeccapurple;" ></div>