腳本引用中的defer和async的用法和區別

　　以前的博客漫談前端優化中的引用資源優化曾經提到過腳本引用異步設置defer、async，沒有細說，這裏展開一下，談談它們的做用和區別，先上張圖來個針對沒用過的小夥伴有個初始印象：

　　是的，就是在頁面腳本引用的時候設置defer或者async，爲何會有這兩個屬相來輔助腳本加載那，由於瀏覽器在遇到script標籤的時候，文檔的解析會中止，再也不構建document，有時打開一個網頁上會出現空白一段時間，瀏覽器顯示是刷新請求狀態(也就是一直轉圈)，這就會給用戶很很差的體驗，defer和async的合理使用就能夠避免這個狀況，並且一般script的位置建議寫在頁面底部(移動端應用的比較多，這兩個都是html5中的新屬性)。

　　因此相對於默認的script引用，這裏配合defer和async就有兩種新的用法，它們之間什麼區別那？

　　1.默認引用 script:<script type="text/javascript" src="x.min.js"></script>

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

 

　　2.async模式 <script type="text/javascript" src="x.min.js" async="async"></script>

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

 

　　3.defer模式 <script type="text/javascript" src="x.min.js" defer="defer"></script>

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

 

　　因此async和defer的最主要的區別就是async是異步下載並當即執行，而後文檔繼續解析，defer是異步加載後解析文檔，而後再執行腳本，這樣提及來是否是理解了一點了；

　　它們的核心功能就是異步，那麼兩種屬性怎麼去區分什麼狀況下用哪一個那，主要的參考是若是腳本不依賴於任何腳本，並不被任何腳本依賴，那麼則使用 defer，若是腳本是模塊化的，不依賴於任何腳本，那麼則使用 async；主要功能點說完了，小夥伴們有沒有分清楚他們的區別了那。

 

　　原文地址：腳本引用中的defer和async的用法和區別，薛陳磊 | Share the world