如何延迟加载外部 JS 文件（谷歌分析）？答案

【问题标题】：How to delay loading external JS file (Google Analytics)?如何延迟加载外部 JS 文件（谷歌分析）？
【发布时间】：2011-07-05 19:33:02
【问题描述】：

我正在使用以下代码以不阻止呈现的方式加载我的 Google Analytics（外部 JavaScript）。

但是，同时使用 YSlow 和 Safari Web Inspector - 网络流量清楚地表明 ga.js 脚本仍在阻止渲染。

/*
http://lyncd.com/2009/03/better-google-analytics-javascript/
Inserts GA using DOM insertion of <script> tag and "script onload" method to
initialize the pageTracker object. Prevents GA insertion from blocking I/O!

As suggested in Steve Souder's talk. See:
http://google-code-updates.blogspot.com/2009/03/steve-souders-lifes-too-short-write.html
*/

/* acct is GA account number, i.e. "UA-5555555-1" */
function gaSSDSLoad (acct) {
  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."),
      pageTracker,
      s;
  s = document.createElement('script');
  s.src = gaJsHost + 'google-analytics.com/ga.js';
  s.type = 'text/javascript';
  s.onloadDone = false;
  function init () {
    pageTracker = _gat._getTracker(acct);
    pageTracker._trackPageview();
  }
  s.onload = function () {
    s.onloadDone = true;
    init();
  };
  s.onreadystatechange = function() {
    if (('loaded' === s.readyState || 'complete' === s.readyState) && !s.onloadDone) {
      s.onloadDone = true;
      init();
    }
  };
  document.getElementsByTagName('head')[0].appendChild(s);
}

/* and run it */
gaSSDSLoad("UA-5555555-1");

关于如何使用 JavaScript 来延迟加载 ga.js 文件的任何想法，因为上面的代码似乎没有按预期执行，直到整个页面都被呈现，这样我就不会阻塞渲染？

【问题讨论】：

标签： javascript html blocking

【解决方案1】：

/* and run it */
gaSSDSLoad("UA-5555555-1");

在页面完成渲染之前不要“运行它”。即：onload 或其他地方。不要在您的内联脚本块本身中包含上述行，否则您将一无所获。

【讨论】：

gaSSDSLoad("UA-5555555-1") 是我的 HTML 的最后一行。我不明白，我该怎么做？
如何在页面完成渲染之前不“运行”它？
把'gaSSDSLoad("UA-5555555-1");'放在你的身体onload中，而不是内联脚本中。
我该怎么做？会不会是这样的：window.onload = function () { gaSSDSLoad("UA-3631080-1"); }; ?
@mp_: 使用 "load" 事件: window.addEventListener("load", function() { /* 并运行它 */ gaSSDSLoad("UA-5555555-1"); },假）；

【解决方案2】：

如果你使用 jQuery，你可以在其中包含 run it 部分（这与正文 onLoad() 事件相同）：

$(window).load(function() {
    /* and run it */
    gaSSDSLoad("UA-5555555-1");
});

如果这还不够好，请稍后再运行它（例如...）：

$(window).load(function() {
    setTimeout("run_it()", 1000);
});

function run_it() {
    /* and run it */
    gaSSDSLoad("UA-5555555-1");
}

应该没必要……

【讨论】：

使用标准 JavaScript（无框架）的 "$(window).load(function() {" 的等价物是什么？
@mp_：查看我对 bobince 回答的评论。
我不熟悉那里讨论的方法，但是很久以前，在 jQuery 等之前，您只需将其放在您的 body 标签中：
顺便说一句，在 bobince 的回答下讨论的方法似乎更好，最好避免使用内联脚本。

【解决方案3】：

您可以在窗口、文档或正文的 onload 事件中添加一个侦听器，并在那时执行您的 gaSSDSLoad 函数。

【讨论】：

我该怎么做？会不会是这样的：window.onload = function () { gaSSDSLoad("UA-3631080-1"); }; ?
如果它就像我使用 window.onload 描述的那样 - 仍然会阻止 YSlow 看到的渲染

【解决方案4】：

您从 Google Analytics 获得的代码已经是非阻塞的。应该是这样的：

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-5555555-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

Google 建议将它包含在结束标记之前。一般来说，如果您想异步加载其他 javascript，我建议您使用一些加载器，例如：

LABjs
或ControlJS

【讨论】：