加速单页应用程序 (SPA) 中的渲染

Question

所以我正在开发一个应用程序，它在后端使用 Web 服务来发送 JSON 有效负载，然后通过专有的 Javascript MVC 框架在客户端上呈现。

在我们的特定应用程序中，我们有一个多页表单向导。所有页面都是可定制的，因此我们必须发送所有布局信息以及填充它的数据。模板存储在 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"
}

现在，当它返回时，渲染第一个页面（可能使用 web 工作，我将在稍后讨论），并启动对“next_page”的 AJAX 调用。对每一页重复此过程，直到没有提供“next_page”（即，它的最后一页）。

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

Web Workers（HTML5 功能）

Web Worker 允许使用 javascript 线程，这可以让您在后台进行渲染，而不会干扰 UI 循环。为了让你开始，你可以看看这个introduction。

请注意，我个人没有将 Web Worker 用于任何事情，但您应该能够将它们用于大型渲染任务。如果您选择这样做，请记住您必须为尚不支持它们的浏览器提供某种回退。