javascript - 如何在 DOMContentLoaded 之前加载插入的 javascript？

Question

我有一个在我的页面 HTML 的 HEAD 中引用的远程脚本。第一个脚本通过将另一个脚本附加到 DOM 来加载和插入另一个脚本。这两个脚本都存在于与它们嵌入的页面不同的域中。

第一个脚本的内容如下所示:

(function(){
  var siteIdentifier = ...
  var scriptTag = document.createElement('script');
  scriptTag.type = 'text/javascript';
  scriptTag.src = '//blah.com/foo/' + siteIdentifier + '/second_script.js';
  scriptTag.async = true;
  document.getElementsByTagName('head')[0].appendChild(scriptTag);
})();

当我在 Chrome(版本 43.0.2357.81，64 位)中尝试此操作时，我发现第一个脚本在时间轴中加载得非常早。但是，直到 DOMContentLoaded 事件发生后，第二个脚本才会加载。

以下屏幕截图显示了两个脚本的加载/执行时间线。第一个脚本是顶部项目，第二个脚本是底部项目。忽略中间的项目，这是一个不同的工件，我无法从屏幕截图的时间轴中过滤掉。垂直蓝线是 DOMContentLoaded 事件。

我尝试过使用和不使用异步和延迟，但这似乎没有效果。有什么方法可以强制第二个脚本的加载是即时的，而不是等到 DOMContentLoaded 事件发生时才加载？

更新:

我创建了一个示例来展示使用 RawGit 和 Gist 的问题:

https://rawgit.com/javidjamae/43f81b4fb654e133cfe9/raw/87abe3a5351d120bdd316503d221f02ad6d3f699/index.html

打开 Chrome 开发者工具并在页面加载时查看网络选项卡。您可以使用时间轴上的 slider 缩小特定时间段的范围，并查看何时加载了哪些脚本。您可能需要刷新几次以确保 shim.js 在 DOMContentLoaded 事件之前加载良好，但您会注意到无论 shim.js 何时加载并完成执行，second.js 都不会在 DOMContentLoaded 之前加载。

注意:我无法使用 JSFiddle，因为它不会加载您定义的任何内容，包括外部脚本，直到 DOMContentLoaded 之后。

更新 2:

一些背景:我们正在构建一个嵌入数百个不同站点的第 3 方产品。第一个脚本实际上是一个垫片，它提取一些识别信息，然后使用识别信息作为 url 的一部分调用第二个脚本。我们正在让每个人直接使用第二个脚本，但在我们所有的客户都直接使用第二个脚本之前，我们需要 shim 来有效地自动路由他们。第一个和第二个脚本都是动态生成的(即服务器端呈现的)位于 CDN 后面的脚本。

Answer 1

正如评论中所指出的，鉴于您的第一个脚本依赖于 DOM 来加载第二个脚本，我认为您不会找到纯 JS 解决方案。

我建议编写一个服务器端脚本(如 jsp)作为 js 文件。您可以将 .js 扩展名映射为 jsp。

在您的服务器代码中，您可以获取传递适当参数的第二个脚本。 <script src="/webapp/jsp_file.js">然后在 jsp 文件中使用一些 tag libraries导入第二个js。

这有一个丑陋的缺点，即您的服务器成为第二个 js 的真正客户端 - 可能会导致性能问题并且如果它依赖于请求 header /ip 过滤，也可能会破坏第二个 js 文件。