瀏覽器腳本標記「異步」屬性不起作用

我正在動態創建腳本標記並將async屬性設置爲true，它正確顯示在dom中，但查看網絡選項卡會顯示不同的故事。爲什麼在加載的初始文件和腳本標籤之間存在如此大的差距以便動態加載？瀏覽器腳本標記「異步」屬性不起作用

DOM

Network標籤

的index.html

<head> 
    <meta charset="UTF-8"> 
    <title>React App</title> 
    <script> 
    function loadjscssfile(BASE, filename, filetype) { 
     if (filetype == "js"){ //if filename is a external JavaScript file 
      filename = BASE + jsManifest[filename]; 
      var fileref = document.createElement('script') 
      fileref.setAttribute("type","text/javascript") 
      fileref.setAttribute("src", filename) 
      fileref.setAttribute("async", "true") 
     } 
     else if (filetype == "css"){ //if filename is an external CSS file 
      filename = BASE + cssManifest[filename]; 
      var fileref = document.createElement("link") 
      fileref.setAttribute("rel", "stylesheet") 
      fileref.setAttribute("type", "text/css") 
      fileref.setAttribute("href", filename) 
     } 
     if (typeof fileref != "undefined") 
      document.getElementsByTagName("head")[0].appendChild(fileref) 
    } 
    </script> 
    <!-- dynamically load hashed CSS files --> 
    <script src="./css-manifest.js"></script> 
    <script src="./js-manifest.js"></script> 
    <script> 
    var BASE = '../stylesheets/'; 

    for (var key in cssManifest) { 
     loadjscssfile(BASE, key, 'css'); 
    } 
    </script> 
</head> 
<body> 
    <div id="app"></div> 
    <!-- dynamically load hashed JS files --> 
    <script> 
    var BASE = '../prod/'; 
    for (var key in jsManifest) { 
     loadjscssfile(BASE, key, 'js'); 
    } 
    </script> 
</html>

來源

2016-12-25 Clement

沒有什麼錯在這裏async行爲：

你正在嘗試以防止與異步屬性是解析器阻塞。如果您使用async屬性，則表示：我不希望瀏覽器在下載此腳本時停止它正在執行的操作。我知道這個腳本並沒有真正依賴DOM中準備好的任何東西，而且它也不需要以任何特定的順序運行。

- https://css-tricks.com/async-attribute-scripts-bottom/

這基本上意味着你不在乎在訂購你的兩個JS文件將被執行。

您用這些紅色箭頭突出顯示的差距是瀏覽器需要編譯的時間（是的，瀏覽器執行JIT）並運行JavaScript代碼。（從解析執行JavaScript代碼看，大約250毫秒似乎不合理）。在內聯JavaScript代碼未插入相應標記之前，腳本無法開始加載。

來源

2016-12-25 21:40:08 idmean

太棒了！感謝澄清所有這些爲我:) – Clement

瀏覽器腳本標記「異步」屬性不起作用

回答

相關問題