将社交媒体的外部 Javascript 加载到网页中的目的 [关闭]答案

【问题标题】：The purpose of loading External Javascript of social media into webpages [closed]将社交媒体的外部 Javascript 加载到网页中的目的 [关闭]
【发布时间】：2012-10-16 13:42:49
【问题描述】：

在网页中添加社交媒体资源时，传统方法会导致从其他域加载大量外部JS，仅加载带有品牌图像背景的iframe或锚点。以下可能是网络上传输最多的文件（在http://www.google-analytics.com/ga.js 36.35KB 之后，这对许多人来说是不可避免的）

http://connect.facebook.net/en_US/all.js 181.30KB (59.06KB gzipped)
https://platform.twitter.com/widgets.js 75.19KB (24.42KB gzipped)
https://apis.google.com/js/plusone.js 16.71KB
http://assets.pinterest.com/js/pinit.js (嗯，这很小，但仍然不需要连接)

例如，http://connect.facebook.net/en_US/all.js 只做一个事情：添加一个 iFrame <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Flavishdream&amp;width=292&amp;height=180&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:180px;" allowtransparency="true"></iframe>

Twitter 和 Google Plus 脚本执行的任务非常相似，只是添加了页面中的小 HTML 块。

为什么不只编写那些 iFrame、图像和锚点 HTML 呢？

【问题讨论】：

更适合webmasters.stackexchange.com？
我对您的问题有点困惑，如果您使用这些库中的任何一个来增强您的网站，您将需要加载它们。
@KevinDTimm 我认为这是开发人员应该回答的问题，也许在某些情况下存在 Javascript 依赖等...
@KevinDTimm 此外，我在网站管理员那里播种了类似的问题，这些问题已迁移到此处或服务器故障
@AntLaC 好的，谢谢，我将编辑问题添加更多细节。

标签： javascript html performance social-networking webpage

【解决方案1】：

您提到的大多数脚本也在后台跟踪用户行为。此外，在加载 JS 文件时，提供者（例如 Google）可能会更改此类脚本附带的功能。当您只是添加一个静态文件或自己编写所需的 HTML 时，这不会那么容易。

【讨论】：

1+ 用于根据布局的自定义行为。然而，这个页面facebook.com/plugins/… 正好适合静态编写的 iframe，不是吗？
@rahmanisback 是的。我想说的是，这么多 JS 的原因不是技术原因；但经济实惠。这一切都是关于用户跟踪和利用您的客户个人数据赚钱的。这就是 Facebook 或 Google 等公司获得资金的方式。我真的不想知道这些脚本还真的做了什么——那会导致隐私噩梦……

【解决方案2】：

它不会影响您网站的性能。每个js应该加载多个资源，这不应该影响它们嵌入的站点。

【讨论】：

先生，在35KB的小页面中添加70KB的外部JS是浪费带宽。是的，我担心浏览器和下载时间的性能。不是每个人都能获得高速连接吗？
可能很容易更新最新的 js，例如脚本即服务模型，并且使用此模型也可以轻松解决跨浏览器问题

【解决方案3】：

您所指的库不仅仅是添加简单的 iFrame。它们还引用框架内的对象。就性能而言，您将遇到的唯一问题是托管 js 文件的网站是否出现故障。

【讨论】：

我刚刚看到你关于带宽的评论，不幸的是，如果你想使用这些服务，你将不得不考虑 js 库。您也可以将文件的副本下载到本地服务器并自己托管，但要小心，如果他们做出任何更改，您将不得不重新下载它们，但这确实不会有太大改善。
我说，iframe 可以调用任何他们需要的 JS。没有什么不对的。我说的是为什么我们需要 JS 来创建那些元素？
很抱歉您遇到了这个问题，我刚刚打开了 FB js 文件，它所做的不仅仅是创建一个 iframe。此外，js 文件需要在本地客户端上才能附加到 iframe 的内容。另一件事，无论 iframe 确实会影响您的带宽。
您仍然没有得到问题，先生。你会打开这个页面吗？它在任何浏览器中看起来和行为都很好吗？我可以将其定位为 iFrame。那是我的问题。 facebook.com/plugins/…
即使您将其放入 iframe 中，您仍在加载 6 个其他 js 文件，并且您仍将使用该带宽来加载它们。

【解决方案4】：

首先，任何 Javascript 都是客户端应用程序，因此您不必担心布局这些组件所需的性能。其次，这些文件非常小，因此流量可以忽略不计，即使 iFrame 是 HTML 格式，您也需要某种连接来获取它，对吗？因为显然你不能只在代码中静态地放置喜欢按钮（出于可维护性的原因）

【讨论】：

在一个35KB的小页面中添加70KB的外部JS是浪费带宽。是的，我担心浏览器和下载时间的性能。不是每个人都能获得高速连接。