【青訓營】- Script标簽中async和defer屬性總結

2021-11-15 23:50:00

這是我參與8月更文挑戰的第15天，活動詳情檢視： 8月更文挑戰

本文是筆者在參加位元組跳動第一屆前端青訓營進階班的學習筆記。

為什麼需要async和defer？

在進行詳細介紹async和defer的差別之前，我們先講講為什麼需要這兩個屬性，請看下面的例子，假如資源1需要加載很久才能完成，但是資源2很快就可以完成，此時使用者需要等待很久才能看到頁面，造成使用者體驗不好，是以我們需要一個推遲加載資源1的方法，這就是async和defer誕生的原因。

<script src="資源1.js"></script>
<script src="資源2.js"></script>
複制代碼

讓第二個檔案推遲執行，也就是說添加defer屬性。

<script src="資源1.js" defer></script>
複制代碼

此時執行順序是同步的，也就是按照定義的順序，誰在上面誰先執行，執行完一個在執行下一個。這是script标簽在body底部的情況，如果在head中定義則會阻塞HTML的解析，請看下圖。JS腳本的加載和執行會阻塞DOM的渲染。

立即下載下傳，不影響其他操作，等下載下傳完成之後在暫停HTML解析然後執行腳本。(加載完成後會立即執行)

立即下載下傳，但是在Html解析和script加載完之後在執行defer屬性标記的腳本。

執行步驟圖示

如果你想對這兩個屬性進行測試，可以嘗試使用node建立一個伺服器，然後通過延遲傳回來測試輸出的順序。