JS：非核心代码延迟加载方法

延迟加载方法

1.script标签的defer\async属性，均能在html解析时加载，均只适用于外部脚本文件。defer会按照顺序执行，async不会。

2.使用最多的方法：动态创建DOM的方法。新建<script>元素，添加到DOM。

3.jquery.getScript()方法，加载并在全局作用域下执行脚本，jQuery.getScript()不会缓存。$.getScript()实际上是对$.ajax的get请求的封装，直接用XMLHttpRequest请求返回结果可以动态赋值给scipt.text，也可用eval()执行。

4.使用setTimeOut()延迟加载时间。

5.注释与取消注释。

以上这几种方法实现js加载的途径无非两种：1.通过src特性包含外部文件；2.用script元素本身包含代码。

一、defer属性（延迟脚本）

html4.01为<script>标签定义了defer属性，表明脚本会延迟到整个页面都解析完毕后再运行。延迟脚本总是按照指定它们的顺序执行。遇到</html>后再执行，会先于DOMContentLoaded事件执行。

延迟脚本不一定会按照顺序执行，也不一定会在DOMContentLoaded事件出发前执行，最好只包含一个延迟脚本。（红皮书）

defer属性只适用于外部脚本文件。

<script src="t1.js" defer> </script>

二、async属性（异步脚本）

Html5为<script>元素定义了async属性，与defer类似只适用于外部脚本文件，并告诉当前脚本不必等待其他脚本，也不必阻塞文档呈现。异步脚本一定会在页面load事件前执行，但可能会在DOMContentLoaded事件触发之前或之后执行。

但与defer不同的是，标记为async的脚本并不保证按照它们的先后顺序执行。

<script src="t1.js" async> </script>

defer和async的异同

相同点

1.加载文件时不阻塞页面渲染

2.都在onload事件之前执行

3.只对外部脚本有效

4.不能调用document.write方法（向文档中写入html表达式或js代码）

5.允许不定义属性值，仅仅使用属性名。（直接写defer或async，但xhtml中必须写属性名=属性值）

不同点

1.defer html4.0 async html5

2.async属性的脚本都在下载结束后立刻执行，但执行顺序不能控制，先下载完的执行；defer属性的脚本都在html解析完毕之后，按照原本的顺序执行。

三、动态创建DOM方式（使用最多）

通过document.createElement("script")创建新的script标签，为新创建的元素的src属性赋值，值即为需要加载的js文件地址。

//随时调用函数创建标签
function download() {
      var element = document.createElement("script");  
      element.src = "t1.js";
      document.body.appendChild(element);  
}

//来自Google帮助页面的推荐方案，load事件后加载js
<script type="text/javascript"> 
   function downloadJSAtOnload() {  
       var element = document.createElement("script");  
       element.src = "defer.js";  
       document.body.appendChild(element);  
   }  
   if (window.addEventListener)  
      window.addEventListener("load",downloadJSAtOnload, false);  
   else if (window.attachEvent)  
      window.attachEvent("onload",downloadJSAtOnload);  
   else 
      window.onload =downloadJSAtOnload;  
</script>

四、jquery的getScript()方法

$.getScript("t1.js",function(){//回调函数，成功获取文件后执行的函数
   console.log("脚本加载完成");
});

该函数用于动态加载JS文件，并在全局作用域下执行文件中的JS代码。jquery1.2之前只能调用同域js，1.2之后可以跨域调用。

源码解析如下：

//$.getScript()，调用了$.get()方法，传入响应参数。
getScript: function( url, callback ) {
    return jQuery.get( url, undefined, callback, "script" );
}
//$.get()
jQuery.get( url [, data ] [, success ] [, type ] )
//等价于：
$.ajax({
 url: url,
 type: "GET",
 success: success,
 dataType: "script"
});

【注意】如果多次加载相同URL的js文件，即使服务器对js文件启用了缓存，在第二次及以后加载该js文件时，jQuery.getScript()仍然不会缓存。因为该函数会在js文件的URL后面添加一个时间戳参数后缀，从而避免浏览器获取缓存的js文件。

有关getScript()方法的改进查看：https://github.com/IMwaiting0/JsDelay

直接使用XMLHttpRequest：

//获取XMLHttpRequest对象，考虑兼容性。
var getXmlHttp = function(){
var obj;
if (window.XMLHttpRequest)
 obj = new XMLHttpRequest();
else
 obj = new ActiveXObject("Microsoft.XMLHTTP");
return obj;
}; 
//采用Http请求get方式;open()方法的第三个参数表示采用异步(true)还是同步(false)处理
var xmlHttp = getXmlHttp();
xmlHttp.open("GET", "t1.js", true);
xmlHttp.send(); 
xmlHttp.onreadystatechange = function(){
	if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
	//处理请求内容
	}
}

获取到的内容可以有以下方式运行：

script.text = xmlHttp.responseText; //注入到script标签中

eval(xmlHttp.responseText);//放在eval()函数里执行

五、使用setTimeout延迟方法的加载时间

延迟加载js代码，给网页加载留出时间。

<script language="JavaScript" src="" id="my"></script> 
<script> 
setTimeout("document.getElementById('my').src='t1.js'; ",3000);//延时3秒
</script> 

六、注释

1.先注释需要延迟的script内容；

2.需要的时候获取script内容解注释，调用eval()执行。