基于 REST API 的 web 应用的动态部分答案

【问题标题】：Dynamic part of web app based on REST API基于 REST API 的 web 应用的动态部分
【发布时间】：2015-03-24 05:57:44
【问题描述】：

我们有发送 REST API 请求并在请求完成后更改 DOM 的 Web 应用程序。这一切都是在 jQuery 中通过 AJAX 调用完成的。但问题是，页面的所有动态部分在页面刷新时更新都会有轻微的延迟。就像您首先看到静态元素然后立即更新它一样。很明显。

我们等待$(document).ready，所以我认为这就是问题所在。有没有更好的方法在 HTML 被渲染之前更新它，这样用户就不会注意到变化？

更不用说，大部分数据都缓存在 sessionStorage 中，因此无需 REST 调用即可读取。

我搜索了一些，但我不太确定，我需要一个客户端模板引擎吗？喜欢Mustache.js？

【问题讨论】：

收到数据后如何呈现 html 不会改变异步 ajax 延迟问题。如果数据已经在存储中，那将会产生巨大的影响
@charlietfl，正如我所说，数据缓存在sessionStorage。所以对于初始加载，可以看到延迟，但即使我从sessionStorage 读取，我仍然看到问题。
请记住，您可以在document.ready 之前从存储中获取数据。在加载 DOM 之前您将无法渲染它，但如果数据很大，这可能会减少一些时间
如果您在更改以获取document.ready 之前的数据后仍有延迟，那么您的问题可能出在您的渲染代码中，因此请将其发布在 fiddle 的某个位置，以便我们查看跨度>
默认使用模态框并在渲染后将其隐藏。

标签： javascript jquery rest template-engine

【解决方案1】：

如果您担心的只是页面更新时的明显变化，您可以将所有内容放在您的 body 标签内的容器 div 中，并提供display:none;。在页面加载时显示加载图像，然后在 Ajax 请求完成时显示容器 div。

【讨论】：

【解决方案2】：

我认为不可能完全避免由 ajax 请求引起的延迟。您可能会从 $(document).ready 中提出一些请求并将其放在 head 部分中：

<head>
   <script type="text/javascript" src="jquery.js"></script>
   <script type="text/javascript">
       // some javascipt here, $.getJSON etc.
   </script>
</head>

在这种情况下，您必须注意选择尚未呈现的元素（这可能会导致一些令人不快的错误）。

最后我建议你使用一些加载 gif 和加载元素的动画来增加用户体验。以 AngularJS 及其动画功能为例：https://docs.angularjs.org/tutorial/step_12

【讨论】：