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和大型模型

回答

相关问题