async 和 defer 的區別
摘自：
https://blog.csdn.net/liuhe688/article/details/51247484
https://segmentfault.com/q/1010000000640869
https://www.cnblogs.com/leungUwah/p/6480868.html
async 和defer 的區別
在開發中我們可以在script中聲明兩個不太常見的屬性：defer和async，下面分別解釋了他們的用法：
defer：用於開啟新的線程下載腳本文件，並使腳本在文檔解析完成後執行。 async：HTML5新增屬性，用於異步下載腳本文件，下載完畢立即解釋執行代碼。
沒有 defer 或 async，瀏覽器會立即加載並執行指定的腳本，“立即”指的是在渲染該 script 標簽之下的文檔元素之前，也就是說不等待後續載入的文檔元素，讀到就加載並執行。
有 async，加載和渲染後續文檔元素的過程將和 script.js 的加載與執行並行進行（異步）。
有 defer，加載後續文檔元素的過程將和 script.js 的加載並行進行（異步），但是 script.js 的執行要在所有元素解析完成之後，DOMContentLoaded 事件觸發之前完成。
然後從實用角度來說呢，首先把所有腳本都丟到 </body> 之前是最佳實踐，因為對於舊瀏覽器來說這是唯一的優化選擇，此法可保證非腳本的其他一切元素能夠以最快的速度得到加載和
關於DOMContentLoaded 的拓展知識：
DOMContentLoaded和load的區別：它們都是頁面加載的時候觸發的事件。區別在於觸發的時機不一樣。
瀏覽器渲染頁面DOM文檔加載的步驟：
1.解析HTML結構。
2.加載外部腳本和css文件。
3.解析並執行腳本代碼。
4.DOM樹構建完成。(此時會觸發DOMContentLoaded事件)
5.加載外部圖片等文件。
6.頁面加載完畢。(此時會觸發load事件)
async 和 defer 的區別