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

How to use jQuery to handle dynamically added script tags in parallel

本文关键字：脚本 添加 动态 何使用 jQuery 并行处理      更新时间：2023-09-26

这是我的情况：我动态添加了 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 调用不是并行的？

更新

更有趣的是，该序列似乎仅适用于来自同一来源的脚本。我试图从谷歌托管的库中加载一些 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>');

将脚本附加到 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]);

如您所述，这将并行加载。

相关文章：