js异步加载的3种方式（转载）

Posted 2020-08-16 简一118

1.defer标签 只支持IE
    defer属性的定义和用法： 属性规定是否对脚本执行进行延迟，直到页面加载为止。有的 javascript 脚本 document.write 方法来创建当前的文档内容，其他脚本就不一定是了。
如果您的脚本不会改变文档的内容，可将 defer 属性加入到 <script> 标签中，以便加快处理文档的速度。因为浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本，它将推迟对脚本的解释，直到文档已经显示给用户为止。

<script type="text/javascript" defer="defer"> 
    alert(document.getElementById("p1").firstChild.nodeValue); 
</script> 

2.async（async 属性是 html5 中的新属性。）

async 属性规定一旦脚本可用，则会异步执行。
注释：async 属性仅适用于外部脚本（只有在使用 src 属性时）。
注释：有多种执行外部脚本的方法：
如果 async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）
如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行
如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本

<script type="text/javascript" src="demo_async.js" async="async"></script> 

3.创建script，插入到DOM中，加载完毕后callBack；

function loadScript(url, callback){
    var script=document.creatElment("script");
    script.type="text/javascript";
    if(script.readyState){  ie
         script.onReadyState=function(){
             if(script.readyState ="load" || script.readyState = "complete"){
          　　      script.onReadyState=null;
          　　      callback();
       　　   }else{
       　　　　    script.onload=function(){
          　　       callback();
        　        }
    　　      }
    　　  }
      }
    script.src=url;
    document.body.appendChild(script);
}