6

Google pagespeed 抱怨我的 facebook 喜欢按钮脚本。如何推迟脚本？

在初始页面加载期间解析 45KiB 的 JavaScript。延迟解析 JavaScript 以减少页面呈现的阻塞。 http://static.ak.facebook.com/.../xd_arbiter.php ?...（21KiB 的内联 JavaScript）https://s-static.ak.facebook.com/.../xd_arbiter.php ?...（21KiB 内联 JavaScript）http://www.facebook.com/.../like.php ?...（3KiB 内联 JavaScript）

这是我正在使用的代码，我将其加载到页面页脚的 .js 文件中。

(function(d,s,id){
        var js,fjs = d.getElementsByTagName(s)[0];
        if(d.getElementById(id)){return;}
        js=d.createElement(s);
        js.id=id;
        js.async=true;
        js.defer=true;//THIS DOES NOT APPEAR TO SATISFY PAGESPEED
        js.src="//connect.facebook.net/en_US/all.js#xfbml=1";
        fjs.parentNode.insertBefore(js,fjs);
    }
    (document, "script", "facebook-jssdk")
);

产生以下脚本标签（通过 Chrome 的检查器）：

    <script 
    id="facebook-jssdk" 
    async="" 
    defer="" 
    src="//connect.facebook.net/en_US/all.js#xfbml=1"></script>
4

3 回答 3

9

使用 setTimeout 卢克！

setTimeout( function () {
   (function(d,s,id){
         // load js
         ...
      }
      (document, "script", "facebook-jssdk")
   );
}, 3000);

您可以将负载放入另一个“线程”以异步或延迟它

于 2013-03-13T05:55:17.337 回答
4

setTimeout 有效，但它不是真正的延迟，因为如果页面在设置的时间（在本例中为 3 秒）之后完成加载，则将在页面完成加载之前加载喜欢按钮。

我将like按钮的javscript代码放在我自己的函数中，并将其嵌套在

<script>
    function FbButtonLoad(){
      (function(d,s,id){
         // load js
         ...
      }
      (document, "script", "facebook-jssdk")
   );
}
</script>

然后我将它设置在 body 标记中以在页面加载时运行：

<body onload="FbButtonLoad();">

该按钮出现在我离开它的容器的页面上：

<div id="fb-root"></div>
<div class="fb-like" data-send="true" data-width="350" data-show-faces="true"></div>
于 2014-10-17T13:31:41.890 回答
0

另一个不太完美的解决方案（仅限 HTML5）是在 DOMContentLoaded 上加载库。

document.addEventListener('DOMContentLoaded', function() {
    (function(d,s,id){
        var js,fjs = d.getElementsByTagName(s)[0];
        if(d.getElementById(id)){return;}
        js=d.createElement(s);
        js.id=id;
        js.src="//connect.facebook.net/en_US/all.js#xfbml=1";
        fjs.parentNode.insertBefore(js,fjs);
    }
    (document, "script", "facebook-jssdk")
);
于 2017-03-04T16:05:30.793 回答