script标簽中defer和async

Problem：

script會阻塞頁面的加載，如果是引用外部js的話，可能會由于這個外部js請求很久而出現空白頁問題

解決方法：defer / async

• defer

<script src="a.js" defer></script>
<script src="b.js" defer></script>
           

• 不會阻止頁面解析，并行下載下傳對應的js檔案;
• 下載下傳完之後不會執行;
• 等所有其他腳本加載完之後，在DOMContentLoaded事件之前執行對應a.js、b.js。

• async

<script src="c.js" async></script>
<script src="d.js" async></script>
           

• 不會阻止DOM解析，并行下載下傳對應的js檔案;
• 下載下傳完之後立即執行。

DOMContentLoaded事件

• 是等HTML文檔完全加載完和解析完之後運作的事件;
• 在load事件之前，不用等樣式表、圖像等完成加載。