非阻塞加载脚本

1.HTML5实现了script的async属性，这个新的属性可以让js在浏览器中以非阻塞的模式加载，另外script还有一个defer属性，这个属性目前所有浏览器都已实现（除了firefox和chrome的早期版本），IE这方面做得好，从一开始就支持些属性。

   1: //async

<!--CRLF-->

   2: <script async src="dquery.js" async></script>

   1:  

    <!--CRLF-->

   2: //defer

    <!--CRLF-->

   3: <script async src="dquery.js" defer>

    <!--CRLF--></script>

<!--CRLF-->

2.async和defer的区别：

带有async或者defer的script都会立刻下载并不阻塞页面解析,而且都提供一个可选的onload事件处理, 在script下载完成后调用,用于做一些和此script相关的初始化工作。它的不同之处在于async一旦下载完成就立即执行（在window.onload事件之前），不确保执行的顺序，而defer能确保js是在按照其在页面中的顺序执行（在DOMContentLoaded事件之前）。

3.为了解决浏览器兼容问题可以使用下面的代码进行处理

   1: function lazyload() {

<!--CRLF-->

   2:      var elem = document.createElement("script");

<!--CRLF-->

   3:      elem.type = "text/javascript";

<!--CRLF-->

   4:      elem.async = true;

<!--CRLF-->

   5:      elem.src = "js/dquery.js?v=11"; //对应的JS文件 

<!--CRLF-->

   6:      document.body.appendChild(elem);

<!--CRLF-->

   7:  }

<!--CRLF-->

   8:   

<!--CRLF-->

   9:  if (window.addEventListener) {

<!--CRLF-->

  10:      window.addEventListener("load", lazyload, false);

<!--CRLF-->

  11:  } else if (window.attachEvent) {

<!--CRLF-->

  12:      window.attachEvent("onload", lazyload);

<!--CRLF-->

  13:  } else {

<!--CRLF-->

  14:      window.onload = lazyload;}

<!--CRLF-->

由于是异步加载所以使用相应js内容就需要在window.onload事件中使用，直接写在页面中会报脚本错误，如：