TL; DR

Question

我见过许多网站以字符串格式呈现json数据以及页面响应中的html：

以此为例：view-source：https://www.netflix.com/in/

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

我正在考虑在Angular上构建一个SPA网站，我的页面上没有服务器控件，所有数据都来自REST API。

我的页面渲染方法应该是什么：

加载页面（空白类型），然后通过Angular的ajax调用进行命中，并将数据填入页面。这最初可能会产生负荷效应。
最初通过服务器端代码在html表单页面中加载所有内容。这次没有关于页面加载的ajax请求。如果用户想要更多数据，我可以通过Angular进一步执行ajax请求。
加载JSON，页面数据（脚本标签中的stringify格式）+一些html。 Angular将使用JSON数据进行模板化，并仅在那里呈现html。这次也没有在页面加载时发出ajax请求，因为我以json格式和页面源一起呈现数据。这是我之前使用Netflix网址发布的情况。

基于可用性问题的最佳方法应该是什么。我知道Angular很棒，但是制作SPA的最佳方法是什么。

Answer 1

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

基于可用性问题的最佳方法应该是什么。我知道Angular很棒，但是制作SPA的最佳方法是什么。

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

您发送的数据越多（无论是格式化视图还是丰富视图的信息），应用程序准备得越快，您将不得不依赖于进一步的AJAX调用。
您发送的数据越多，加载应用程序所需的时间就越长。

所以没有一条规则适合所有人。根据经验，无论如何您需要的数据也可以从一开始就加载。 在哪里你加载它你如何取决于它的性质。

需要可能的数据 - 但是再次，不是 - 最好不加载，并且如果证明有必要，则推迟到进一步的AJAX调用。

另一个重要因素是您如何为数据提供服务以及向谁提供服务。例如，支持请求流水线操作的浏览器可以使多个AJAX调用足够可扩展以满足您的需要。如果您没有这个优势，您可能会发现自己进行流水线操作很有用，将多个AJAX调用复用到一个以减少延迟并经常提高压缩性能。另一方面，这会影响应用程序的灵活性，因为它增加了函数之间事实上的耦合。

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

加载页面（空白类型）然后通过Angular通过ajax调用进行点击并将数据填入页面。这最初可能会产生负载效应。

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

加载JSON，页面数据（脚本标签中的stringify格式）+一些html。 Angular将使用JSON数据进行模板化，并仅在那里呈现html。由于我以json格式和页面源一起呈现数据，因此在页面加载时也没有发出ajax请求。

我们需要在这三种策略之间分配内容。

HTML不是很重复，并且无论如何都会立即 - 为什么要通过AJAX加载它？最好从一开始就包含它。除了延迟之外，稍后加载它会得到什么？
HTML不是很重复，但不是立即需要，可以在后台加载为HTML。这可以加快初始页面加载速度，提高应用程序响应度。
非常重复的HTML（列表等）可以更有效地划分为HTML模板（一个列表条目）和渲染所需的数据，作为JSON发送。完全开发的单个HTML列表条目与其提炼的JSON数据之间的权重差异表明此选项的可取性。显然，如果JSON的大小与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; DR

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

Answer 2

我相信你在问以下三个选项中哪个更好：

客户端呈现
服务器端呈现
使用datablocks

选项3的一些问题是：

它正在污染全局窗口对象
很难维持

更好的方法是使用constant或服务将值存储在变量中。

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

如果数据可以在客户端没有问题，那么请考虑以下几点并选择您认为最合适的数据：

选项1（将数据保存在变量中） - 简单快捷，但需要触摸逻辑代码。
选项2（从服务调用中检索数据） - 数据分离和无需触摸逻辑，而是单独的服务电话

为环境变量等配置数据改进选项1的一些ways是：

让您的CI / CD注入正确的配置设置
使用gulp-ng-config

最后，答案取决于您的特定情况和要求。就个人而言，我只会在选项1和选项2之间进行选择，因为考虑选项3似乎是过早优化。更重要的是确保你的代码optimizing正确，即捆绑等等，

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

2 个答案:

TL; DR