JS檔案延遲和非同步載入：defer和async屬性
—般情況下，在文件的 <head> 標籤中包含JavaScript 指令碼，或者匯入的 JavaScript 檔案。這意味著必須等到全部 JavaScript 程式碼都被載入、解析和執行完以後，才能繼續解析後面的 HTML 部分。如果載入的 JavaScript 檔案很大， HTML 文件解析就容易出現延遲。
為了避免這個問題，在開發 Web 應用程式時，建議把匯入 JavaScript 檔案的操作放在 <body> 後面，讓瀏覽器先 將網頁內容解析並呈現出來後，再去載入 JavaScript 檔案，以便加快網頁響應速度。
延遲執行 JavaScript 檔案
<script> 標籤有一個布林型屬性defer
示例
在下面示例中，外部檔案 test.js 包含的指令碼將延遲到瀏覽器解析完網頁之後再執行。瀏覽器先顯示網頁標題和段落文字，然後才彈出提示文字。如果不設定 defer 屬性，則執行順序是相反的。
test.html原始碼：
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <script type="text/javascript" defer src="test.js"></script>
- </head>
- <body>
- <h1>網頁標題</h1>
- <p>正文內容</p>
- </body>
- </html>
test.js 原始碼：
- alert("外部檔案");
注意：defer 屬性適用於外部 JavaScript 檔案，不適用於 <script>籤包含的 JavaScript 指令碼。
非同步載入JavaScript檔案
在預設情況下，網頁都是同步載入外部 JavaScript 檔案的，如果 JavaScript 檔案比較大， 就會影響後面 HTML 程式碼的解析。上面提到一種解決方法：就是最後載入 JavaScript 檔案。
現在可以為 <script> 標籤設定async
示例
如果為 <script> 標籤設定 async 屬性，然後在瀏覽器中預覽，則會看到網頁標題和段落文字同步，或者先顯示出來，然後同步彈出提示文字。如果不設定 async 屬性，則先彈出提示文字，然後才開始解析並顯示網頁標題和段落文字。
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <script type="text/javascript" async src="test.js"></script>
- </head>
- <body>
- <h1>網頁標題</h1>
- <p>正文內容</p>
- </body>
- </html>
async 是 HTML5 新增的布林型屬性，通過設定 async 屬性，就不用考慮 <script> 標籤的放置位置，使用者可以根據習慣繼續把很多大型 JavaScript 庫檔案放在 <head> 標籤內。