<script src="script.js"></script>
沒有 defer 或 async，瀏覽器會立即加載并執(zhí)行指定的腳本，“立即”指的是在渲染該 script 標(biāo)簽之下的文檔元素之前，也就是說不等待后續(xù)載入的文檔元素，讀到就加載并執(zhí)行。
<script async src="script.js"></script>
有 async，加載和渲染后續(xù)文檔元素的過程將和 script.js 的加載與執(zhí)行并行進(jìn)行（異步）。
<script defer src="myscript.js"></script>
有 defer，加載后續(xù)文檔元素的過程將和 script.js 的加載并行進(jìn)行（異步），但是 script.js 的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded 事件觸發(fā)之前完成。
- 從實(shí)用角度來講，首先把所有腳本都放置到 </body> 之前是最佳實(shí)踐，因?yàn)閷τ谂f瀏覽器來說這是唯一的優(yōu)化選擇，此法可保證非腳本的其他一切元素能夠以最快的速度得到加載和解析。
藍(lán)色線代表網(wǎng)絡(luò)讀取，紅色線代表執(zhí)行時間，這倆都是針對腳本的；綠色線代表 HTML 解析。
由圖得知：
defer 和 async 在網(wǎng)絡(luò)讀取（下載）這部分是一樣的，都是異步的（相較于 HTML 解析）。
兩者的差別在于腳本下載完之后何時執(zhí)行，顯然 defer 是最接近我們對于應(yīng)用腳本加載和執(zhí)行的要求的。關(guān)于 defer，由圖知它是按照加載順序執(zhí)行腳本的，這一點(diǎn)要善加利用。
async 則是亂序執(zhí)行，反正對它來說腳本的加載和執(zhí)行是緊緊挨著的，所以不管你聲明的順序如何，只要它加載完了就會立刻執(zhí)行。async 對于應(yīng)用腳本的用處不大，因?yàn)樗耆豢紤]依賴（哪怕是最低級的順序執(zhí)行），不過它對于那些可以不依賴任何腳本或不被任何腳本依賴的腳本來說卻是非常合適的，最典型的例子：Google Analytics。
下面來說明一下兩者之間的不同：
??正常情況下，當(dāng)瀏覽器在解析HTML源文件時如果遇到外部的script，那么解析過程會暫停，并發(fā)送請求來下載script文件，只有script完全下載并執(zhí)行后才會繼續(xù)執(zhí)行DOM解析。
??那么如果一個頁面有很多的外鏈的腳本。放在head中，那么加載腳本的時候就會阻塞頁面的渲染，出現(xiàn)空白的現(xiàn)象。在簡單的開發(fā)環(huán)境中可能調(diào)整一下js的位置就能解決問題。但是在越來越復(fù)雜的開發(fā)環(huán)境下，如果想調(diào)整js腳本的位置可能就要花費(fèi)大量的時間。所以為了讓這種成本降低。可以使用defer屬性。
??如果一個script加了defer屬性，即使放在head里面，它也會在html頁面解析完畢之后再去執(zhí)行，也就是類似于把這個script放在了頁面底部。
??對于async，這個是html5中新增的屬性，它的作用是能夠異步的加載和執(zhí)行腳本，不因?yàn)榧虞d腳本而阻塞頁面的加載。一旦加載到就會立刻執(zhí)行。兩者的相同點(diǎn)
加載文件時不阻塞頁面渲染。
對于inline的script無效。
使用這兩個屬性的腳本中不能調(diào)用document.write方法。
有腳本的onload的事件回調(diào)。不同點(diǎn)
html4.0中定義了defer，html5.0中定義了async。
async屬性的腳本會在下載結(jié)束后立刻執(zhí)行，同時會在window的load事件之前執(zhí)行，所以就會出現(xiàn)順序被打亂的情況；defer屬性的腳本是在頁面解析完成后，按照順序執(zhí)行，同時會在document的DOMContentLoaded之前執(zhí)行。
總體來說，defer和async的主要不同就是defer會保證腳本的順序，async不保證順序。
