defer与asyncdefer
html4为script标签定义了一个扩展属性：defer。defer指明本元素所含的脚本不会修改dom，因此代码能安全地延迟执行。但是该属性并不是一个理想的跨浏览器解决方案。该属性只有ie4+和firefox3.5+的浏览器支持。用法如下：
<script type='text/javascript' src='test.js' defer></script>
带有defer属性的‘’script‘’标签可以放置在文档的任何位置，当一个带有defer属性js文件下载时，它不会阻塞浏览器的其他进程，因此这类文件可以与页面中的其他资源并行下载。带有defer属性的script标签在dom加载完成（onload事件触发前执行）
async
html5规范引入了async属性，用于异步加载脚本。
<script type='text/javascript' src='test.js' async></script>
async与defer的相同点是采用并行下载，在下载的过程中不会产生阻塞。区别在于async是加载完成后自动执行，而defer需要等待页面完成后执行。
动态创建script主要原理：javascript可以动态创建html中几乎所有的内容，所以我们可以利用javascript动态地创建script标签并添加到html中。
var script = document.createelement("script");
script.type = "text/javasctipt";
script.src = "file.js";
document.getelementbytagname("head")[0].appendchild(script)
我们可以使用如下方法跟踪并确保脚本下载完成并准备就绪：
function loadscript(url,callback){var script = document.createelement("script");
script.type = "text/javasctipt"; //ie
if(script.readystate){
script.onreadystatechange = function(){
if(script.readystate == 'loaded'||script.readystate =='complete'){
script.onreadystatechange = null;
callback()
}
}
}else{
script.onload = function(){
callback();
}
}
script.src = url;
document.getelementbytagname("head")[0].appendchild(script)
}
调用方法：
loadscript('files.js',function(){
alert("file is loaded")
})
xmlhttprequest脚本注入通过xhr对象获取脚本并注入到页面
/获取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", "file3.js", true);
xmlhttp.onreadystatechange = function(){
if (xmlhttp.readystate == 4 { if(xmlhttp.status >=200 && xmlhttp.status<300 || xmlhttp.status == 304){ var script = document.createelement("script");
script.text = xmlhttp.responsetext;
document.body.appendchild(script);
}
}
}
xmlhttp.send(null);
以上就是js异步加载方法的详细内容。