關於js延遲載入（非同步操作）的方式
一、概述
最近重新開始學習js，在第一章的一個小節裡寫到了“指令碼呼叫策略”，書上寫的這部分不多，但是發現在我之前的（筆）面試中，問到的頻率還是比較高的。自己一直習慣於直接把所有js檔案寫在head裡，後來瞭解到優化後，會把js放在最底部，但並不太懂這樣做的好處，而且其他的一些處理方式，自己也並未有過實際的操作。
在面試中對這部分的考察，主要考察的是程式的效能方面。程式的效能是一個專案不斷地追求的，通常也是專案完成後需要長期做的一件事情，為了讓使用者的體驗更好。效能優化的核心思想就是快，可以預先準備資料（如快取的使用），可以按需獲取，可以分段獲取等都是常見的優化手段。
而對於js的優化（關於js的延遲載入），主要是因為HTML元素是按其在頁面中出現的次序呼叫的，如果用javascript來管理頁面上的元素（使用文件物件模型dom），並且js加載於欲操作的HTML元素之前，則程式碼將出錯。也就是說，我們寫了js語句來獲取DOM物件，但由於DOM結構還沒有載入完成，因此獲取到的是空物件。其意義在於，這樣有助於提高頁面載入速度，js延遲載入就是等頁面載入完成之後在載入js檔案。
二、js的同步載入和非同步載入
同步載入，又稱阻塞模式，是我們平時使用最多的方式，也就是直接將<script>寫在<head>裡。這種方式會阻止瀏覽器的後續處理，停止後續的解析，直到當前的載入完成。一般來說，同步載入是安全的，但如果我們js裡設計到document內容輸出、獲取或修改DOM結構等行為，就會產生頁面阻塞程式碼出錯。所以一般就會建議把<script>寫在頁面最底部,以減少頁面阻塞。(這種方式可能也是我們剛開始接觸到js優化，最常使用的一種方式。)
非同步載入，又稱為非阻塞載入，在瀏覽器下載執行js的同時，還會繼續後續頁面的處理。這裡也是一般面試會問到的一點，即js延遲載入的方式有哪些？
三、js延遲載入的六種方式
一般有六種方式；defer屬性、async屬性、動態建立dom方式、使用jquery的getScript方法、使用setTimeout延遲方法、讓js最後載入。
寫的是六種方式，實際上自己在專案中真實用到的也就是讓js最後載入。所以對這所謂的六種方式，可能僅作為一種知識儲備，當以後的專案有這種問題需求了，可以有不同的解決思路。
（一）defer屬性
HTML 4.01為 <script>標籤定義了defer屬性（延遲指令碼的執行）。
其用途是：表明指令碼在執行時不會影響頁面的構造，瀏覽器會立即下載，但延遲執行，即指令碼會被延遲到整個頁面都解析完畢之後再執行。
defer屬性只適用於外部指令碼檔案，只有 Internet Explorer 支援 defer 屬性。
並且defer屬性解決了async引起的指令碼順序問題（見async的缺點），使用defer屬性，指令碼將按照在頁面中出現的順序載入和執行。
示例：
//指令碼1 <script defer src="js/vendor/jquery.js"></script> //指令碼2 <script defer src="js/script2.js"></script> //指令碼3 <script defer src="js/script3.js"></script>
上述程式碼新增 defer 屬性，指令碼將按照在頁面中出現的順序載入，因此可確保指令碼1必定加載於指令碼2和 指令碼3之前，同時指令碼2必定加載於指令碼3之前。
（二）async屬性
HTML 5為 <script>標籤定義了async屬性。新增此屬性後，指令碼和HTML將一併載入（非同步），程式碼將順利執行。
瀏覽器遇到async指令碼時不會阻塞頁面渲染，而是直接下載然後執行。但這樣的問題是，不同指令碼執行次序就無法控制，只是指令碼不會阻止剩餘頁面的顯示。
async屬性只適用於外部指令碼檔案。
示例：
//指令碼1 <script async src="js/vendor/jquery.js"></script> //指令碼2 <script async src="js/script2.js"></script> //指令碼3 <script async src="js/script3.js"></script>
上述程式碼新增async 屬性，這三者的呼叫順序是不確定的，指令碼1可以在指令碼2和指令碼3之前會之後呼叫，這是完全不確定的。如果指令碼2和指令碼3需要依賴指令碼1中的函式，那麼不確定的呼叫順序會導致錯誤。
所以，當頁面的不同指令碼之間彼此獨立，且不依賴於本頁面的其他任何指令碼時，async是最理想的選擇。
總結：defer和async的異同點
相同：
- 載入檔案時不會阻塞頁面渲染
- 對於內部的js不起作用
- 使用這兩個屬性的指令碼中不能呼叫document.write方法
區別：
- 如果指令碼無需等待頁面解析，且無依賴獨立執行，那麼應使用
async。也就是每一個async屬性的指令碼都在它下載結束之後立即執行，同時會在window的load事件之前執行。 - 如果指令碼需要等待解析，且依賴於其它指令碼，呼叫這些指令碼時應使用
defer，將關聯的指令碼按所需順序置於 HTML 中。
（三）動態建立DOM方式
//這些程式碼應被放置在</body>標籤前(接近HTML檔案底部)
<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>
補充知識點：addEventListener與attachEvent
（四）使用jquery的getScript方法
getScript() 方法通過 HTTP GET 請求載入並執行 JavaScript 檔案。
語法：
jQuery.getScript(url,success(response,status))
url（必寫）：將要請求的 URL 字串
success(response,status)（可選）：規定請求成功後執行的回撥函式。
其中的引數
response - 包含來自請求的結果資料
status - 包含請求的狀態（"success", "notmodified", "error", "timeout" 或 "parsererror"）
//載入並執行 test.js：
$.getScript("test.js");
//載入並執行 test.js ，成功後顯示資訊
$.getScript("test.js", function(){
alert("Script loaded and executed.");
});
（五）使用setTimeout延遲方法
目的：延遲載入js程式碼，給網頁載入留出時間
<script type="text/javascript">
function A(){
$.post("/lord/login",{name:username,pwd:password},function(){
alert("Hello World!");
})
}
$(function (){
setTimeout("A()",1000); //延遲1秒
})
</script>
（六）讓js最後載入
將指令碼元素放在文件體的低端，這樣指令碼就可以在HTML解析完畢後加載了。但此方案的問題是，只有在所有HTML DOM載入完成後才開始指令碼的載入/解析過程。對於有大量js程式碼的大型網站，可能會帶來顯著的效能損耗。
&n