Javascript 制作单页应用程序的最佳方法

我看到许多站点在页面响应中以字符串格式呈现json数据和html：

举个例子：查看源：

在页面响应本身中以字符串格式呈现JSON有什么好处。 可以呈现页面，也可以在页面呈现后通过ajax加载数据

我正在考虑完全在Angular上构建一个SPA网站，在我的页面上没有服务器控件，所有数据都通过RESTAPI提供

我的页面呈现方法应该是什么：

将页面加载为空白，然后通过Angular通过ajax调用进行点击，并将数据填充到页面中。这可能会在最初产生负载效应

最初通过服务器端代码加载html表单页面中的所有内容。这次加载页面时没有ajax请求。如果用户需要更多的数据，我可以通过Angular进一步请求ajax

加载JSON，即脚本标记+一些html中的stringify格式的页面数据。JSON数据将被Angular用于模板化和仅呈现html。这次在页面加载时也没有发出ajax请求，因为我将数据与页面源一起呈现为json格式。这就是我之前用Netflix url发布的案例

---

基于可用性问题的最佳方法应该是什么。我知道Angular很好，但这里做水疗的最佳方法是什么。

我想你是在问以下三个选项中哪一个更好：

客户端渲染 服务器端渲染 客户端渲染 选项3的一些问题是：

它正在污染全局窗口对象 这将很难维持 更好的方法是使用或服务将值存储在变量中

选项1与选项2取决于数据。如果有复杂的逻辑来检索它，需要处理大量数据来获取它等等，那么就从服务中获取它

如果数据可以在没有问题的客户端中，那么考虑下面的点，并选择你认为最好的：

选项1将数据保存在变量中-简单快速，但需要 触摸逻辑代码。 选项2从服务调用检索数据-数据和 无需触摸逻辑，但需要单独的服务呼叫 对于配置数据（如环境变量），改进选项1的一些方法包括：

让您的CI/CD插入正确的配置设置 在服务器上使用以下内容动态生成角度配置 最后，答案取决于您的特定场景和需求。就个人而言，我会在选项1和选项2之间做出选择，因为考虑选项3似乎是过早的优化。更重要的是要确保你的代码是正确的，也就是说，捆绑它等等

在页面响应本身中以字符串格式呈现JSON有什么好处。可以呈现页面，也可以在页面呈现后通过ajax加载数据

基于可用性问题的最佳方法应该是什么。我知道角度很好，但是在这里做水疗最好的方法是什么

您需要平衡两个相反的要求：

您以格式化视图或信息的形式发送的数据越多，以丰富视图，应用程序准备的速度就越快，您对进一步AJAX调用的依赖也就越少。 发送的数据越多，加载应用程序所需的时间就越长。 因此，没有一条规则适用于所有人。根据经验，您无论如何都需要的数据也可以从一开始就加载。在何处加载以及如何加载取决于其性质

可能需要的数据（但再次强调，不是）最好不要加载，并推迟到进一步的AJAX调用（如果它们被证明是必要的）

另一个重要因素是您如何提供数据以及向谁提供数据。例如，支持请求管道的浏览器可以使多个AJAX调用具有足够的可伸缩性，以满足您的需要。如果您没有这个优势，您可能会发现自己进行管道化非常有用，可以将多个AJAX调用多路复用到一个调用中，以减少延迟，并经常提高压缩性能。另一方面，这会影响应用程序的灵活性，因为它增加了功能之间的实际耦合

考虑到这一点，让我们看看您的选择：

将页面加载为空白，然后通过Angular通过ajax调用进行点击，并将数据填充到页面中。这可能会在最初产生负载效应。 最初通过服务器端代码加载html表单页面中的所有内容。这次加载页面时没有ajax请求。如果用户需要更多的数据，我可以通过Angular进一步请求ajax。 加载JSON，即脚本标记+一些html中的stringify格式的页面数据。JSON数据将被Angular用于模板化和仅呈现html。这次在页面加载时也没有发出ajax请求，因为我将数据与页面源一起呈现为json格式。 我们需要将内容分发给 这三种策略

HTML，它不是非常重复，而且无论如何都会立即被需要-为什么要通过AJAX加载它？最好从一开始就包含它。除了延迟之外，以后加载它会得到什么？ HTML不是很重复，但不是立即需要的，可以作为HTML在后台加载。这加快了初始页面加载，提高了应用程序的响应速度。 非常重复的HTML列表等可以更有效地划分为一个HTML模板、一个列表条目和呈现所需的数据，以JSON的形式发送。完全开发的单个HTML列表项与其提取到的JSON数据之间的权重差异表明了该选项的可取性。显然，如果JSON的大小与HTML相同，甚至可能大于HTML，那么就没有必要将其作为JSON发送。除非这有助于减轻web服务器上的负载；对于繁忙的服务器，这可能是一个因素。此外，如果以后需要更新列表，则必须对数据进行模板化。以HTML和JSON格式发送它很容易出错。最好只有一个渲染机制。

也考虑信息的生命周期。应用程序的不同部分可能具有不同的保存期限：列表项的模板不太可能经常更改，而列表值可能会更改。通过将所有长期存在的资源捆绑在一起，您可以最大限度地利用浏览器、代理等所涉及的各种缓存机制

例如，如果您决定将一些资源（如图标等）捆绑为内联base64值，则必须记住这一点。虽然您确实减少了所需的HTTP调用数量，但这些调用所需的通信量可能会不成比例地增加

假设您有一个包含十个图标和一个CSS的页面：

unprimed web page, unbundled        12 HTTP calls for 80 Kb
  primed web page, unbundled         1 HTTP call for 4 Kb
unprimed web page, bundled           3 HTTP calls for 108 Kb
  primed web page, bundled           2 HTTP calls for 75 Kb

将资源捆绑在一起可以提高未受限制用户第一次启动应用程序时的响应能力。然后进行缓存，但每次需要发送的数据包仍然很大

对于第一次使用的用户来说，非绑定版本更糟糕，但是在随后的重新加载中，大多数信息已经存储在客户端，并生成缓存命中率，并且没有流量，从而产生比绑定版本更好的结果

这里的要点是，以不同的方式组织数据，或者使用不同的体系结构的应用程序，也可能会产生完全相反的结果，强烈地表明要捆绑所有或几乎所有内容

TL；博士

---

我想这一切归结起来就是，您需要有一个明确的模型，说明应用程序首先要做什么。在不同的策略需求之间划分数据蛋糕必须在以后进行。

我想知道为什么这些问题会得到这样的反对票。有人能建议一下我在这个话题上问了些什么吗？我想出了一些关于实现某些功能的想法，但我无法通过搜索谷歌获得精确的解决方案，这就是为什么我在这里发布文章，从这个美妙的社区获得精彩的想法。没有评论的向下投票是完全没有帮助的。你列出的三种方法都是可行的，你正在征求意见，哪一种是最好的。这样的问题不太适合你。这个问题很大程度上是基于观点的，并不严格适用于…@IvanRodriguezTorres让我们说，代码截图是永远不应该做的事情。