Question

在玩社交媒体按钮之后，我意识到在遵循标准的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的另一个缺点是处理动态网站可能非常困难。

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

还有别的吗？链接的向后兼容性如何？未来链接模板是否会发生变化？

Answer 1

我喜欢你的目标是减少这些小部件的开销。我在同一条船上。

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

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

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

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

1 个答案: