javascript - 动态插入的脚本标签未按正确顺序执行

Question

以下是我的 html 代码片段:

...

<script src=".../jquery.min.js"></script>

<script id="foo">
    if (!window.jQuery) {
        var jquery = document.createElement("script");
        jquery.src = ".../jquery.min.js";
        var self = document.getElementById("foo");
        self.parentNode.insertBefore(jquery, self.nextSibling);
        console.log("haha");
    }
</script>

<script>
    console.log("hehe");
</script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

第一个脚本标签是一个 jquery CDN。 id 为“foo”的脚本标签的目的是，万一 CDN 失败，它会在加载以下 Bootstrap js 文件之前加载 jquery 文件的本地副本。

但是，不知何故，插入的jquery文件并没有在bootstrap js文件之前执行。我尝试将 console.log("wow") 放入该本地 jquery 文件中。控制台中的结果是 “haha”，“hehe”，来自 bootstrap js 文件的一些错误消息，“wow”。观察DOM，插入的jquery标签确实出现在"hehe"脚本之前，我想知道为什么它没有按正确的顺序执行，是否有更好的方法来实现我的目标？

Answer 1

用document.write() 以外的任何内容插入的动态插入的脚本文件不以任何可预测的顺序执行。它们是异步的，将按照自己的节奏加载和运行。

您不能依赖于异步脚本相对于其他脚本的任何加载顺序，除非您编写代码来监视事情何时完成加载并且仅在满足某些特定条件时才运行代码。

如果您使用 document.write() 插入脚本，然后它将成为一个阻塞脚本加载，它将在 document.write() 之后解析的任何脚本标记之前加载和运行。语句，与 <script> 相同标签在那个地方的页面源代码中。但是，使用 document.write()可能会干扰某些浏览器加载优化，因此使用该技术可能会有一些缺点。

您可以使用 document.write()这样:

<script src=".../jquery.min.js"></script>

<script>
    if (!window.jQuery) {
        document.write('<scr' + 'ipt src="../jquery.min.js"></scr' + 'ipt>');
    }
</script>

关于此主题的整篇文章:CDNs fail, but your scripts don't have to - fallback from CDN to local jQuery .