logo标签列表

FB + Twitter分享按钮 + FB点赞按钮 === 巨大的性能问题

performancefacebooktwittershare
4
我的全新工作充满了惊喜和挑战，其中最有趣的部分之一就是希望提高、加速和扩展所有内容。 今天，遇到了第一个真正的问题。 事情是这样的：我们有多达20个列表元素，每个元素都显示自己的Facebook分享、Twitter分享和Facebook点赞按钮。 可以想象，60个打开的iframe会对用户体验造成很大的痛苦。 我的问题是：是否已经有人面临过这样的问题，并且你会推荐什么方法来提升这些性能问题？ 虽然我正在考虑AddThis实现，但我希望还有其他解决方案可以考虑。
我注意到即使页面上只有几个分享链接，也会出现性能问题（浏览器窗口在加载共享链接时瞬间挂起），所以需要加一。 - Simon East
1个回答
2

提高性能的最佳方法不是从Facebook插件复制粘贴代码。

Facebook“赞”按钮的代码如下：

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=127702313984818&amp;xfbml=1"></script>
<fb:like href="example.com" send="true" width="450" show_faces="true" font=""></fb:like>

问题在于，如果你有20个点赞按钮，那么就会创建20个id为"fb-root"的Div，并且会调用20次all.js的脚本。最佳方法是将

移到代码末尾，仅在页面上添加一次该脚本。
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=127702313984818&amp;xfbml=1"></script>

要在页面头部添加点赞按钮，以及在需要的地方添加点赞按钮，请仅使用以下代码：

<fb:like href="example.com" send="true" width="450" show_faces="true" font=""></fb:like>

同样适用于Facebook评论和其他插件。
此外，对于某些插件，Facebook提供使用xfmbl或iframe代码的选项。始终选择iframe代码，因为Facebook的js必须解析所有xfbml代码并转换为iframe。这会导致大量DOM插入并减慢页面速度。
希望这可以帮到你！
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接