下载javascript而不阻止

Question

上下文:我的问题涉及改进网页加载性能,特别是javascript对页面加载的影响(脚本下面的资源/元素被阻止下载/呈现).

通常将脚本放在底部(例如,在标签之前)来避免/减轻此问题.

我正在寻找的代码是用于网络分析.将其放在底部会降低其准确性; 并且因为这个脚本对页面的内容没有影响,也就是说,它不会重写页面的任何部分 - 我想把它移到头脑中.如何在不破坏页面加载性能的情况下做到这一点是关键.

根据我的研究,我发现有六种技术(在所有或大多数主流浏览器中都支持)下载脚本,这样它们就不会阻止下载内容加载/呈现:

(i) XHR + eval() ;

(ii) XHR + 注射 ;

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

(iv)将脚本标记的异步标志设置为TRUE(仅限HTML 5);

(v)设置脚本标签的延迟属性; 和

(vi) 'Script DOM Element'.

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

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

看起来很简单:创建匿名函数,然后在同一个块中执行.在这个匿名函数里面:

• 创建一个脚本元素

• 它的SRC元素设置为它的位置,然后

• script元素被添加到DOM中

但是虽然每一行都很清楚,但我仍然不清楚这种模式究竟是如何在不阻止渲染/加载的页面元素/资源的情况下加载脚本的？

Answer 1

首先要注意一点：

(iv) 将脚本标签的“async”标志设置为“TRUE”（仅限 HTML 5）；

async是 HTML 意义上的“布尔属性”。这意味着以下任一说法是正确的：

<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 中的。从逻辑上讲，如果 HTML 解析器没有看到某个script元素（或者更确切地说，<script>开始标记），它也无法停止解析。