同步載入 阻塞模式，提高安全性 過多JS載入會影響頁面效率 預設情況下，JS是同步載入，及優先載入外部JS，只有當JS文件載入完成，don和css才開始載入 <script src = 'index.js' ></script> 非同步載入 非阻塞載入 動態創建script defer 延遲載入JS， ...
同步載入
- 阻塞模式，提高安全性
- 過多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解析
