Question

我需要异步加载脚本到页面上。我正在使用createElement方法在头部动态插入脚本标记。发生了什么是首先页面源加载。完成后，头部中包含的所有元素将并行加载。一旦全部加载，我动态添加的脚本就会加载。

这在逻辑上是有意义的，但我正在寻找的是一种可以加速动态脚本加载的方法。我仍然希望它是异步的（不想做document.write）但仍然希望这个脚本可以与head元素的其他脚本并行加载。我能用这种方式工作

由于

Answer 1

在顶部放置几行javascript，创建动态脚本标记。

<script>
var script = document.createElement("script");
    script.src = "yourfile.js";
    script.async = true; //asynchronous
    document.getElementsByTagName("head")[0].appendChild(script);
</script>

有关其他选择，请查看此链接：http://friendlybit.com/js/lazy-loading-asyncronous-javascript/

Answer 2

如果您使用HTML5，则可以将属性async添加到script元素。无论何时加载（但不是最兼容），这是最简单的方法。需要明确的是，即使上面提供的代码只有在使用HTML5时才有效。问题是，你不必首先完成添加这样一个脚本的麻烦。

<script src="/path/to/your/js/here" async></script>

另请注意，XHTML不允许属性最小化，因此在XHTML中您必须使用

<script src="/path/to/your/js/here" async="async"></script>

此外，你有一个defer属性，它推迟解析javascript直到文档加载，这也可以用作defer="defer"，就像我使用{{1}显示示例脚本包含一样}}。 async和async标记都可以在同一个脚本元素中使用。

另请注意，这些属性只能添加到文档外脚本而不是内联脚本，这意味着如果不使用defer和async，则不能使用defer和src {1}}属性。

希望有所帮助！：）

异步JS加载到头部

2 个答案: