<script>標簽的 ansyc 和 defer 屬性。只對外部加載 JS 文件有效。
<script src="js/app.js" async></script>
<script src="js/app.js" defer></script>-
普通加載 js（同步加載）：會打斷 HTML 渲染。
-
ansyc：異步加載js。加載完畢就執行。如果，HTML 沒渲染完畢，會打斷 HTML 渲染。
-
defer：異步加載 js，但是要 HTML 渲染完畢才執行。推遲 JS 執行。
示例：寫一個頁面有 6000 個 div。對，6000 個~！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/app.js" async></script>
</head>
<body><div>0001</div><div>0002</div><!-- 6000 div，略。 -->
</body>
</html>app.js
let a = document.querySelectorAll("div");
console.info( a.length );-
普通加載 js：會輸出 0 。因為，js 很快下載完畢，并執行，但是此時，div 標簽還沒有開始渲染。
-
async：異步加載 js，加載完畢就會執行。每次執行的時候，div 渲染數量不一，所以每次輸出都不一樣。
-
defer：異步加載 js，但是要 HTML 渲染完畢才執行。因此輸出 6000。
?所以，JS 代碼的位置，個人建議放到 body 標簽的最后，HTML內容的后面。
先加載 HTML 內容，后執行 JavaScript。可以保證 JavaScript 代碼執行的時候，所需的 HTML 代碼已經加載完畢，這樣 JavaScript 代碼就不會因為找不到標簽，而報錯。也不用糾結給 script 標簽添加 defer 還是 ansyc 屬性。
)