javascript - 附加包含 javascript 资源的 html 时了解 JS 加载

Question

我最近在附加一个包含 <script src=[...]> 的 HTML block 时遇到了一个问题。 .我创建了一个 js fiddle显示问题(或者我应该说我对 JS 的理解很差)。

当将以下 html block 添加到页面时，看起来脚本“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>

在注入(inject)这个 html block 的代码之后，我添加了一个延迟函数，它再次检查是否声明了 jwplayer，瞧，它就在那里。以下代码片段输出 is jwplayer declared T+5s? function

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

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

(欢迎提供带有指向更深入解释的链接的最少答案!)

编辑

更神秘的是，如果 JS 文件托管在加载页面的同一台服务器上，则不会出现此问题。不幸的是，我无法在 JSFiddle 上显示它。

Answer 1

Scripts that are dynamically created and added to the document are async by default, they don’t block rendering and execute as soon as they download, meaning they could come out in the wrong order.

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

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