Javascript 淘汰JS和大型模型_Javascript_Performance_Knockout.js

Javascript 淘汰JS和大型模型

javascript performance knockout.js

Javascript 淘汰JS和大型模型,javascript,performance,knockout.js,Javascript,Performance,Knockout.js,我正在尝试找出使用KnockoutJS的最佳方法，我需要你的建议我的视图模型包含一组“文档”，每个文档都有一组“值”。使用以下模板将每个“文档”呈现为单独的表： <div data-bind="foreach: Documents"> <table data-bind="foreach: Values"> <tr data-bind="foreach: $data"> <td

我正在尝试找出使用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 MB（包含80个文档，每个文档包含60个值），则在我的计算机上渲染需要两分钟以上的时间

我想知道是否有办法显著提高性能。。。还是放弃淘汰制，在服务器端构建html并将其推送到浏览器会更快

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

“文档”是由用户定义的，所以甚至有>2MB的场景（我不知道他们为什么这么做）

有人对JavaScript中的大视图模型有经验吗？

KO中的本机模板引擎不是特别快。我将首先尝试jQuery.tmpl引擎（）。如果这个速度不够快，你应该考虑尽量减少渲染内容的数量，比如说，只为每个文档最初渲染一个标题，然后在选择或扩展时渲染细节。

根据你当前不能懒惰的加载（按需加载）数据的要求，你是非常有限的。 服务器端HTML

生成HTML服务器端将是最快的方法。但即便如此，如果模型庞大，也会有延迟。考虑下载一个5MB的HTML文件，它会占用你的浏览器一些时间来解析和渲染一些大的东西。 仍然使用击倒JS

如果您仍然想使用淘汰版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>

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

客户端浏览器最初将获取包含所有iFrame的所有HTML，它将异步为每个iFrame发送请求。每个文档请求都将在其自己的框架中使用Knockout JS异步呈现

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

不确定应用程序如何工作，但如果不需要一次显示所有内容，则可以分块填充模型。就像在我的一个应用程序中一样，我有一个视图模型，它有一个大的项目列表，但它只包含表中可见的内容。视图中还有一个包含更多信息的选定项目条目，当从列表中选择某个条目时，我会填充该条目

一般来说，我很少看到人们将各种各样的东西放在视图模型中，即使它从未在UI中呈现过。如果您直接从服务器获取内容，它会带来一些好处，但另一方面，它可能会膨胀视图模型

谢谢你的回答。我正在和业务部门讨论这件事，但现在他们希望所有的东西都能立即呈现出来……谢谢。因此，根据您的回答，玩我的视图模型是如何构造的并没有真正的帮助？我的意思是，如果我进行两阶段绑定：首先绑定一个空表，然后绑定该表以便用数据填充它，等等？同样根据您的经验，尝试其他MVVM框架或模板引擎（如主干、jQuery.tmpl等）是否有意义，或者性能是否基本相同？换句话说，这是一个普遍的JavaScript/Browser/Dom问题，还是仅仅因为速度慢而被淘汰？当然，我自己也会尝试至少一种其他框架，但尝试所有框架都需要很多时间，因此我向有经验的人征求建议：）@Alexey Raga-任何时候在客户端进行绑定时，您的性能都会受到浏览器的限制。如果有人正在使用IE8（慢速JavaScript引擎），并且模型很大，那么他们需要几分钟来渲染它。如果JQueRel.TMPL的速度快了50%，你就不会给你所认为的“显著提高性能”提供任何限制，那对你来说足够了吗？