Analytics.js 阻止其他脚本答案

【问题标题】：Analytics.js blocking other scriptsAnalytics.js 阻止其他脚本
【发布时间】：2015-11-20 16:22:20
【问题描述】：

我在我的网页上使用 jquery malihu 自定义滚动条。然后我嵌入了谷歌分析代码。有时（可能 10 次中有 4 次）Analytics.js 需要 40 秒才能加载。滚动条脚本是必不可少的，没有它网站看起来很难看，但是这个滚动条脚本是在加载页面后执行的。但是页面没有加载 40 多秒（因为 analytics.js），所以它看起来像垃圾一样 40 秒。 analytics.js 不是异步加载的吗？那么为什么它会阻止页面正确加载呢？

看起来是这样的：

<!DOCTYPE html>
<html lang="de">
  <head>
     <!-- Some meta tags, links, scripts -->    
     <link rel="stylesheet" href="css/jquery.mCustomScrollbar.css">
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
     <script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
  </head>
  <body onload="onLoad();" >
     <!-- Some code -->    
   <script>
    (function($){
        $(window).load(function(){

            $("body").mCustomScrollbar({
                theme:"minimal-dark"
            });

        });
    })(jQuery);
    </script>

    <script>
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

        ga('create', 'UA-X4XXX297-X', 'auto');
        ga('send', 'pageview');

    </script>
  </body>
</html>

【问题讨论】：

标签： javascript jquery html asynchronous google-analytics

【解决方案1】：

根据此链接Analytics for Web (analytics.js)，Google Analytics 不会阻止其他脚本加载。

尝试更改您的脚本以在准备好的文档上运行：

(function($) {
    $(window).ready(function() {

        $("body").mCustomScrollbar({
            theme: "minimal-dark"
        });

    });
})(jQuery);

【讨论】：

遗憾的是它仍然阻塞...但是有了这个explanation 我可以解决它...我在滚动条脚本下方添加了一个不同的分析（在链接中找到）

【解决方案2】：

异步脚本，包括 google analytics.js 脚本，不会阻止其他脚本的加载或渲染。

mCustomScrollbar 延迟执行的原因是它是在 onload 事件中执行的。仅当下载所有资产时才会触发 Onload。这包括所有脚本、图像、css 等。

所以你有两个选择。要么不等待 onloadevent，而是使用 DOMContentLoaded。由于您已经在使用 jquery，您可以使用 $(window).ready。我不知道 jquery malihu 自定义滚动条，所以你需要确保它不依赖于页面被完全加载。

或者您需要调查是什么阻碍了 onload 事件。因此，请在浏览器的 developertools 网络选项卡中打开网页或在 webpagetest 中打开您的网站，然后尝试找出导致 onload 事件变慢的原因。

【讨论】：