Analytics.js正在阻止其他脚本

Analytics.js blocking other scripts

本文关键字：其他 脚本 js Analytics      更新时间：2023-09-26

我在网页上使用jquery malihu自定义滚动条。然后我嵌入了截取的谷歌分析代码。有时（可能10次中有4次）Analytics.js需要40秒才能加载。滚动条脚本是必不可少的，没有它网站看起来很难看，但这个滚动条脚本在加载页面后执行。但是页面还有40秒没有加载（因为analytic.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>

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

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

(function($) {
    $(window).ready(function() {
        $("body").mCustomScrollbar({
            theme: "minimal-dark"
        });
    });
})(jQuery);

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

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

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

或者，您需要调查是什么阻碍了onload事件。因此，在浏览器的developertools network选项卡中打开网页，或在webpagetest中打开网站，并尝试找出是什么减缓了加载事件的速度。

相关文章：