加快單頁應用程序中的呈現（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。

請注意，我沒有親自使用網絡工作者的任何事情，但你應該能夠使用他們的大型渲染任務。如果您選擇，請記住，您必須爲尚不支持它們的瀏覽器提供某種回退。