使用appendChild(）动态添加的脚本是按顺序执行还是并行执行

Are scripts added dynamically with appendChild() executed sequentially or in parallel?

本文关键字：顺序 执行 并行执行 脚本 appendChild 动态 添加 使用      更新时间：2023-09-26

我正在使用类似以下代码动态地向页面添加脚本：

var s = document.createElement('script');
s.src = 'script.js';
(document.head||document.documentElement).appendChild(s);

我添加的第一个脚本是jQuery，之后捆绑了几个插件（都在一个JS文件中），然后第二个脚本使用jQuery和添加的第一份JS文件中创建的一些其他对象。

问题是，在第二个脚本中抛出了错误，称jQuery，以及其他一些未定义的内容。

我假设以这种方式添加到DOM的脚本将按顺序解析/执行，但这些错误表明它们是并行执行的。

是哪一个？

基本上，建议您使用库来处理此问题，但我不太喜欢库，因为它们通常提供的内容远远超过您的需求，但这并不一定是坏事。

要按顺序加载脚本，您需要在第一个脚本完成加载后绑定第二个脚本进行加载。

var script1 = document.createElement('script');
script1.onload = function() {
    // script 1 has loaded
    var script2 = document.createElement('script');
    document.head.appendChild(script2);
    script2.src = "...";
}
document.head.appendChild(script1);
script1.src = "...";
相关文章：