Question

我正在动态地将脚本标记添加到我的页面的DOM中，如下所示：

[0]

这应该产生这样的东西：

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

我只想对此脚本标记进行延迟或异步处理：

<script src="https://www.youtube.com/iframe_api"></script>

那么如何使用javascript进行此操作？

Answer 1

无需向async标记添加script，因为该属性为enabled by default，脚本将异步加载，除非被告知不要。

对于defer，就像更改JavaScript中的src属性一样，您也可以启用它，如下所示：

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
tag.defer = true;
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

或者，您可以使用setAttribute()。

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
tag.setAttribute('defer','');
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

Answer 2

我创建了一个demo（需要在禁用浏览器缓存的情况下进行尝试），在这里我试图使动态附加脚本的延迟工作有效。

<!DOCTYPE html>
<html>
  <head>
    <script src="https://andreymakahov.github.io/defer/big.js" crossorigin="anonymous" defer></script>
  </head>
  <body>
    <script>
      var script = document.createElement('script');
      script.src ="https://andreymakahov.github.io/defer/small.js";
      script.defer = true;
      document.body.appendChild(script);
    </script>
  </body>
</html>

因此，我们有两个脚本：

big.js的内容以console.log('big')结尾。他在头部内并且推迟了。
small.js只有console.log('small')。他将通过延后动态地附着在身体部位

我的期望是两个脚本都不会阻止HTML解析，将被异步加载并按顺序执行：

big.js
small.js

但是实际上，序列是这样的：

> small
> big

小型脚本的加载速度要快得多，因为它的大小要小得多，并且它不等待big.js首先加载和执行。

你们能解释一下这种行为吗？

通过javascript将defer或async属性添加到动态生成的脚本标记中

2 个答案: