一般來(lái)說(shuō)為了防止頁(yè)面白屏，script標(biāo)簽會(huì)放到body標(biāo)簽的最后面也就是</body>之前。如果把script標(biāo)簽放在head標(biāo)簽里而且沒(méi)有 defer 或 async，瀏覽器會(huì)立即加載并執(zhí)行指定的腳本，“立即”指的是在渲染該script標(biāo)簽之下的文檔元素之前，也就是說(shuō)不等待后續(xù)載入的文檔元素，讀到就加載并執(zhí)行，這樣就會(huì)阻塞后續(xù)的文檔解析。

<script src="test.js" defer>
<script src="test.js" async>

defer和async可以用來(lái)控制外部腳本的執(zhí)行。首先可以看看解釋。
defer：用于開(kāi)啟新的線(xiàn)程下載腳本文件，并使腳本在文檔解析完成后執(zhí)行。
async：HTML5新增屬性，用于異步下載腳本文件，下載完畢立即解釋執(zhí)行代碼。
那defer與async有什么本質(zhì)區(qū)別呢？
defer加載后續(xù)文檔元素的過(guò)程將和 script.js 的加載并行進(jìn)行（異步），但 script.js 的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded 事件觸發(fā)之前完成，所以如果是腳本并沒(méi)有外部引用不要使用defer。
async加載和渲染后續(xù)文檔元素的過(guò)程將和 script.js 的加載與執(zhí)行并行進(jìn)行（異步），其他線(xiàn)程將下載腳本，文檔的解析不會(huì)停止，腳本下載完成后開(kāi)始執(zhí)行腳本，腳本執(zhí)行的過(guò)程中文檔將停止解析，直到腳本執(zhí)行完畢。

所以async和defer的最主要的區(qū)別就是async是異步下載，下載完后立即執(zhí)行，不影響文檔的解析，defer是異步加載后解析文檔。

如果有多個(gè)defer腳本，會(huì)按照順序下載解析。而多個(gè)async腳本下載與解析的順序是不一定的，所以如果腳本之間有依賴(lài)關(guān)系不要用async。

參考詳解defer和async的原理及應(yīng)用,實(shí)例可以查看這篇文章。