Question

上下文：我的问题涉及改善网页加载性能，特别是javascript对页面加载的影响（脚本下面的资源/元素被阻止下载/渲染）。

通常将脚本放在底部（例如，在标签之前）来避免/减轻此问题。

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

根据我的研究，我发现有六种技术（在所有或大多数主流浏览器中都支持）下载脚本，这样它们就不会阻止页面内容加载/渲染：

（i） XHR + eval（）;

（ii） XHR + 注入;

（iii）按照iFrame下载HTML包装的脚本;

（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)
})();

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

创建了一个脚本元素
将 src 元素设置为它的位置，然后
将脚本元素添加到DOM

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

Answer 1

首先注意一点：

（iv）将脚本标记的'async'标志设置为'TRUE'（仅限HTML 5）;

在HTML意义上，

async是一个“布尔属性”。这意味着以下任何一种都是正确的：

<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解析器从未看到脚本元素，因为它直接添加到DOM中。有点逻辑上，如果HTML解析器看不到script元素（或者更确切地说，<script>开始标记），它也无法停止解析。

Answer 2

我会尝试用一个网址说出一切，这样可以节省我们的时间。

请查看一本书的作者的演示文稿，该书介绍了您提到的主题。我发现这个演示文稿（还有一个youtube也是 - 我认为在google频道中）非常有趣。它解释了你想知道的很多东西。

http://www.slideshare.net/souders/sxsw-even-faster-web-sites

http://www.youtube.com/watch?v=aJGC0JSlpPE（很长时间的视频详细介绍了性能参数/主题）

Answer 3

您的上一个示例修改了DOM树，并且只能在DOM树完成后使用（onload）。因此，当您加载js脚本时，浏览器已经能够完全呈现页面。

以下是firefox呈现2个不同版本的示例：

img http://img177.imageshack.us/img177/9302/40229406.jpg

test.html使用上面的方法在页面底部的onload中加载。
test2.html加载了一个简单的脚本标记。

注意红线，这是触发onload元素的时候。

下载javascript而不阻止

3 个答案: