阻止分析代码阻止其他脚本执行

Question

我正在使用推荐的跟踪代码实施方式。

<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

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

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

Answer 1

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

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

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

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

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

另一方面，我对您的建议是了解浏览器的一个叫做 'critical rendering path' 的东西，它解释了为什么有些东西会被阻止，以及在您的页面上使用外部文件的最佳实践。

希望对您有所帮助

Answer 2

解决方案

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

$(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/，只要 google 分析挂起，它就不会工作。查看该库的源代码可在第 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 将影响其执行。其他脚本也可能是这种情况。

通过仅在 window 负载时插入 google 分析，我们将所有脚本放在同一级别。

window 负载包装后的控制台输出：

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

阻止分析代码阻止其他脚本执行

Stop Analytics Code from Blocking other Script Execution

javascript

asynchronous

google-analytics

解决方案

解释

结论