Knockout JS和大型模型

我想弄清楚使用KnockoutJS的最佳方式，我需要您的建議。Knockout JS和大型模型

我的視圖模型包含一組「文檔」，每個文檔都有一組「值」。每個「文件」呈現爲使用以下模板一個單獨的表：

<div data-bind="foreach: Documents"> 
     <table data-bind="foreach: Values"> 
      <tr data-bind="foreach: $data"> 
       <td data-bind="attr: {colspan: Colspan}"> 
        <label data-bind="text: Label"></label> 
        <br /> 
        <span data-bind="html: Value"></span> 
       </td> 
      </tr> 
     </table> 
</div>

一切正常，除了當視圖模型是大的罰款。例如，如果視圖模型的大小大約爲1兆字節（並且包含80個文檔，每個文檔有60個值），那麼在我的機器上渲染需要兩分鐘以上。

我想知道如果有顯著提高性能......還是會更快地放棄淘汰賽，只是建立在一個服務器端的HTML，只是把它推到瀏覽器的方式...

渲染「僅」300kb視圖模型需要接近30秒。

「文件」是由用戶定義的，所以甚至有2兆字節的情況（我不知道他們爲什麼這樣做）。

有沒有人有JavaScript中的大視圖模型的經驗？

來源

2012-03-20 Alexey Raga

由於您目前的需求無法延遲加載（按需加載）數據，因此您非常有限。

服務器端HTML

生成HTML服務器側將是最快的方法。但即便如此，如果模型巨大，將會出現延遲。考慮下載一個5MB的HTML文件，它將花費你的瀏覽器一些時間來解析和渲染這麼大的東西。

如果你想仍然使用您的淘汰賽JS框架，然後我最好的建議是將每個文件在IFRAME仍然使用淘汰賽JS

。這不是真的推薦，並會給你的服務器帶來額外的負擔，但是如果正確實施會加快你的用戶體驗。

www.mysite.com/view/1 

<div> 
    <iframe src="www.mysite.com/view/1/document/1"></iframe></div> 
<div> 
    <iframe src="www.mysite.com/view/1/document/2"></iframe></div> 
... 

www.mysite.com/view/1/document/1 

<!-- Just the single Document template --> 
    <table data-bind="foreach: Values"> 
     <tr data-bind="foreach: $data"> 
      <td data-bind="attr: {colspan: Colspan}"> 
       <label data-bind="text: Label"></label> 
       <br /> 
       <span data-bind="html: Value"></span> 
      </td> 
     </tr> 
    </table>

客戶端瀏覽器將最初獲取所有包含所有IFRAME的HTML，它將異步地爲每個請求發送請求。每個單獨的文檔請求將使用它自己的框架中的Knockout JS異步呈現。

爲了改善用戶交互，您甚至可以在IFRAME上設置加載事件。加載事件可能會重新調整IFRAME的大小，因此沒有滾動條，或者從IFRAME中提取HTML，並用提取的HTML替換IFRAME元素。

來源

2012-03-20 15:46:43

謝謝。那麼根據你的回答，玩我的視圖模型的結構將不會真的有幫助嗎？我的意思是，如果我做兩階段綁定：先綁定一個空表，然後綁定該表以便用數據填充它等等？ – 2012-03-20 21:35:09

另外從您的經驗來看，嘗試其他MVVM框架或模板引擎（如backbone，jQuery.tmpl等）還是性能幾乎相同？換句話說，它是一個普通的JavaScript/Browser/Dom問題，還是僅僅是Knockout會變慢？當然，我會自己嘗試至少一個其他框架，但嘗試所有這些框架需要很長時間，所以我要求有經驗的人給我一個建議:) – 2012-03-20 21:39:05

@Alexey Raga - 只要您在客戶端進行綁定您的表現將受到瀏覽器的限制。如果有人使用IE8（緩慢的JavaScript引擎），而且模型非常龐大，那麼需要花費數分鐘才能呈現它。如果jQuery.tmpl速度提高50％，那麼對於你來說，你認爲「顯着提高性能」你沒有給出任何限制嗎？... – 2012-03-21 11:30:45

KO中的本地模板引擎並不是特別快。我會先嚐試jQuery.tmpl引擎（described here）。如果速度不夠快，您應該考慮嘗試減少呈現內容的數量 - 比方說，最初只爲每個文檔渲染一個標題，然後在選擇或展開時呈現細節。

來源

2012-03-20 13:09:23

感謝您的回答。我正在與商界討論這個問題，但是現在他們希望一切都能夠立即呈現...... – 2012-03-20 13:17:17

不確定您的應用程序的工作方式，但如果您不需要一次顯示所有內容，則可以將模型分段填充。就像在我的一個應用程序中，我有查看模型，其中包含大量項目列表，但只包含表格中可見的項目。視圖也具有選擇的項目條目，其具有更多信息，並且當從列表中選擇一些條目時填充它。

總的來說，我曾經見過很多次人們都將各種各樣的東西放在視圖模型中，即使它從未在UI中呈現過。如果直接從服務器獲取東西，它會帶來一些好處，但另一方面，它可能會使視圖模型膨脹。

來源

2012-04-05 12:58:22 tomtom

Knockout JS和大型模型

回答

相關問題