js的异步加载

     默认情况javascript是同步加载的，也就是javascript的加载时阻塞的，后面的元素要等待javascript加载完毕后才能进行再加载，对于一些意义不是很大的javascript，如果放在页头会导致加载很慢的话，是会严重影响用户体验的。

     如何解决这个问题呢,接下来将为你详细介绍下异步加载js三种实现方案,感兴趣的你可以参考下

 

    (1) defer，只支持IE

 （ iE9及以下支持，IE10及以上不支持该属性了，个人建议不要使用了，拥抱现代浏览器吧）

     defer属性的定义和用法（我摘自w3school网站，了解下就行了）

    defer 属性规定是否对脚本执行进行延迟，直到页面加载为止。

   有的 javascript 脚本 document.write 方法来创建当前的文档内容，其他脚本就不一定是了。

   如果您的脚本不会改变文档的内容，可将 defer 属性加入到 <script> 标签中，以便加快处理文档的速度。

   因为浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本，它将推迟对脚本的解释，直到文档已经显示给用户为止。

   示例：

 

   代码如下:

 

    <script type="text/javascript" defer="defer">

    alert(document.getElementById("p1").firstChild.nodeValue);

    </script> 

 

(2) async：(IE9及以下不支持)

   async的定义和用法(是HTML5的属性)

   async 属性规定一旦脚本可用，则会异步执行。

   示例：

   代码如下:

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

   注释：async 属性仅适用于外部脚本（只有在使用 src 属性时）。

   注释：有多种执行外部脚本的方法：

  •如果 async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）

  •如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行（个人不建议使用defer）

  •如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本

 

(3) 创建script，插入到DOM中，加载完毕后callBack，在很多模块加载器中,大部分用的以下代码,见代码：

代码如下:

 

var script = document.createElement_x("script")
script.type = "text/javascript";
if (script.readyState){ //IE
      script.onreadystatechange = function(){
      if (script.readyState == "loaded" ||
         script.readyState == "complete"){
         script.onreadystatechange = null;
         callback();
      }
   };
} else { //Others: Firefox, Safari, Chrome, and Opera
      script.onload = function(){
          callback();
      };
}
document.body.appendChild(script); 

 

补充知识：

document.currentScript

描述：

返回其所包含的脚本正在被执行的 <script> 元素.

用法：

document.currentScript

https://developer.mozilla.org/en-US/docs/Web/API/Document/currentScript