FB +推特分享按钮+ FB Like按钮===巨大的性能问题

Question

我的全新工作充满了奇妙和可怕的惊喜。这项工作最有趣的部分之一是增强、加速、使一切变得规模化的意愿。今天，第一个真正的问题。事情是这样的:我们得到多达20个列表元素，每个元素都显示了自己的Facebook分享、Twitter分享和Facebook点赞按钮。你可以想象，打开60个iframe对用户体验来说是一件痛苦的事情。我的问题:有人已经遇到过这样的问题，你有什么建议来扩展这些性能问题？

虽然我正在考虑AddThis实现，但我希望还有其他解决方案可以考虑。

Answer 1

提高性能的最好方法是不要从facebook插件中复制粘贴代码。

Facebook的“like Button”代码看起来像这样：

<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个like按钮，那么20个Div是用根“fb-id=”创建的，all.js的脚本被调用了20次。最好的方法是将

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=127702313984818&amp;xfbml=1"></script>

到页眉，当你想要一个like按钮时，只使用

<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插入并减慢页面速度。

希望这能有所帮助！