为什么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 Widget as View,用于呈现数据
   • 服务层作为Controller,提供提供给UI层的业务逻辑/服务

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

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

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

这就是他们花时间考虑设计和架构的原因.数据和表示之间的紧密耦合将要求他们重新编写大量代码,以便在多个渠道中交付.这不是JSON与HTML或只是网页,但更大的架构决定,允许他们自己的内容传送到多通道(的iOS,安卓,第三方应用,移动web视图,桌面浏览,桌面应用程序等).您在HTML源代码中看到的是他们在WebView频道中的策略的表现.