渲染 HTML：服务器端与客户端答案

【问题标题】：Rendering HTML : Serverside Vs Clientside渲染 HTML：服务器端与客户端
【发布时间】：2012-09-11 14:18:03
【问题描述】：

我有一个包含订单项等详细信息的复杂发票页面。我将一直使用这些表格。加载页面时，我正在使用 javacode（for 循环等）并以这种方式编写 html。我可以做的另一件事是返回一个 json 对象并使用 javascript 来构建该表单。什么是更好的做法？

仅供参考，我只使用 Java 、 jsps 、 JQuery 、 json 。

【问题讨论】：

【解决方案1】：

这是两种完全不同的方法。

当您使用 java jsp 技术构建页面时，它是一种服务器技术。这意味着您可以控制服务器上将返回给客户端的数据。这个数据的表示是另一个问题。
JavaScript 是客户端技术，更灵活，样板更少，速度更快，但页面生成依赖于客户端 JavaScript 引擎。如果它被禁用，您可能会遇到一些问题。

如果您没有任何技术要求，我建议您选择 javascript，因为您有从服务器获取数据的情况。

如果向服务器发送数据最好使用服务器技术。

【讨论】：

【解决方案2】：

有很多“选项”可以做到这一点。对于网络表单，我更喜欢带有 json 对象的 javascript 路由。 Node.js 非常灵活，很容易实现。

【讨论】：

【解决方案3】：

我建议使用 json、jquery 插件...更易于管理和更简洁的代码

【讨论】：

我也是，以及服务器端的 REST 服务（Jersey）。 Jersey 可以用 JSON 表示您的数据。您还可以使用 JQuery 来管理对其余服务的 ajax 调用。

【解决方案4】：

客户端渲染通常被认为较慢（就页面加载时间而言），正如最近在Twitter switched back to server-side rendering from client-side 发现的那样，发现他们的页面加载时间只有 1/5。

当您在具有 16GB RAM 的核心 i7 计算机上运行网站时，这不会有太大的不同；当您在移动设备或旧计算机上运行大量客户端站点时，这很重要。更多的 javascript = 更高的 RAM 使用率和更多的浏览器要做的工作（下载、解析、运行）。

不要误会我的意思，我是客户端渲染的忠实粉丝，因为它让我可以使用很棒的 AngularJS。对我来说，在两者之间找到一个很好的平衡：我想要一个具有丰富 UI 体验的快速加载页面。

例如，如果我正在创建一个新的列表页面；我可以从服务器获得前 10 个左右的结果，与页面一起加载。然后我会有类似底部的“加载更多新闻文章”按钮或通过一些javascript调用（例如jQuery $.ajax（），AngularJS $http等）异步加载下一个10个新闻项目的页面到JSON服务。

相对于：

仅限客户端：在加载页面时通过 javascript 和 JSON 加载最初的 10 个新闻项目。单击“加载更多新闻文章”按钮，使用相同的服务然后根据请求加载其他新闻项目。
仅限服务器端：从服务器加载带有页面的初始 10 个新闻项目。单击“加载更多新闻文章”按钮会触发页面刷新，并从服务器返回接下来的 10 篇新闻文章。

【讨论】：