5

这项任务听起来微不足道，但请耐心等待。

这些是我正在使用的按钮：

  • 谷歌 (+1)
  • 脸书（喜欢）
  • 推特（推文）
  • 领英（分享）

通过在webpagetest.org 上进行一些测试，我发现如果您从这些服务中的每一个中获取代码段以将这些按钮放置在您的页面上，那么效率会非常低。除了图像本身之外，您还可以有效地下载多个 JavaScript 文件（在某些情况下，只需一个按钮即可下载多个 JavaScript 文件）。Facebook Like 按钮及其相关资源的总加载时间在 DSL 连接上可能长达 2.5 秒。

现在使用 ShareThis 之类的服务会更好一些，因为您可以从一个来源获得多个按钮。但是，他们对 Google +1 没有适当的支持。如果您从他们那里获得 Google +1 按钮的代码，它仍然会从 Google 中提取所有这些资源。

我有一个想法，它涉及在单击具有通用外观的“共享”按钮时加载所有按钮。这样就不会增加页面加载时间。我认为这可以使用此处描述的代码作为起点来完成。这可能是一个很好的解决方案，但我想在走这条路之前我会在这里问。

4

2 回答 2

6

如果您不关心这些按钮的动态方面，我找到了一种可能的解决方案。换句话说，如果您不想显示有多少人为您的页面 +1 或赞过，您可以使用这些链接...

https://plusone.google.com/_/+1/confirm?hl=en&url={URL}
http://www.facebook.com/share.php?u={URL}
http://twitter.com/home/?status={STATUS}
http://www.linkedin.com/shareArticle?mini=true&url={URL}&title={TITLE}&summary={SUMMARY}&source={SOURCE}

您只需要插入适当的参数。没有比这更简单或轻量级的了。当然，我仍然会为每个按钮使用图标，但在这种情况下，我实际上可以使用 CSS 精灵来节省更多。我实际上可能会走这条路。

更新

我实施了这一更改，页面加载时间在 1.5 Mbps DSL 上从 4.9 秒变为 3.9 秒。请求数量从 82 个增加到 63 个。

我还有一些前端优化要做，但这是朝着正确方向迈出的一大步。

于 2012-02-17T00:40:07.037 回答
2

我不会担心，原因如下：如果有问题的网站正确地管理了它们的资源 - 来吧，它是谷歌和 Facebook 等...... - 浏览器应该在第一次请求后缓存它们。您可能会在缓存很小或已禁用的服务中看到效果，但很可能所有客户端在到达您的页面之前就已经在其缓存中拥有这些资源。

而且，只是因为我很好奇，这是另一种方式：

这是来自 StackOverflow 的 facebook 分享 javascript 的相关代码片段：

facebook:function(c,k,j){k=a(k,"sfb=1");c.click(function(){e("http://www.facebook.com/sharer.php?u="+k+"&ref=fbshare&t="+j,"sharefacebook","toolbar=1,status=1,resizable=1,scrollbars=1,width=626,height=436")})}}}();

缩小，因为，嘿，我没有费心去修改代码。

看起来 StackOverflow 工程师只是在点击时调用页面。这意味着在您单击它之前它只是文本，它会动态地懒惰地拉入所有内容。

于 2012-02-16T23:10:18.720 回答