<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 属性。
