之前的博客漫談前端優化中的引用資源優化曾經提到過腳本引用異步設置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；主要功能點說完了，小伙伴們有沒有分清楚他們的區別了那。