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

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 函数。

当协议：主机：端口不匹配时，就会发生跨域请求

在第一种情况下同源：

JQuery 使用XMLHttpRequest open函数来async=false强制同步请求（参见源代码）。

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

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

主线程上的同步 XMLHttpRequest 已弃用

在第二种情况下跨域：

JQuery使用ajax如下（见源码）

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

正如您所说，它将并行加载。