Question

这个问题长期以来一直困扰着我，因为我发现在任何地方都没有讨论它，我想我终于开始了。

如果您访问Facebook自己的网站（示例：here），并滚动到页面底部，您将看到＆＃34; Like + Share＆＃34;的按钮。

这些按钮也可以在您自己的网站上实现（Facebook Like Button Configurator），但有一个主要区别：

在Facebook自己的网站上，按钮瞬间加载，我的意思是甚至没有1秒的延迟。它们呈现为好像是常规文本。它很快。

但是，在将这些按钮嵌入您的网站时，这是一个完全不同的故事。这些Facebook＆＃39;喜欢＆＃39;元素总是最后加载，是最慢的。对于第一次访问者，Facebook元素可能需要20-30秒才能呈现。

代码在字母中实现：

<!DOCTYPE html>
<html>
<head>...</head>
<body>
<div data-href="https://www.facebook.com/MyFacebookPage/" 
data-layout="button_count" 
data-action="like" 
data-size="large" 
data-show-faces="true" 
data-share="false">
</div>

<script>
window.fbAsyncInit = function() {
    FB.init({
        appId      : '123456789',
        xfbml      : true,
        status     : true,
        cookie     : true,
        version    : 'v2.5'
    });
};

(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.src = "//connect.facebook.net/en_US/sdk.js";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</body>
</html>

我尝试在Facebook的<head>标记中添加dns-prefetch标题，希望加快速度，但它似乎没有产生太大影响。

<head>
<link rel="dns-prefetch" href="//www.facebook.com" />
<link rel="dns-prefetch" href="//staticxx.facebook.com" />
<link rel="dns-prefetch" href="//connect.facebook.net" />
</head>

我尝试了更深入的挖掘，我注意到在facebook.com的实现中使用的代码的一个区别是他们使用了代码<fb:like></fb:like>的fbml版本，而不是他们为我们最终用户提供的代码，用于在我们自己的网站上实现按钮。

我还注意到没有指向＆＃34; http://connect.facebook.net/en_US/sdk.js＆＃34;的链接，这是我们要使用的脚本。这似乎表明Facebook可能正在使用特定于他们的“按钮”按钮实现的脚本的自定义精简版本。仅？

这只是我的有限分析，因为我是一名业余网络开发人员，并且不是xbml的专家。希望有人可以对此有所了解。

有一件事是肯定的：Facebook自己实施了＆＃34; LIKE＆＃34;按钮与他们指示我们完成的按钮完全不同，速度差异是天文数字。

有人可以对此有所了解吗？理想情况下，任何人都可以建议如何实现＆＃34;像按钮＆＃34;代码更像Facebook自己的实现，这样我们也可以享受速度优势？

在Facebook自己的网站上，LIKE按钮是即时的，但在我的网站上，它们最多可能需要30秒才能呈现

0 个答案: