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>

我常常等待我的网页加载等待＃34; 等待www.google-analytics.com ＆＃34;。最初我认为这是我的办公室防火墙，但我想这是常见的问题。 search

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

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

Answer 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＆＃39; ready不会受到暂停资源的影响。
window load将等待所有资源完成。
document load永远不会触发（可能依赖于浏览器）

由于 supersimpleslider 正在等待load上的window事件，因此悬挂 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

Answer 2

我知道有两种运行非阻塞js的方法： 1-将脚本标记放在body的结束标记之前 2-添加＆＃39; async＆＃39;属性为脚本，最终结果如下，请注意这是针对远程文件包含的：

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

并且是你在ga.aync=true中找到的异步，它阻止了在加载文件之前阻止页面呈现，但它对代码运行后发生的事情没有影响，因此，在其他单词，创建的脚本标签（通过运行该代码＆＃39;允许浏览器即使在下载文件时也可以完成其工作。

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

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

另一方面，我给你的建议是学习一些叫做“关键渲染路径”的东西。在浏览器中，它解释了为什么有些东西阻塞以及在网页上使用外部文件的最佳做法。

我希望这有帮助

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

2 个答案:

解决方案

解释

结论