为啥 Facebook、Twitter 和 GMail 将其所有数据以 JSON 而不是 HTML 的形式呈现给浏览器？

Posted 2023-03-05

【中文标题】为啥 Facebook、Twitter 和 GMail 将其所有数据以 JSON 而不是 HTML 的形式呈现给浏览器？

【英文标题】：Why do Facebook, Twitter and GMail render all their data to the browser as JSON as opposed to HTML?为什么 Facebook、Twitter 和 GMail 将其所有数据以 JSON 而不是 HTML 的形式呈现给浏览器？

【发布时间】：2011-11-12 14:33:39

【问题描述】：

如果您登录 Facebook、Twitter 或 Gmail 并查看源代码，您会发现一些非常奇怪的东西。您的所有推文和邮件都呈现为 JSON。没有尖括号。我的猜测是，这些数据都是动态呈现给 DOM 的。如果您检查页面上的任何元素，您会看到大量的 div 和其他 html 元素。这些都没有在原始标记中提供。问题是：

为什么这 3 个大型网站要花时间来做这件事？ 仅使用 HTML 不是更快吗？ 由于 JSON 有效负载比 HTML 更小，是否可以节省带宽？ 是因为这些网站严重基于 AJAX 吗？我的猜测是前者，但我不知道。我不确定你是否必须为 Google Twitter 或 Facebook 工作才能知道为什么会这样，但这个策略在 3 个站点之间共享，所以我认为它们有一个共同的目标。这让我觉得这更笼统。

【问题讨论】：

我刚刚在 Facebook 上发现了同样的事情。所以我将它添加到列表中。谢谢大家！！

我最近发现这是单页应用程序的概念。这些应用程序通常不会刷新页面，会触发大量事件（新电子邮件、新推文、新消息等），并通过轮询或持久连接与服务器进行大量交互。 Backbone.js 是完成此类任务的一个很好的框架，因此最近受到了很多关注。

【参考方案1】：

他们的设计被普遍应用有几个原因：

正如前面的答案所提到的，可以在浏览器中使用缓存，并且 JSON 负载更轻 它们按照 MVC 模式在服务、UI 逻辑和数据之间提供了清晰的分离 JSON 作为模型 javascript UI 小部件作为呈现数据的视图 作为控制器的服务层提供业务逻辑/服务并馈送到 UI 层

上面第 2 点中提到的 API 驱动架构和分离允许公司提供多渠道交付，而无需太多返工。考虑我们是否要为 android 构建 Twitter 应用程序：

作为模型的 JSON 保持不变，因为数据是相同的，所以这里不需要返工 我们现在将 View 从 HTML 更改为 Android Native UI，在这种情况下，我们需要编写 UI 层代码 作为控制器的服务层保持不变，我们不必在这里做任何事情

如您所见，此模型为 Google/Twitter 提供了一种无需重写其逻辑即可向多渠道投放的方式。这同样适用于移动 WebView 与普通桌面 WebView。我们需要更改的只是 UI 层，而不是数据或控制器层。

这就是他们花时间考虑设计和架构的原因。数据和表示之间的紧密耦合将要求他们重新编写大量代码，以便在多个渠道中交付。这不是关于 JSON 与 HTML 或只是网络，而是更多的架构决策，允许他们将内容交付到多渠道（ios、Android、第三方应用程序、移动 WebView、桌面视图、桌面应用程序等）。你在他们的 HTML 源代码中看到的是他们在 WebView 频道中策略的体现。

【参考方案2】：

基本上，这是将表示和数据分离到另一个层次。服务器端有一层只提供数据。一般来说，JSON 是提供该数据的好方法。现在你如何呈现它可以分开处理。

此 JSON 可以通过 Web 服务传递给任何感兴趣的客户端（Web/桌面/移动/其他 API）。然后客户可以决定如何呈现它。在 Web 上，我们使用大量 javascript 来读取和解析这个 JSON 并操作屏幕/DOM。

【参考方案3】：

我的猜测：避免重复 UI 相关代码。

我刚刚查看了 Twitter 的源代码，似乎他们希望将所有 UI 逻辑保留在 JavaScript 中。这是合理的，因为 Twitter 页面会不断获取新的推文，所以他们不得不用 JavaScript 编写 UI 相关的代码。因此，与其在后端重复相同的代码，它只是在使用 JavaScript 加载页面时播种初始数据以呈现推文。

缓存参数对我来说没有意义，因为初始页面请求不可缓存，因此在任何一种方法中它的工作方式都相同。

【参考方案4】：

此技术允许浏览器缓存 HTML（和静态 javascript）并仅获取 json 字符串。它确实非常快并且带宽友好。

【讨论】：

JSON 数据仍然是初始响应的一部分，这不会改善缓存。 （他们不提供静态文件。）

嗯...确实可以缓存页面的特定部分。我已经在“甜甜圈缓存”中看到了这种技术。 weblogs.asp.net/scottgu/archive/2006/11/28/….

【参考方案5】：

不，它不会更快。 JSON 比 HTML 更容易在服务器端生成。据我所知，Twitter 也使用Mustache 在客户端呈现这些数据。

因此，您只需提供静态模板（如果缓存正确，它们只需要加载一次）和 JSON 数据，然后让客户端完成所有渲染工作。一个优点是，客户端可以选择他们想要呈现数据的内容和方式，另一个优点是它可以从服务器承担所有繁重的 HTML 生成开销。