默認情況javascript是同步加載的，也就是javascript的加載時阻塞的，后面的元素要等待javascript加載完畢后才能進行再加載，對于一些意義不是很大的javascript，如果放在頁頭會導致加載很慢的話，是會嚴重影響用戶體驗的。
(1) defer，只支持IE
defer屬性的定義和用法
defer 屬性規定是否對腳本執行進行延遲，直到頁面加載為止。
有的 javascript 腳本 document.write 方法來創建當前的文檔內容，其他腳本就不一定是了。
如果您的腳本不會改變文檔的內容，可將 defer 屬性加入到
(2) async：
async的定義和用法(是HTML5的屬性)
async 屬性規定一旦腳本可用，則會異步執行。
示例： 代碼如下:
//async 屬性僅適用于外部腳本（只有在使用 src 屬性時）。
//有多種執行外部腳本的方法：
?如果 async="async"：腳本相對于頁面的其余部分異步地執行（當頁面繼續進行解析時，腳本將被執行）
?如果不使用 async 且 defer="defer"：腳本將在頁面完成解析時執行
?如果既不使用 async 也不使用 defer：在瀏覽器繼續解析頁面之前，立即讀取并執行腳本
(3) 創建script，插入到DOM中，加載完畢后callBack，見代碼：
代碼如下:
function loadScript(url, 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();
};
}
script.src = url;
document.body.appendChild(script);
}
第二個---關于異步加載js的幾種方式：
一般而言，javascript腳本一般是建議放在body標簽的底部，因為使用script標簽加載js時，會停止加載后面的內容而停下來解析腳本并對頁面進行渲染，使用src屬性加載外部腳本也會造成這樣的情況，這樣的話，如果在head或者body的前面放入過多的script標簽，并且內容很多的時候，會造成頁面在解析完所有script標簽的內容前有短暫的時間整個頁面空白，給用戶的體驗會很差。但是如果所有的腳本都放在底部，又會造成dom加載完畢后有一段時間頁面雖然能看到，但是和用戶的交互卻很差，因此需要讓一些腳本與頁面異步加載。
1.在html5中，script新增了async的屬性，script添加了該屬性之后，下載腳本時將可以與頁面其他內容并行下載，但是該屬性必須在ie9以上的瀏覽器中才可以使用，并且只能用于加載外部js腳本。
2.同樣，在html4中也有一個defer屬性，該屬性的兼容性更好一點，但是與async一樣，可以讓js腳本實現異步加載，同樣只能用于加載外部js腳本。
asyc與defer屬性的不同點是，async會讓腳本在加載完可用時立即執行，而defer腳本則會在dom加載完畢后執行，defer腳本的執行會在window.onload之前，其他沒有添加defer屬性的script標簽之后。
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
</head>
<script> window.onload = function() { console.log("window.onload"); }</script>
<script src="js/defer.js" defer></script>
<script> console.log("normal");</script>
<body>
</body>
</html>
顯示的順序為：normal defer window.onload
3.利用XHR異步加載js內容并執行，
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
</head>
<script>
var xhr = new XMLHttpRequest();
xhr.open("get", "js/defer.js",true) ;
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
eval(xhr.responseText);
}
}
</script>
<body></body>
</html>
4.動態創建script標簽，主要代碼如下
var script = document.createElement("script");
script.src = "js/test.js";
document.head.appendChild(script);
該方式還可以通過script的onreadyState監視加載的狀態。
5.iframe方式，利用iframe加載一個同源的子頁面，讓子頁面內的js影響當前父頁面的一種方式。
第三個----關于js異步加載的幾種方式
原文鏈接 - http://www.cnblogs.com/huangcong/p/3747038.html
方案一、$(document).ready()
需要引入jquery
兼容所有瀏覽器
$(document).ready(function() {
alert("加載完成！");
});
方案二、<script>標簽的async="async"屬性
1.async屬性是HTML5新增屬性，需要Chrome、FireFox、IE9+瀏覽器支持
2.async屬性規定一旦腳本可用，則會異步執行
3.async屬性僅適用于外部腳本
4.此方法不能保證腳本按順序執行
<script type="text/javascript" src="xxx.js" async="async"></script>
方案三、<script>標簽的defer="defer"屬性
1.defer屬性規定是否對腳本執行進行延遲，直到頁面加載為止
2.如果腳本不會改變文檔的內容，可將defer屬性加入到<script>標簽中，以便加快處理文檔的速度
3.兼容所有瀏覽器
4.此方法可以確保所有設置了defer屬性的腳本按順序執行
方案四、動態創建<script>標簽
兼容所有瀏覽器
(function(){
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "http://code.jquery.com/jquery-1.7.2.min.js";
var tmp = document.getElementsByTagName('script')[0];
tmp.parentNode.insertBefore(script, tmp);
})();