ブラウザスクリプトタグ「async」属性が機能しない

スクリプトタグを動的に作成して属性をtrueに設定すると、正しくDOMに表示されますが、ネットワークタブを見ても別の話が表示されます。最初にロードされるファイルとスクリプトタグの間に大きなギャップがあるのはなぜですか？ブラウザスクリプトタグ「async」属性が機能しない

DOM

ネットワークタブ

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/

そして、その基本的にあなたが実行されますあなたの2つのJSファイルを注文する気にしないことを意味します。

これらの赤い矢印で強調表示されたギャップは、ブラウザがコンパイルする必要がある（はい、ブラウザがJITを実行する）時間とJavaScriptコードを実行する時間です。（JavaScriptコードの解析から構文解析まで250ミリ秒程度は不合理ではないようです。）インラインJavaScriptコードでは、タグが挿入されないうちにスクリプトのロードが開始されません。

出典

2016-12-25 21:40:08 idmean

awesome！私のためにすべてを明らかにしてくれてありがとう:) – Clement

ブラウザスクリプトタグ「async」属性が機能しない

答えて

関連する問題