使用两种不同的方法动态加载Javascript

在花了几个小时试图找到导入动态JS的最佳方法后，我找到了两个备选方法。第一种方法被Analytics和许多著名的JS库使用，但第二种方法更小，更容易理解，为什么Google Analytics或其他主要JS库不使用它

一,

二,

我知道这两个方法看起来几乎相同，但第一个方法将脚本插入页面中第一个标记之前，第二个方法将脚本作为第一个标记在页面中的最后一个嵌套兄弟插入

因为第二种方法更小，更容易理解，为什么不使用呢？它在某些特定的浏览器版本或品牌上有问题吗

---

谢谢。

它与浏览器无关，而是关于：

c.parentNode.insertBefore(a,c);

及

第一个正在尝试在页面中的所有其他脚本标记之前插入脚本。此部分：

document.getElementsByTagName("script")[0]

获取页面中的第一个脚本标记，然后在此之前注入脚本标记。这是什么？因为，第一个解决方案希望向页面添加一个脚本，并确保它是第一个执行的。但是第二个解决方案只是想在页面上附加一个脚本，如果您使用其他库，如jQuery、bootstarp或其他什么，并且您已经在脚本中使用了它们，那么您应该使用第二个解决方案，因为正如我所说的，如果您使用第一个解决方案，您将无法访问页面中的任何其他脚本

但是如果您像这样更改第一种方法：

//...
var scripts=document.body.querySelectorAll("script:last-child");
c=scripts[scripts.length];

现在，这里是页面中的最后一个脚本标记，如果使用insertBefore附加脚本标记：

c.parentNode.insertBefore(a,c);

它被插入到c DOM级别的第一个脚本标记之前。它在同一DOM级别的其他脚本之前执行。因此，insertBefore与作为第一个要执行的脚本标记无关，如果第一个方法是这样，那么原因是您正在使用以下命令选择整个DOM中的第一个脚本标记：

c=document.getElementsByTagName("script")[0]

并在此之前插入脚本标记：

c.parentNode.insertBefore(a,c);

第一种方法

parentNode.insertBefore(a,c);

确保它将在指定的DOM对象{here:c}的开头追加一个DOM对象{here:a}。当

确保它将任何DOM对象附加到指定位置DOM对象的末尾

---

所以第一个方法确保附加的脚本将首先执行。对于EG：考虑一个案例，当后续脚本需要{：}：正确执行。< /P>谢谢，你是对的！但我还有另一个问题：如果我有一个页面，其中有很多脚本被导入，然后我有一个页面，其中也有很多脚本被导入，在最后我插入方法1。在这种情况下，在body标记末尾导入的脚本是否会先于页面中的所有其他脚本导入，即使它是在body标记末尾导入的？浏览器是否会先读取要插入的HTML代码，然后再确保以正确的顺序导入脚本？非常感谢你@user3262028：我改变了我的答案来回答你的问题，我真的试图澄清它。我花了一些时间来理解你说的话，但它是正确的！我在Chrome和FF上做了一些测试，它就像你说的那样工作。非常感谢。我试着做了一个测试，以确保你是正确的，但我的测试证明不是这样。看：创建一个HTML文件并在里面复制/粘贴这两个方法，但要先使用第二个方法。将方法2的src更改为test2.php，将方法1的src更改为test1.php。test2.php的内容必须是console.log'appendChild'；和test1.php必须是console.log'insertBefore'；。如果您运行此代码，您将看到控制台将首先记录appendChild，然后再记录insertBefore，这证明出现了问题，并且与您所说的不一致！非常感谢你的帮助

c=document.getElementsByTagName("script")[0]

c.parentNode.insertBefore(a,c);

parentNode.insertBefore(a,c);

parentNode.appendChild(a);