javascript - Knockout JS 和大模型

Question

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

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

<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>

一切正常，除非 View 模型很大。

例如，如果 View 模型的大小约为 1 兆字节(并且包含 80 个文档，每个文档有 60 个值)，那么在我的机器上渲染需要超过两分钟。

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

渲染“仅”300kb 的 View 模型需要将近 30 秒。

“文档”是用户自己定义的，所以甚至有>2兆的场景(我不知道他们为什么要这么做)。

有人用过 JavaScript 中的大 View 模型吗？

Answer 1

根据您当前无法延迟加载(按需加载)数据的要求，您的能力非常有限。

服务器端 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 发送请求。每个文档请求都将在其自己的框架中使用 Knockout JS 异步呈现。

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