为什么谷歌推荐将Analytics异步代码放在<head>标签内的脚本之后？

Question

为什么谷歌推荐将Analytics异步代码放在<head>标签内的脚本之后？

8

为什么 Google 建议将 JS 脚本放在 html 中 analytics 异步跟踪代码之前？以下是引文：

“注意：为了确保异步片段与其他脚本的最流畅运行，我们建议您以以下一种方式之一将其他脚本放置在网站中：在 HTML 的 `` 部分的跟踪代码片段之前。” http://code.google.com/apis/analytics/docs/tracking/asyncMigrationExamples.html

- concept47

2个回答

2

当浏览器加载页面时，它会从上到下进行加载。浏览器可以使用有限数量的“连接”来加载外部链接的文档。如果您将他们的脚本放在您的脚本之前，您自己的脚本可能要等到他们完成后才能加载。分析代码对页面的功能不是至关重要的，因此我们可以将其保存到最后。

- Chris Baker

但是谷歌吹嘘其服务器的可靠性，甚至建议用户不要在本地提供ga.js，因为它已经被优化并且可能被全球用户的浏览器缓存...我觉得这不太合理，特别是它可以并行加载而不像其他脚本一样阻塞。 - concept47

“并行”概念受浏览器可用于异步请求链接文件的线程数量限制。Firefox，如果我没记错的话，最多只能使用6个线程。无论Google的服务器有多快，在这种情况下仍然受到客户端连接速度的限制，因为他们的浏览器正在加载页面和所有相关文档。所以假设用户使用拨号连接-您希望在Google Analytics之前加载脚本，因为您的脚本可能会影响可用性，而Google的脚本肯定不会，并且可能需要几分钟才能打开下一个异步线程。 - Chris Baker

如果是这样的话，为什么它在同一个链接中建议您将这些脚本放置在“跟踪代码片段和所有页面内容之后（例如，在HTML正文底部）”？ - concept47

无论是在所有内容之前加载还是之后加载都可以。 "在所有内容之前" 的路线对 Google 服务器的可用性非常有信心（这可能是个安全的赌注）。我认为关键是他们希望您将其放置在页面的一个极端端点或另一个端点。这不是一个必须命题，而是一个“应该”。其次，这是为了在网站管理员包含脚本的方式上建立一些统一性，而不是任意的。 - Chris Baker

那就是我的观点……我试图理解背后的原因。为什么他们没有建议在它在所有内容加载之后加载js文件之后再加载它？CSS文件仍在head中加载，为什么只将js文件移到页面末尾？我想了解他们建议的逻辑。 - concept47

我认为站点上没有人有资格解释 Google 最佳实践建议背后的原理，超出了我已经尝试做的事情。尽管 CSS 受到与 JS 相同的异步限制，但它影响页面外观，因此 CSS 放在顶部。如果将它们放在底部，则会在加载 CSS 之前看到未经样式处理的页面快照。JS 影响后期功能，因此可以将其放在页面底部而不产生可见效果。在 CSS 的情况下，您正在平衡页面加载速度和美学。 - Chris Baker

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ide · Accepted Answer

异步分析代码片段的作用是加载一个更加密集的脚本，检查用户浏览器的各种信息以识别他们，以便向分析服务器报告。然而，由于所有这些分析数据对页面的可用性并不重要，Google希望在浏览器方便的情况下运行它。

理论上，他们可以建议程序员将异步片段添加到页面底部，作为body的最后一个元素。然而，为了让程序员捕获UI事件并发送给分析，他们想要尽早使用_gaq变量。例如，你可能有一个按钮：<button onclick="_gaq.push(...)">Track</button>。通过尽早提供_gaq，异步片段中的小代码片段将排队这些消息，而较重的ga.js稍后将把它们发送到服务器。

现在，关于一些实现细节：通过添加一个带有async属性的新<script>元素到文档头部来加载ga.js。IE和WebKit将异步加载从脚本中插入的<script>标签。Firefox和Opera会遵循async属性并异步加载脚本。无论哪种方式，ga.js都是异步加载的，由浏览器方便地进行。

最后，一旦ga.js被执行，由于异步加载而不会阻塞页面渲染，它可以完成收集所有用户数据和_gaq队列中的任何消息并将它们发送到服务器的重要工作。 摘要：这种方法使用一个小的内联脚本来初始化一些关键变量，例如_gaq，使您的页面可以在完整的ga.js脚本准备就绪之前访问它们。这个小脚本还以一种大多数浏览器会异步下载和执行它，而不会阻塞页面的渲染或关键脚本的评估的方式动态地添加了一个<script src="ga.js">标签到文档中。