Question

我正在试图找出使用KnockoutJS的最佳方法，我需要你的建议。

我的视图模型包含一组“文档”，每个文档都有一组“值”。使用以下模板将每个“文档”呈现为单独的表：

<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个值），那么我的计算机上的渲染时间将超过两分钟。

我想知道是否有办法显着提高性能...或者放弃Knockout并在服务器端构建html并将其推送到浏览器会更快......

渲染“仅”300kb视图模型需要接近30秒。

“文档”由用户定义，因此甚至有> 2兆字节的场景（我不知道为什么会这样做）。

有没有人有使用JavaScript的大型视图模型的经验？

Answer 1

KO中的本机模板引擎并不是特别快。我会首先尝试jQuery.tmpl引擎（described here）。如果这还不够快，您应该考虑尝试减少正在呈现的内容量 - 比如，最初只为每个文档呈现标题，然后在选择或展开时呈现详细信息。

Answer 2

根据您当前无法延迟加载（按需加载）数据的要求，您的数量非常有限。

服务器端HTML

生成HTML服务器端将是最快的方法。但即便如此，如果模型很大，也会有延迟。考虑下载一个5MB的HTML文件，这将花费你的浏览器一些时间来解析和渲染这么大的东西。

仍然使用KNOCKOUT JS

如果您仍想使用Knockout JS框架，那么我的最佳建议是将每个文档放在IFRAME中。这不是真正推荐的，会给您的服务器带来额外负担，但如果正确实施可以加快您的用户体验。

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，它将异步地为每个IFRAME分派请求。每个单独的Document请求将使用Knockout JS在其自己的帧中异步呈现。

为了改善用户交互，您甚至可以在IFRAME上设置加载事件。 load事件可以重新调整IFRAME的大小，这样就没有滚动条，或者从IFRAME中提取HTML并用提取的HTML替换IFRAME元素。

Answer 3

不确定您的应用程序是如何工作的，但如果您不需要一次显示所有内容，则可以将模型填充为多个部分。就像在我的一个应用程序中一样，我有一个视图模型，它有很多项目列表，但它只包含表格中可见的内容。 View还选择了具有更多信息的项目条目，并在从列表中选择一些条目时填充它。

总的来说，我很少见过人们将各种各样的东西放在视图模型中，即使它没有在UI中呈现。如果你直接从服务器获取你的东西，它有一些好处，但另一方面它可能膨胀视图模型。

淘汰JS和大型模型

3 个答案: