參考

Youtube – #3 JavaScript Loading Strategies (async and defer) | JavaScript Full Tutorial

no async no defer

當遊覽器 parse HTML 遇到 <script src> 時, 它會去 download 這個 file, 這時會停止 parse HTML. 一直等到這個 JS file download 完畢.

然後遊覽器會開始 execute 這個 JS file 程式碼. executed 後繼續 parse HTML.

parse HTML > download js > waiting download completed > execute js > continue parse HTML

async

async 是非同步 download, 當遊覽器 download JS file 時, 它不會等, 而是繼續 parse HTML.

等到這個 file download 完畢, 就暫停 parse HTML, 去 execute JS file. executed 後繼續 parse HTML.

有一點需要特別注意, 如果有多個 async file, 遊覽器不會管它們的順序, 哪個先 download 完畢就馬上 execute.

parse HTML > download a.js (no waiting) > parse HTML > download b.js (no waiting) > parse HTML > 

b.js finish download > execute b.js > parse HTML > a.js finish download > execute.a.js > parse HTML

defer

defer 也是非同步 download, 但它 download 完畢之後並不會馬上 execute. 而是等到 parse HTML 結束後才 execute.

而已它 execute 是講究順序的.

parse HTML > download a.js (no waiting) > parse HTML > download b.js (no waiting) > parse HTML > 

b.js finish download (no run first) > parse HTML > a.js finish download (no run first) > parse HTML finish > execute.a.js (依據順序) > execute b.js.

async defer together?

看到 facebook 的 sample code 是 2 給一起用. 於是差了一下

stackoverflow – Can you use both the async and defer attributes on a HTML script tag?

原來是為了相容遊覽器, 有些遊覽器不支援 async 哦.

總結:

1. 以前需要把 JS 寫到 body 最後面, 現在被 async defer 取代了.

2. async defer 用其中一個就可以了.

3. defer 是最常用的, 因為通常在乎順序

4. async 的一個使用場景是 analytics 因為希望儘快做 tracking, defer 有點慢了.