<script src="script.js"></script>
沒(méi)有 defer 或 async瀑焦，瀏覽器會(huì)立即加載并執(zhí)行指定的腳本，“立即”指的是在渲染該 script 標(biāo)簽之下的文檔元素之前浪耘，也就是說(shuō)不等待后續(xù)載入的文檔元素，讀到就加載并執(zhí)行宾肺。
<script async src="script.js"></script>
有 async，加載和渲染后續(xù)文檔元素的過(guò)程將和 script.js 的加載與執(zhí)行并行進(jìn)行（異步）侵俗。
<script defer src="myscript.js"></script>
有 defer锨用，加載后續(xù)文檔元素的過(guò)程將和 script.js 的加載并行進(jìn)行（異步），但是 script.js 的執(zhí)行要在所有元素解析完成之后隘谣，DOMContentLoaded 事件觸發(fā)之前完成增拥。
- 從實(shí)用角度來(lái)講，首先把所有腳本都放置到 </body> 之前是最佳實(shí)踐洪橘，因?yàn)閷?duì)于舊瀏覽器來(lái)說(shuō)這是唯一的優(yōu)化選擇跪者，此法可保證非腳本的其他一切元素能夠以最快的速度得到加載和解析。
藍(lán)色線代表網(wǎng)絡(luò)讀取熄求，紅色線代表執(zhí)行時(shí)間渣玲，這倆都是針對(duì)腳本的；綠色線代表 HTML 解析弟晚。
由圖得知：
defer 和 async 在網(wǎng)絡(luò)讀韧堋（下載）這部分是一樣的，都是異步的（相較于 HTML 解析）卿城。
兩者的差別在于腳本下載完之后何時(shí)執(zhí)行枚钓，顯然 defer 是最接近我們對(duì)于應(yīng)用腳本加載和執(zhí)行的要求的。關(guān)于 defer瑟押，由圖知它是按照加載順序執(zhí)行腳本的搀捷，這一點(diǎn)要善加利用。
async 則是亂序執(zhí)行多望，反正對(duì)它來(lái)說(shuō)腳本的加載和執(zhí)行是緊緊挨著的嫩舟，所以不管你聲明的順序如何，只要它加載完了就會(huì)立刻執(zhí)行怀偷。async 對(duì)于應(yīng)用腳本的用處不大家厌，因?yàn)樗耆豢紤]依賴（哪怕是最低級(jí)的順序執(zhí)行），不過(guò)它對(duì)于那些可以不依賴任何腳本或不被任何腳本依賴的腳本來(lái)說(shuō)卻是非常合適的椎工，最典型的例子：Google Analytics饭于。
下面來(lái)說(shuō)明一下兩者之間的不同：
??正常情況下，當(dāng)瀏覽器在解析HTML源文件時(shí)如果遇到外部的script维蒙，那么解析過(guò)程會(huì)暫停掰吕，并發(fā)送請(qǐng)求來(lái)下載script文件，只有script完全下載并執(zhí)行后才會(huì)繼續(xù)執(zhí)行DOM解析颅痊。
??那么如果一個(gè)頁(yè)面有很多的外鏈的腳本畴栖。放在head中，那么加載腳本的時(shí)候就會(huì)阻塞頁(yè)面的渲染八千，出現(xiàn)空白的現(xiàn)象吗讶。在簡(jiǎn)單的開發(fā)環(huán)境中可能調(diào)整一下js的位置就能解決問(wèn)題燎猛。但是在越來(lái)越復(fù)雜的開發(fā)環(huán)境下，如果想調(diào)整js腳本的位置可能就要花費(fèi)大量的時(shí)間照皆。所以為了讓這種成本降低重绷。可以使用defer屬性膜毁。
??如果一個(gè)script加了defer屬性昭卓，即使放在head里面，它也會(huì)在html頁(yè)面解析完畢之后再去執(zhí)行瘟滨，也就是類似于把這個(gè)script放在了頁(yè)面底部候醒。
??對(duì)于async，這個(gè)是html5中新增的屬性杂瘸，它的作用是能夠異步的加載和執(zhí)行腳本倒淫，不因?yàn)榧虞d腳本而阻塞頁(yè)面的加載。一旦加載到就會(huì)立刻執(zhí)行败玉。兩者的相同點(diǎn)
加載文件時(shí)不阻塞頁(yè)面渲染敌土。
對(duì)于inline的script無(wú)效。
使用這兩個(gè)屬性的腳本中不能調(diào)用document.write方法运翼。
有腳本的onload的事件回調(diào)返干。不同點(diǎn)
html4.0中定義了defer，html5.0中定義了async血淌。
async屬性的腳本會(huì)在下載結(jié)束后立刻執(zhí)行矩欠，同時(shí)會(huì)在window的load事件之前執(zhí)行，所以就會(huì)出現(xiàn)順序被打亂的情況悠夯；defer屬性的腳本是在頁(yè)面解析完成后晚顷，按照順序執(zhí)行，同時(shí)會(huì)在document的DOMContentLoaded之前執(zhí)行疗疟。
總體來(lái)說(shuō)，defer和async的主要不同就是defer會(huì)保證腳本的順序瞳氓，async不保證順序策彤。
