为什么Facebook，Twitter和GMail将所有数据作为JSON而不是HTML呈现给浏览器？

Question

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

1. 为什么这3个大型网站需要时间来做这件事？
2. 使用HTML会不会更快？
3. 是否可以节省带宽，因为JSON有效负载比HTML要小？
4. 是因为这些网站主要基于AJAX吗？我的猜测是前者，但我不知道。我不确定你是否必须为谷歌推特或Facebook工作才知道这是为什么，但这三种网站之间共享这种策略，所以我认为他们有一个共同的目标。这让我觉得这更像是一件大事。

Answer 1

他们的设计有几个常见原因：

1. 正如之前提到的答案，可以在浏览器中使用缓存，并且JSON有效负载更轻便
2. 他们提供服务，UI逻辑和遵循MVC模式的数据之间的清晰分离
   • JSON作为模型
   • JavaScript UI小部件作为呈现数据的视图
   • 服务层作为Controller，提供提供给UI层的业务逻辑/服务

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

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

   正如您所看到的，此模型为Google / Twitter提供了一种在不必重写逻辑的情况下传递到多个频道的方法。这同样适用于Mobile WebView与普通Desktop WebView。我们需要更改的是UI层，而不是数据或控制器层。

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

Answer 2

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

Answer 3

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

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

Answer 4

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

我刚刚看了一下Twitter的源代码，看起来他们想要将所有UI逻辑保留在JavaScript中。这是合理的，因为Twitter页面将继续获取新的推文，所以他们不得不用JavaScript编写UI相关的代码。因此，不是在后端重复相同的代码，而只是播放初始数据，以便在使用JavaScript加载页面时呈现推文。

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

Answer 5

基本上，这是将演示文稿和数据分离到另一个级别。服务器端有一层只提供数据。通常，JSON是提供该数据的好方法。现在你如何呈现它可以单独处理。

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