script標籤中defer與async與不寫的區別

1. <script src="script.js"></script>

   沒有 defer 或 async，瀏覽器會當即加載並執行指定的腳本，「當即」指的是在渲染該 script 標籤之下的文檔元素以前，也就是說不等待後續載入的文檔元素，讀到就加載並執行。

2. <script async src="script.js"></script>

   有 async，加載和渲染後續文檔元素的過程將和 script.js 的加載與執行並行進行（異步）。

3. <script defer src="myscript.js"></script>

   有 defer，加載後續文檔元素的過程將和 script.js 的加載並行進行（異步），可是 script.js 的執行要在全部元素解析完成以後，DOMContentLoaded 事件觸發以前完成。

1. 藍色線表明網絡讀取，紅色線表明執行時間，這倆都是針對腳本的；綠色線表明 HTML 解析。

2. 此圖告訴咱們如下幾個要點：

3. defer 和 async 在網絡讀取（下載）這塊兒是同樣的，都是異步的（相較於 HTML 解析）
4. 它倆的差異在於腳本下載完以後什麼時候執行，顯然 defer 是最接近咱們對於應用腳本加載和執行的要求的
5. 關於 defer，此圖未盡之處在於它是按照加載順序執行腳本的，這一點要善加利用
6. async 則是一個亂序執行的主，反正對它來講腳本的加載和執行是牢牢挨着的，因此無論你聲明的順序如何，只要它加載完了就會馬上執行
7. 仔細想一想，async 對於應用腳本的用處不大，由於它徹底不考慮依賴（哪怕是最低級的順序執行），不過它對於那些能夠不依賴任何腳本或不被任何腳本依賴的腳原本說倒是很是合適的，最典型的例子：Google Analytics