Question

我的谷歌分析应该异步加载。我不确定这意味着什么：

<script type="text/javascript">
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'xxx']);
        _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>

我不需要立即使用jQuery。有没有办法可以让这个异步？

Answer 1

Google Analytics正在您的示例中异步加载。处理它的部分是ga.async = true;。异步意味着浏览器将继续加载其余内容，即使这个内容需要更长时间才能加载。在较旧的浏览器中，内容将按文档的顺序加载，如果加载速度慢，浏览器显示页面的时间会更长。

如果您希望异步加载jQuery，只需将async="async"添加到<script>标记即可。请记住，只有较新的浏览器支持此功能。

或者，Google确实提供了Google Loader，它允许您异步加载jQuery和许多其他库。您可以查看this Stack Overflow question作为示例。

Answer 2

HeadJS为这类事情提供了一个很好的API。

JavaScript loader并行加载脚本但按顺序执行

Head JS加载JavaScript文件   图像没有阻止页面。您的   即使只有一个页面，页面也会更快   合并文件。

head.js("/path/to/jquery.js", "/google/analytics.js", "/js/site.js",
function() {
    // all done
});

Answer 3

在页面的Onload ()事件上，您可以插入一个函数，该函数将在页面加载后自动为您要以异步方式加载的JavaScript文件分配引用。

function afterLoad(){
  var element1 = document.createElement(“script”);
  element1.src = “somefile.js”;
  element1.type=”text/javascript”;
  element1.async=true;
  document.getElementsByTagName(“head”)[0].appendChild(element1);
}

有关详细信息，请查看http://www.tutkiun.com/2010/07/load-javascript-after-pageload.html

Answer 4

我使用此函数异步加载JavaScript文件：

function loadJS(url) {
    var js = document.createElement('script');
    js.src = url;
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(js);
}

然后就这样称呼它：

<script type="text/javascript">
    loadJS("http://pathToJSFile");
</script>

异步加载jQuery

4 个答案:

JavaScript loader并行加载脚本但按顺序执行