同步載入
- 阻塞模式，提高安全性
- 過多JS載入會影響頁面效率
- 預設情況下，JS是同步載入，及優先載入外部JS，只有當JS檔案載入完成，don和css才開始載入
<script src = 'index.js' ></script>
非同步載入
- 非阻塞載入
- 動態建立script
- defer 延遲載入JS，等到HTML的DOM完全解析之後
- async HTML的文件解析和指令碼的獲取同時進行
<script src = 'index.js' defer></script> #defer
<script src = 'index.js' async></script> #async
理解最佳化
- 瀏覽器解析html的DOM是從上到下的,JS預設為同步載入
- 先被解析head的JS資源, 在body沒有解析完之前會被繫結監聽
即：head的JS資源在頁面載入前，body的JS資源在頁面載入後逐一獲取JS
如：JS替換頁面全域性變數時, 需要將JS在body獲取, 或者在head進行defer
PS：網頁播放器一般放在body最底部,網頁播放器與內容相干甚少,直接按需求defer/async
預設
async
defer
- 預設: 提前載入並執行, 都佔用html解析
- async: 非同步載入, 獲取和解析同時, 執行佔用html解析
- defer: 非同步載入, 獲取完並不執行, 執行不佔用html解析