阻止 Analytics 代码阻止其他脚本执行答案

【问题标题】：Stop Analytics Code from Blocking other Script Execution阻止 Analytics 代码阻止其他脚本执行
【发布时间】：2015-11-01 17:03:16
【问题描述】：

我正在使用推荐的跟踪代码实现。

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

我的网页加载时经常等待“等待 www.google-analytics.com”。最初我以为这是我的办公室防火墙，但我想这是常见问题。 search

我更担心的是我页面上的所有脚本都在等待期间停止执行......这永远不会消失。如何解决这个问题？

我认为 async 意味着它不会干扰页面上的其他脚本。

【问题讨论】：

ga.js的源码注入应该在所有资源加载完毕后进行，在

标签： javascript asynchronous google-analytics

【解决方案1】：

解决方案

由于您使用的是 Jquery，因此将 google 分析代码包装在 jQuery 的窗口加载处理程序中：

$(window).load(function(){
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-XXXXX-X']);
    _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);
    })();
});

解释

在评论中，您指出您使用http://supersimpleslider.com/，只要谷歌分析挂起，它就无法工作。查看该库的源代码，第 86 行显示了这一点：

$(window).load(function() {

我决定通过模拟悬挂资源来测试事件触发。

ga.php

<?php
sleep(5);
exit('content.log("ga.php available")');
?>

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    </head>
    <body>


        <script src="jquery-1.11.3.min.js"></script>


        <script type="text/javascript">
            window.addEventListener('load', function(){
                console.log('window-load');
            }, false);
            window.addEventListener('DOMContentLoaded', function(){
                console.log('window-DOMContentLoaded');
            }, false);
        </script>


        <script type="text/javascript">
            $(window).load(function() {
                console.log('window-jquery-load');
            });
            $(window).ready(function() {
                console.log('window-jquery-ready');
            });
        </script>


        <script type="text/javascript">
            document.addEventListener('load', function(){
                console.log('document-load');
            }, false);
            document.addEventListener('DOMContentLoaded', function(){
                console.log('document-DOMContentLoaded');
            }, false);
        </script>


        <script type="text/javascript">
            $(document).load(function() {
                console.log('document-jquery-load');
            });
            $(document).ready(function() {
                console.log('document-jquery-ready');
            });
        </script>



        <script type="text/javascript">
          (function() {
            var ga   = document.createElement('script');
            ga.type  = 'text/javascript';
            ga.async = true;
            ga.src   = 'ga.php';

            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(ga, s);
          })();
        </script>
    </body>
</html>

控制台输出

16:21:19.123   window-jquery-ready
16:21:19.124   document-jquery-ready
16:21:19.125   document-DOMContentLoaded
16:21:19.126   window-DOMContentLoaded
16:21:24.092   ga.php available
16:21:24.095   window-load
16:21:24.096   window-jquery-load

结论

原生DOMContentLoaded 不受挂起资源的影响。
jQuery 的ready 不受挂起资源的影响。
window load 将等待所有资源完成。
document load 永远不会触发（但可能取决于浏览器）

由于 supersimpleslider 正在等待 window 上的 load 事件，因此挂起的 ga.js 将影响其执行。其他脚本也可能是这种情况。

通过仅在窗口加载时插入谷歌分析，我们将所有脚本置于同一级别。

窗口加载包装后的控制台输出：

16:47:27.035   window-jquery-ready
16:47:27.036   document-jquery-ready
16:47:27.036   document-DOMContentLoaded
16:47:27.037   window-DOMContentLoaded
16:47:27.043   window-load
16:47:27.044   window-jquery-load
16:47:32.052   ga.php available

【讨论】：

有道理....我的印象是 window.load 只检查 HTML 响应是否完整。不知道async ga.js 也会影响...将尝试解决方案，然后回复您...谢谢:)
是的...像魔术一样工作...甚至“等待 www.google-analytics.com”都消失了。
另一方面，它不会阻止谷歌分析在用户没有完全加载网站的情况下注册用户入口...？
如果 GA 从未加载，这是可以预料的。如果分析是优先事项，我们将什么也不做，等待 GA 最终加载或超时。尽管超时会在延迟其他一切的同时产生相同的后果。

【解决方案2】：

我知道有两种运行非阻塞 js 的方法： 1-将您的脚本标签放在正文的结束标签之前 2-在脚本中添加'async'属性，最终结果将如下所示，注意这是用于远程文件包含：

<script src="script.js" async></script>

这是您在ga.aync=true 中找到的异步，它可以防止页面渲染在文件加载之前被阻塞，但它对代码运行后发生的情况没有影响，因此，换句话说，创建的脚本标签（通过运行该代码'允许浏览器在下载文件时完成其工作。

您提供的代码只是在页面中的第一个脚本标签之前创建了一个脚本标签以包含 ga.js（通常会在头部）。

因此，剩下的唯一选择是在正文的结束标记之前运行脚本，以便在解析页面后运行。

另一方面，我对您的建议是了解浏览器的“关键渲染路径”，它解释了为什么有些东西会被阻止以及在您的页面上使用外部文件的最佳实践。

希望对你有帮助

【讨论】：