script標籤屬性：defer和async

直接使用<script>時，html會按照順序加載並執行，在此過程中，會阻塞DOM渲染

非阻塞JS的加載辦法：1、動態加載js   2、<script>加屬性defer和async

在此主要說明<script>標籤屬性defer和async：

defer

設置defer屬性，瀏覽器會異步下載文件且不會影響到DOM渲染；

如果多個<script>設置defer屬性，則會按照頁面順序執行所有的script；

defer會在DOM渲染完，DOMContentLoaded調用前執行。

async

設置async屬性，瀏覽器會異步下載文件 且在允許的情況下執行；

如果多個<script>設置async屬性，不會按照頁面順序執行，而是先加載完先執行。

DOMContentLoaded事件觸發並不受async加載的影響，在腳本加載完之前，就已經觸發DOMContentLoaded。

區別

defer要等所有的腳本加載完後按照順序執行。

async的執行是加載完成就會去執行，先加載完先執行。

場景應用

defer：腳本代碼依賴於頁面中的DOM元素或被其他腳本文件依賴。

async：腳本不依賴頁面中的DOM元素，也沒有被其他腳本文件依賴。

不確定的情況下，defer更穩定。