同步載入

在介紹js非同步載入之前，我們先來看看什麼是js同步載入。我們平時最常使用的就是這種同步載入形式：

<script src="http://XXX.com/script.js"></script>

同步模式，又稱阻塞模式，會阻止瀏覽器的後續處理，停止了後續的解析，因此停止了後續的檔案載入（如影象）、渲染、程式碼執行。一般的script標籤（不帶async等屬性）載入時會阻塞瀏覽器，也就是說，瀏覽器在下載或執行該js程式碼塊時，後面的標籤不會被解析，例如在head中新增一個script，但這個script下載時網路不穩定，很長時間沒有下載完成對應的js檔案，那麼瀏覽器此時一直等待這個js檔案下載，此時頁面不會被渲染，使用者看到的就是白屏。以前的一般建議是把<script>放在頁面末尾</body>之前，這樣儘可能減少這種阻塞行為，而先讓頁面展示出來。

非同步載入

它允許無阻塞資源載入，並且使 onload 啟動更快，允許頁面內容載入，而不需要重新整理頁面，也可以根據頁面內容延遲載入依賴。

常見非同步載入舉例：

（Script DOM Element）

(function() {
     var s = document.createElement('script');
     s.type = 'text/javascript';
     s.async = true;
     s.src = 'http://yourdomain.com/script.js';
     var x = document.getElementsByTagName('script')[0];
     x.parentNode.insertBefore(s, x);
 })();
 

這種方法是在頁面中<script>標籤內，用 js 建立一個 script 元素並插入到 document 中。這樣就做到了非阻塞的下載 js 程式碼。

延遲載入（lazy loading）

前面解決了非同步載入（async loading）問題，再談談什麼是延遲載入。
延遲載入：有些 js 程式碼並不是頁面初始化的時候就立刻需要的，而稍後的某些情況才需要的。延遲載入就是一開始並不載入這些暫時不用的js，而是在需要的時候或稍後再通過js 的控制來非同步載入。
也就是將 js 切分成許多模組，頁面初始化時只加載需要立即執行的 js ，然後其它 js 的載入延遲到第一次需要用到的時候再載入。
特別是頁面有大量不同的模組組成，很多可能暫時不用或根本就沒用到。
就像圖片的延遲載入，在圖片出現在可視區域內時（在滾動條下拉）才載入顯示圖片。

非同步載入，需要將所有 js 內容按模組化的方式來切分組織，其中就存在依賴關係，而非同步載入不保證執行順序。​js模組化解決了這個問題，請移步 

瞭解模組化開發

​