静态社交（分享按钮）链接的优缺点？答案

【问题标题】：Pros and cons of static social (share button) links?静态社交（分享按钮）链接的优缺点？
【发布时间】：2014-02-09 03:37:44
【问题描述】：

在玩过社交媒体按钮后，我意识到按照标准 javascript 方法加载它们需要一些时间。例如，对于 facebook，它类似于：

<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
...
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=180631328718700";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

当存在多个按钮（fb、g+、twitter、pinterest....）时，加载时间甚至会增加。这可以通过使用静态链接来避免：

http://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&width&layout=standard&action=like&show_faces=true&share=true&height=80

在 facebook 案例中，文档中包含，但例如 pinterest 在其文档中仅提及 javascript 方法。然而，对于 pinterest 案例，很容易找出链接的外观。

我可以看到 javascript 的一些优点：可以免费查看点击次数、漂亮的弹出窗口。这是以更长的加载时间为代价（在移动设备上可能更长）。 javascript 的另一个缺点是它可能很难处理动态网站。

静态链接的优势绝对是加载速度和动态页面的简单开发，无需点击次数和漂亮的弹出窗口。社交 javascript 也没有进行 DOM 更改（通常会进行大量的 dom 更改）

还有别的吗？链接的向后兼容性如何 - 链接模板将来会改变吗？

【问题讨论】：

标签： javascript html facebook twitter pinterest

【解决方案1】：

我喜欢您旨在减少这些小部件的开销的方式。我在同一条船上。

如果没有记录社交按钮，您可以查看 JavaScript 转换的结果，并使用静态链接等效。当然，问题是他们会在某个时候更改他们的模板，而不知道您仍在引用旧方法。这绝对是一个缺点。

除了更少的 DOM 操作之外，另一个好处是更少的连接。一些 JavaScript 会注入 iFrame，这会显着延迟页面加载。

你可以做一个惰性加载器，并且仍然有 JavaScript 交互。只是不要使用方便但低效的可复制粘贴代码。

【讨论】：