Question

我在我的网页上使用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>

Answer 1

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

尝试将脚本更改为在文档就绪时运行：

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

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

    });
})(jQuery);

Answer 2

异步脚本（包括google analytics.js脚本）不会阻止加载其他脚本或呈现。

导致mCustomScrollbar延迟执行的原因是它在onload事件中执行。仅在下载所有资产时触发Onload。这包括所有脚本，图像，CSS等。

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

或者您需要调查阻止onload事件的内容。因此，请打开浏览器的developerspertools网络选项卡中的网页，或在webpagetest中打开您的网站，然后尝试找出减慢onload事件的速度。

Analytics.js阻止其他脚本

2 个答案: