前提
script腳本分為兩個(gè)過程：
- 加載
- 執(zhí)行（解析）
1. defer
延遲執(zhí)行。延遲到html文檔完全被解析之后再執(zhí)行。
2. async
立即執(zhí)行。下載完腳本后便執(zhí)行。會(huì)阻塞渲染進(jìn)程。
二者區(qū)別
image.png
綠色的是HTML文檔的解析，藍(lán)色的是腳本的加載，紅色的是腳本的執(zhí)行。
此圖告訴我們以下幾個(gè)要點(diǎn)：
- defer 和 async 在網(wǎng)絡(luò)讀?。ㄏ螺d）這塊兒是一樣的，都是異步的（相較于 HTML 解析）
- 它倆的差別在于腳本下載完之后何時(shí)執(zhí)行，顯然 defer 是最接近我們對(duì)于應(yīng)用腳本加載和執(zhí)行的要求的
- 關(guān)于 defer，此圖未盡之處在于它是按照加載順序執(zhí)行腳本的，這一點(diǎn)要善加利用
- async 則是一個(gè)亂序執(zhí)行的主，反正對(duì)它來說腳本的加載和執(zhí)行是緊緊挨著的，所以不管你聲明的順序如何，只要它加載完了就會(huì)立刻執(zhí)行
- 仔細(xì)想想，async 對(duì)于應(yīng)用腳本的用處不大，因?yàn)樗耆豢紤]依賴（哪怕是最低級(jí)的順序執(zhí)行），不過它對(duì)于那些可以不依賴任何腳本或不被任何腳本依賴的腳本來說卻是非常合適的，最典型的例子：Google Analytics
3. 動(dòng)態(tài)添加script標(biāo)簽
var script = document.createElement('script')
script.src = 'xxx.js'
document.body.append(script)//才開始下載
動(dòng)態(tài)創(chuàng)建的script，設(shè)置src后并不會(huì)立即下載，而是添加到頁面中才開始下載
參考鏈接：
