script標簽一般會放到body標簽的最后面也就是</body>之前，這樣可以防止js文件的下載和執行阻塞html和css文件的加載和渲染出現白屏，如果把script標簽放在head標簽里而且沒有 defer 或 async，瀏覽器會立即加載并執行指定的腳本，“立即”指的是在渲染該script標簽之下的文檔元素之前，也就是說不等待后續載入的文檔元素，讀到就加載并執行，這樣就會阻塞后續的文檔解析。
<script src="script.js"></script>
沒有 defer 或 async，瀏覽器會立即加載并執行指定的腳本，“立即”指的是在渲染該 script 標簽之下的文檔元素之前，也就是說不等待后續載入的文檔元素，讀到就加載并執行。
<script async src="script.js"></script>
有 async，加載和渲染后續文檔元素的過程將和 script.js 的加載與執行并行進行（異步）。
<script defer src="myscript.js"></script>
有 defer，加載后續文檔元素的過程將和 script.js 的加載并行進行（異步），但是 script.js 的執行要在所有元素解析完成之后，DOMContentLoaded 事件觸發之前完成。
從實用角度來說,把所有腳本都丟到 </body> 之前是最佳實踐，因為對于舊瀏覽器來說這是唯一的優化選擇，此法可保證非腳本的其他一切元素能夠以最快的速度得到加載和解析。
藍色線代表網絡讀取，紅色線代表執行時間，這倆都是針對腳本的；綠色線代表 HTML 解析。
從上圖可以得出下面的結論：
- defer 和 async 在網絡讀取（下載）這塊兒是一樣的，都是異步的（相較于 HTML 解析）
- 它倆的差別在于腳本下載完之后何時執行，顯然 defer 是最接近我們對于應用腳本加載和執行的要求的
- 關于 defer，此圖未盡之處在于它是按照加載順序執行腳本的，這一點要善加利用
- async 則是一個亂序執行的主，反正對它來說腳本的加載和執行是緊緊挨著的，所以不管你聲明的順序如何，只要它加載完了就會立刻執行
- 仔細想想，async 對于應用腳本的用處不大，因為它完全不考慮依賴（哪怕是最低級的順序執行），不過它對于那些可以不依賴任何腳本或不被任何腳本依賴的腳本來說卻是非常合適的
