Question

以下是我的情况：我通过

动态添加了2个脚本

$('body').append('<script src="http://localhost:8080/script_1.js"></script>');
$('body').append('<script src="http://localhost:8080/script_2.js"></script>');

然后我发现它们将按顺序加载，而不是从chrome控制台并行加载。

但是，如果我使用原生js

，它们可以并行加载

document.body.appendChild(script);

或jQuery函数：getScript

$.getScript('http://localhost:8080/script_1.js');

我搜索了很多，发现jQuery实际上将删除脚本标记，解析源代码，并使用其ajax函数$ .ajax（）来加载脚本而不是让浏览器处理。但$ .getScript（）函数也使用$ .ajax（）并且没有阻塞。显然，这不是$ .ajax（）的错。

这是一个测试用例：转到http://jquery.com并在控制台中粘贴以下脚本，该脚本将通过jQuery

两次添加js文件

$('body').append('<script src="/jquery-wp-content/themes/jquery/js/plugins.js"></script>');
$('body').append('<script src="/jquery-wp-content/themes/jquery/js/plugins.js"></script>');

检查时间线，您会发现它们按顺序加载。当然，我可以使用上面的原生js或$ .getScript（）来节省我的时间。

但是，我想知道为什么？为什么这些jQuery ajax调用不是并行添加脚本标记？

更新

更有趣的是，该序列似乎仅适用于来自相同来源的脚本。我试图从google托管库加载一些js文件，它们是并行的。在http://jquery.com

中也尝试过

$('body').append('<script src="https://ajax.googleapis.com/ajax/libs/ext-core/3.1.0/ext-core.js"></script>');
$('body').append('<script src="https://ajax.googleapis.com/ajax/libs/ext-core/3.1.0/ext-core.js"></script>');

Answer 1

将脚本附加到DOM时，根据跨域测试，使用不同的ajaxTransport函数。

当我们有一个protocol：host：port时，会发生跨域请求失配

在第一种情况下同源：

JQuery使用XMLHttpRequest open函数和async=false强制同步请求（see source）。

xhr.open(
        options.type,
        options.url,
        options.async,
        options.username,
        options.password
    );

因此在控制台上发出警告（至少在金丝雀上）。

主线程上的同步XMLHttpRequest已弃用

在第二种情况下来源：

JQuery使用ajax如下（see source）

script = jQuery("<script>").prop({
                    async: true,
                    charset: s.scriptCharset,
                    src: s.url
                }).....
document.head.appendChild(script[0]);

将按照您的声明并行加载。

如何使用jQuery并行处理动态添加的脚本标记

1 个答案: