Chrome下測試async/defer對腳本加載執行順序的影響——跟大家說的有些不同

時間 2019-11-07

標籤 chrome 測試 async defer 腳本加載執行順序影響大家有些不同欄目 Chrome 简体版

原文原文鏈接

測試環境

咱們已知

咱們已知以下，不知道能夠到網上找幾篇相關文章，能夠得出下面的結論html

腳本是按順序加載和執行的
腳本的加載和執行會阻塞頁面解析
defer：異步加載，頁面解析完成後執行，保證順序，會阻止DOMContentLoaded事件
async：異步加載，加載後當即執行，不保證順序，會阻止Load事件
一個腳本同時添加defer和async，會忽略defer

先說測試結論

只列出和上面有衝突的點react

腳本不是按順序加載的，是同時加載多個
腳本加載會阻塞頁面解析，但腳本執行可能和頁面解析同時進行

另外，還有一種狀況，就是有的腳本使用defer，有的使用async，這種狀況的執行順序是jquery

先執行不帶defer/async的腳本
再執行帶defer屬性的腳本
最後執行帶async屬性的腳本

只要有defer屬性的腳本，async屬性的腳本老是在DOMContentLoaded事件和Load事件之間執行。bash

注：之因此有出入，應該是Chrome所作的優化。app

測試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>
複製代碼