Chrome下測試async/defer對指令碼載入執行順序的影響——跟你們說的有些不一樣

狂刀二發表於2019-01-04
Chrome指令碼

測試環境

Chrome下測試async/defer對指令碼載入執行順序的影響——跟你們說的有些不一樣

我們已知

我們已知如下，不知道可以到網上找幾篇相關文章，可以得出下面的結論

  • 指令碼是按順序載入和執行的
  • 指令碼的載入和執行會阻塞頁面解析
  • defer：非同步載入，頁面解析完成後執行，保證順序，會阻止DOMContentLoaded事件
  • async：非同步載入，載入後立即執行，不保證順序，會阻止Load事件
  • 一個指令碼同時新增defer和async，會忽略defer

先說測試結論

只列出和上面有衝突的點

  • 指令碼不是按順序載入的，是同時載入多個
  • 指令碼載入會阻塞頁面解析，但指令碼執行可能和頁面解析同時進行

另外，還有一種情況，就是有的指令碼使用defer，有的使用async，這種情況的執行順序是

  • 先執行不帶defer/async的指令碼
  • 再執行帶defer屬性的指令碼
  • 最後執行帶async屬性的指令碼

只要有defer屬性的指令碼，async屬性的指令碼總是在DOMContentLoaded事件和Load事件之間執行。

注：之所以有出入，應該是Chrome所做的優化。

測試HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="http://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.js"></script>
  <script src="http://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
</body>
</html>
複製程式碼

測試方法

Chrome下測試async/defer對指令碼載入執行順序的影響——跟你們說的有些不一樣

Chrome下測試async/defer對指令碼載入執行順序的影響——跟你們說的有些不一樣

下面開始驗證我上面所說的測試結論。

測試詳細過程

略。略。略。

測試HTML有了測試方法有了，還想讓我截圖？關注我們的微博@狂刀二

相關文章