performance - 多个快速加载的社交按钮？

Question

我有这样的页面，里面有很多社交按钮。很多意味着超过 50 个按钮，因为该页面上的每个帖子都有自己的按钮。

所以也许我会让页面更小，帖子更少，但这不是主要原因，也不是我想要的。

我想知道如何使按钮更快..

1. 使用 XFBML？框架？HTML5？
2. 我怎样才能让所有这些都从一个脚本运行而不是重复？
3. 您是否建议仅在用户向下滚动时加载其余按钮？
4. 你推荐使用像 AddThis 或 Sharrre 这样的服务吗？
5. 如何让我的所有 JS 异步加载？
6. 其他提示？

谢谢！

Answer 1

1. 你真的无法控制任何外部插件的性能。
2. 您可以生成每个按钮 div 的数组，预先提交 href，然后将每个按钮写入所需位置的 DOM。
3. 我建议不要同时加载它们，你可以用 setTimeout 来抵消它们，“我建议每个 200 毫秒”。
4. 没有根据第 3 方的建议，喜欢按钮可以正常工作。
5. 异步，参考http://developers.facebook.com/docs/reference/javascript/
6. 没有其他建议。

异步示例。

---

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'YOUR_APP_ID', // App ID
      channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });

    // Additional initialization code here
  };

  // Load the SDK Asynchronously
  (function(d){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     ref.parentNode.insertBefore(js, ref);
   }(document));
</script>