performance - FB + Twitter 分享按钮 + FB Like 按钮 === 巨大的性能问题

Question

我全新的工作充满了美妙和可怕的惊喜。这项工作最有趣的部分之一是增强、加速、使一切规模化的意愿。今天，第一个真正的问题。事情是这样的:我们得到最多 20 个列表元素，每个元素都显示自己的 Facebook 分享、Twitter 分享和 Facebook Like 按钮。可想而知，打开60个iframe对于用户体验来说简直就是一种痛苦。我的问题:任何人都已经遇到过此类问题，您会推荐什么来升级这些性能问题？

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

Answer 1

提高性能的最佳方法是不要从 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 个类似的按钮，那么将使用 id="fb-root"创建 20 个 Div，并调用 all.js 的脚本 20 次。最好的办法是移动

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

希望这对您有所帮助!