解决方法
https://developers.facebook.com/blog/post/2011/08/02/how-to–optimize-social-plugin-performance/
此帖子链接可能会在将来更新.所以我从FB开发者博客中复制粘贴整个帖子,给作者完全信用.
方法：优化社交插件性能
作者：Ankur Pansari – 2011年8月3日上午12:00
数百万个网站使用XFBML来呈现社交插件.我们想分享一些可以提高网站性能的最佳做法.具体来说,我们提供自定义的channelUrl和异步加载,在使用时,它将提高加载时间,并减少其他问题,如重新计算来自Facebook的引用流量.
自定义渠道网址是名为channelUrl的FB.init函数中的可选参数.初始化JavaScript库时,请在FB.init函数中添加channelUrl参数：
<div id="fb-root"></div>
<script src="//connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'YOUR APP ID',status: true,// check login status
cookie: true,// enable cookies to allow server to access session,xfbml: true,// enable XFBML and social plugins
oauth: true,// enable OAuth 2.0
channelUrl: 'http://www.yourdomain.com/channel.html' //custom channel
});
</script>
channelUrl指向您添加到本地目录的文件,有助于提高某些旧版浏览器的通信速度.没有channelUrl,我们被迫使用解决方法,例如在隐藏的iframe中加载网页的第二个副本,以正确加载社交插件.解决方法增加了加载时间,并增加了来自Facebook的引荐流量.
要创建一个channel.html文件,请将以下行添加到文件(位于http://www.yourdomain.com/channel.html)：
<script src="//connect.facebook.net/en_US/all.js"></script>
如果您有能力运行PHP,我们强烈建议为channelUrl文件设置长缓存,以确保最佳性能.这是一个完成这个的PHP脚本示例：
<?PHP $cache_expire = 60*60*24*365; header("Pragma: public"); header("Cache-Control: maxage=".$cache_expire); header('Expires: '.gmdate('D,d M Y H:i:s',time()+$cache_expire).' GMT'); ?> <script src="//connect.facebook.net/en_US/all.js"></script>
在这种情况下,您也应该将channelUrl文件设置为完全限定的URL,如http://www.yourdomain.com/channel.php.
在我们的测试中,添加一个自定义的channelUrl可以提高Internet Explorer的性能,因此我们建议所有的开发人员包含它.当包含参数时,Internet Explorer会产生统计显着的性能提升,其中具有5个XFBML插件的测试网站的加载时间从1.10秒提高到0.43秒.
异步加载是另一种简单的策略,允许您的页面加载快速,而不会阻止页面的其他元素的加载.成功加载JS SDK后,我们调用window.fbAsyncInit函数.依赖于Facebook API调用的所有前端功能都应该分开,并通过window.fbAsyncInit调用.这样可确保Facebook功能以非阻塞的方式加载,并加快其渲染速度,具有积极的SEO优势.在设计社交功能时,您应该以这种心态来开始.
例如：
<html xmlns:fb="https://www.facebook.com/2008/fbml">
<body>
<div id="fb-root"></div>
<script>
/* All Facebook functions should be included
in this function,or at least initiated from here */
window.fbAsyncInit = function() {
FB.init({appId: 'your app id',cookie: true,xfbml: true});
FB.api('/me',function(response) {
console.log(response.name);
});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
</body>
<html>
我们更新了我们的文档,以反映这些选项的重要性,并将默认示例代码更改为包含一个channelUrl.我们正在继续更新我们的文档,作为“操作开发者爱”的一部分,并通过“How-To”博客文章分享更多最佳实践.
