JavaScript的defer與async

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

三者之間的區別？

script

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

defer script

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

async script

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

什麼情況下使用 defer 和 async？

如果腳本不依賴於任何腳本，並不被任何腳本依賴，那麼則使用 defer。

如果腳本是模塊化的，不依賴於任何腳本，那麼則使用 async。

需要注意的地方

async 對於內聯腳本沒有作用。

defer 不應該在內聯腳本上使用。從 Gecko 1.9.2 開始，內聯腳本的 defer 會被忽略，但是在 Gecko 1.9.1 中，如果定義了 defer 屬性，即使內聯腳本也會被延遲執行。

defer 的腳本是按照聲明順序執行的。而 async 的腳本不同，只要腳本下載完成，將會立即執行，未必會按照聲明順序執行。

IE9 及以下版本的瀏覽器，defer 的腳本也未必會按照聲明順序執行。

如果同時使用 defer 和 async，則會默認使用 async，忽略 defer。

作者：胡陽廣

原文：https://uxwind.me/2016/09/24/defer-and-async.html

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！