Question

我最近在添加一个包含<script src=[...]>的HTML块时遇到了一个问题。我创建了一个js fiddle来显示此问题（或者应该说我对JS的理解不足）。

将以下html块添加到页面时，似乎延迟了脚本'gHnukrbe.js'的实际加载和执行。加载的脚本是'jwplayer cloud-player'，它定义了功能jwplayer。执行代码后，它输出is jwplayer declared? undefined

<div id="output">
  <script type="text/javascript" 
          src="https://cdn.jwplayer.com/libraries/gHnukrbe.js"></script>
  <script>
    $("#output").append("<p>is jwplayer declared? " + typeof jwplayer + "</p>");
  </script>
</div>

在注入此html块的代码之后，我添加了一个延迟函数，该函数再次检查是否声明了jwplayer并声明存在。以下代码段输出is jwplayer declared T+5s? function

setTimeout(function() {
    $("#output")
      .append("<p>is jwplayer declared T+5s? " + typeof jwplayer + "</p>");
    }, 5000);

因此，我试图弄清楚浏览器在这种情况下如何加载脚本，因为我的印象是解析器将在执行任何其他JavaScript之前完全停止加载JS文件，但是现在显然正在这样做。 / p>

（欢迎提供包含更深入说明的链接的最小答案！）

编辑

要增加神秘的奥秘，如果JS文件位于页面加载所在的同一服务器上，则不会出现此问题。不幸的是，我无法在JSFiddle上显示它。

Answer 1

动态创建并添加到文档中的脚本默认情况下是异步的，它们不会阻止渲染并在下载后立即执行，这意味着它们可能以错误的顺序出现。

我们可以将它们明确标记为非异步。但是，添加async='false'不起作用。就像<input type="checkbox" checked="false" />不会取消选中该框一样。您将必须以编程方式创建脚本元素，而不是附加HTML块。

完整的解释：https://www.html5rocks.com/en/tutorials/speed/script-loading/

追加包含JavaScript资源的html时了解JS加载

编辑

1 个答案: