浏览器脚本标记“异步”属性不起作用

我正在动态创建脚本标记并将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

浏览器脚本标记“异步”属性不起作用

回答

相关问题