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

延迟加载方法

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

2.使用最多的方法：动态创建DOM的方法。新建

二、async属性（异步脚本）

Html5为

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

四、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代码，给网页加载留出时间。

六、注释

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

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