Question

(function() {
     var s = document.createElement('script');
     s.type = 'text/javascript';
     s.src= 'http://yourdomain.com/script.js';
     var x = document.getElementsByTagName('script')[0];
     x.parentNode.insertBefore(s, x);
 })();

我有一些js代码，我不知道为什么它可以异步加载？我将脚本dom元素添加到html，为什么这个脚本可以加载异步但其他脚本和html加载到一个线程中。

Answer 1

听起来你可能会对“异步”加载的内容感到困惑。

所有HTML和脚本（包括在您的情况下动态插入的脚本）解析和执行在一个线程中。

然而，获取（意味着从网上下载）可以与上述线程同时完成。浏览器将继续并行获取外部文件（CSS，脚本，图像等）。但是对于脚本，它会在到达尚未完全提取的脚本标记时暂停解析，并在获取后执行脚本，以便脚本有机会在浏览器解析之前修改页面的其余部分。您可以在脚本标记中使用async and defer attributes更改该行为。刚才描述的行为对应于默认值async = false和defer = false。

当async == true时，浏览器将在并行获取脚本时继续解析页面，然后在获取完成时暂停解析（因此这可能在解析页面的任何时候发生），并执行脚本。在这里你可以看到单线程的效果。我认为该规范有good figure来说明这一点。

现在，对于像您的情况一样动态插入的脚本，大多数浏览器默认使用async = true。有关详细信息，请参阅that post和MDN notes。

最后，在引用“异步”加载时还有另一种含义：AMD（例如，如果使用Require.js）通常使用您显示的代码动态插入脚本标记。在这种情况下，异步更多的是能够“按需”获取和执行不同的脚本，即仅当用户请求一些额外的功能时（例如，您打开表单版本，因此页面将仅获取并执行脚本与那时的编辑有关。）

为什么Script DOM Element可以异步加载

1 个答案: