javascript - 无阻塞地下载javascript

Question

上下文:我的问题与提高网页加载性能有关，特别是 javascript 对页面加载的影响(脚本下面的资源/元素被阻止下载/呈现)。

这个问题通常可以通过将脚本放在底部(例如，就在标签之前)来避免/减轻。

我正在查看的代码用于网络分析。将它放在底部会降低它的准确性；因为这个脚本对页面内容没有影响，也就是说，它不会重写页面的任何部分——我想把它移到头部。如何在不破坏页面加载性能的情况下做到这一点是关键。

根据我的研究，我发现了六种用于下载脚本的技术(所有或大多数主要浏览器都支持)，这样它们就不会阻止加载/呈现页面下方的内容:

(i) XHR + eval();

(ii) XHR + 注入(inject)；

(iii) 下载 HTML 包装的脚本，就像在 iFrame 中一样；

(iv) 将脚本标记的 async 标志设置为 TRUE(仅限 HTML 5)；

(v) 设置脚本标签的 defer 属性；和

(vi) '脚本 DOM 元素'。

这是我不明白的最后一个。实现模式 (vi) 的 javascript 是:

(function() {
  var q1 = document.createElement('script');
  q1.src = 'http://www.my_site.com/q1.js'
  document.documentElement.firstChild.appendChild(q1)
})();

看起来很简单:创建匿名函数然后在同一个 block 中执行。在这个匿名函数中:

• 创建脚本元素

• 它的 src 元素设置到它的位置，然后

• 脚本元素被添加到DOM

但是虽然每一行都很清楚，但我仍然不清楚这种模式究竟如何允许脚本加载而不阻止页面下方元素/资源呈现/加载？

Answer 1

先记下:

(iv) setting the script tag's 'async' flag to 'TRUE' (HTML 5 only);

async是 HTML 意义上的“ bool 属性”。这意味着以下任何一项都是正确的:

<script async src="..."></script>
<script async="" src="..."></script>
<script async="async" src="..."></script>

并且以下两者使脚本被异步加载，但不符合要求(因为可能造成混淆):

<script async="true" src="..."></script>
<script async="false" src="..."></script>

---

现在回答你的问题。关键是 HTML 解析器 被脚本阻止了(因为人们会做一些愚蠢的事情，例如 document.write("<!--") ，甚至来自外部 JS 文件，并期望它“工作”)。但是，在您的情况 (vi) 中，HTML 解析器永远不会看到 script 元素，因为它是直接添加到 DOM 中的。从逻辑上讲，如果 script HTML 解析器看不到元素(或者更确切地说，<script> 开始标记)，它也无法停止解析。