加快单页应用程序中的呈现（SPA）

Question

因此，我正在研究使用后端Web服务发送JSON有效内容的单个应用程序，然后通过专有的Javascript MVC框架在客户端上呈现JSON有效内容。

在我们特定的应用程序中，我们有一个多页面表单向导。所有的页面都是可定制的，所以我们必须发送所有的布局信息以及数据来填充它。模板存储在html中，然后在客户端，它们从DOM中删除并缓存以供重用。

这里和我通常看到的不同之处在于，整个表单的所有数据都是在单个Ajax调用中加载的，然后在应用程序响应之前呈现所有内容。这可能需要（取决于设置的大小）5,10,20秒。

一旦表单被加载，一切都闪电般快速，并出色地工作。你可以完成整个事情而无需等待一次。然后，当您完成并提交时，ajax呼叫也可能需要10-20秒才会返回并显示确认。这是因为我们并没有真正向服务器发送任何内容，所以我们最终将其全部保存。

因此，要回顾：

获得巨大的JSON有效载荷（等待）>渲染一切（等待）>用户完成表单（所有客户端）>用户提交完整的表单（等待）>确认页面

的大部分时间都是在第2步中渲染的。

我超速行驶的这件事的想法是几个：

1）分手Ajax调用。而不是获取整个表单，对每个页面都进行ajax调用，将它们全部发送出去，并开始使用回调方法呈现该页面。

2）目前所有东西都在客户端渲染，我正在考虑如何在等待数据的同时预先渲染服务器上的某些页面（在单独的线程中？）。

仅供参考，我们在ASP.NET环境中，后端的ASMX Web服务和客户端的内部框架，我们提供了jQuery。

Answer 1

我会建议做的是让每个'页面'分开。当你必须抓取整个页面时，我只会返回第一页，其中可能包含到下一页的链接。所以，你的JSON响应可能是这样的：

{ 
    "layout":{ 
     // layout information 
    }, 
    "data": { 
     // info to render 
    }, 
    "next_page" : "link/to/next/page" 
} 

现在，当这个被返回，使第一页（可能与网络的工作中，我将讨论这个版本），并启动一个AJAX调用“next_page ”。对每个页面重复这个过程，直到没有提供“next_page”（即它的最后一页）。

这将允许后续页面呈现，然后用户完成每个页面。

网络工作者（HTML5功能）

的Web Workers允许的JavaScript线程，它可以让你做在后台渲染，而不与UI环路干扰。为了让你开始，你可以看看这个introduction。

请注意，我没有亲自使用网络工作者的任何事情，但你应该能够使用他们的大型渲染任务。如果您选择，请记住，您必须为尚不支持它们的浏览器提供某种回退。