JavaScript 的 defer 與 async

當解析器遇到 script 標籤時，文檔的解析將中止，並當即下載並執行腳本，腳本執行完畢後將繼續解析文檔。可是咱們能夠將腳本標記爲 defer，這樣就不會中止文檔解析，等到文檔解析完成才執行腳本，也能夠將腳本標記爲 async，以便由其餘線程對腳本進行解析和執行。

三者之間的區別？

script

當解析器遇到 script 標籤時，文檔的解析將中止，並當即下載並執行腳本，腳本執行完畢後將繼續解析文檔。

defer script

當解析器遇到 script 標籤時，文檔的解析不會中止，其餘線程將下載腳本，待到文檔解析完成，腳本纔會執行。

async script

當解析器遇到 script 標籤時，文檔的解析不會中止，其餘線程將下載腳本，腳本下載完成後開始執行腳本，腳本執行的過程當中文檔將中止解析，直到腳本執行完畢。

什麼狀況下使用 defer 和 async？

1. 若是腳本不依賴於任何腳本，並不被任何腳本依賴，那麼則使用 defer。
2. 若是腳本是模塊化的，不依賴於任何腳本，那麼則使用 async。

須要注意的地方

1. async 對於內聯腳本沒有做用。
2. defer 不該該在內聯腳本上使用。從 Gecko 1.9.2 開始，內聯腳本的 defer 會被忽略，可是在 Gecko 1.9.1 中，若是定義了 defer 屬性，即便內聯腳本也會被延遲執行。
3. defer 的腳本是按照聲明順序執行的。而 async 的腳本不一樣，只要腳本下載完成，將會當即執行，未必會按照聲明順序執行。
4. IE9 及如下版本的瀏覽器，defer 的腳本也未必會按照聲明順序執行。
5. 若是同時使用 defer 和 async，則會默認使用 async，忽略 defer。

參考連接

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/script