Question

我动态创建脚本代码并将async属性设置为true，并且它正确地显示在dom中，但查看网络标签会显示不同的故事。为什么加载的初始文件和动态加载的脚本标签之间存在如此大的差距？

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>

Answer 1

这里的async行为没有任何问题：

您尝试使用async属性阻止的是解析器阻止。如果您使用async属性，则表示：我不希望浏览器在下载此脚本时停止正在执行的操作。我知道这个脚本在运行时并不真正依赖于DOM中的任何内容，它也不需要以任何特定的顺序运行。

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

这基本上意味着你不关心你的两个JS文件将以何种顺序执行。

您使用这些红色箭头突出显示的差距是浏览器需要编译的时间（是的，浏览器执行JIT）并运行您的JavaScript代码。（从解析到执行JavaScript代码，大约250ms似乎并不合理。）在内联JavaScript代码未插入相应标记之前，脚本无法开始加载。

浏览器脚本标记＆＃34; async＆＃34;属性不起作用

1 个答案: