Knockout加载数据非常缓慢

Question

我正在通过jquery ajax调用WCF服务来加载数据。 WCF服务返回的数据非常快，但knockout却加载数据非常缓慢。以下是使用jquery ajax调用wcf服务的代码：

 function loadData(id) {
        var input =
            {
                Id: id
            };


        $.ajax({
            url: "../Service/Table/TableData",
            type: "PUT",
            contentType: 'application/json',
            processData: false,
            data: JSON.stringify(input),
            error: function (XMLHttpRequest, textStatus, errorThrown) {

                alert(errorThrown);
            },
            success: function (allData) {
                var mappedData= $.map(allData, function (item) {

                    return new TableData(item);
                });
                self.TableDataList(mappedData);



            }
        });

    }

以下是我的看法

<div  style="overflow: hidden;margin-top: 30px;margin-left: 10px;float:left;" >

            <table style="width: 100%" >

                <colgroup>
                    <col   />
                    <col  />

                    <col/>
                </colgroup>

                <thead><tr>

                           <th style="padding: 0px">Id </th>
                           <th style="padding: 0px">Name</th>

                       </tr>

                </thead>

            </table>
            <div style="overflow: auto;height: 490px;">
                <table id ="Table1" class="Hover" style="width: 100%;" >
                    <colgroup>
                        <col   style="width: 20px"/>
                        <col style="width: 80px"/>

                        <col/>
                    </colgroup>
                    <tbody data-bind="foreach: TableDataList">

                        <tr>

                            <td style="padding: 0px;text-align: left" data-bind="text: Id"  ></td>
                            <td style="padding: 0px;" data-bind="text: Name "></td>

                        </tr>   


                    </tbody>
                </table>
            </div>

我正在加载大约20000条记录，加载页面需要2分钟。如何避免这种情况？

更新1

使用jQuery模板能解决这个问题吗？还是需要分页？

更新2

这是我的TableData类代码：

 function TableData (data) {
        this.Id = ko.observable(data.Id);
        this.Name = ko.observable(data.Name);
        this.LastName = ko.observable(data.LastName );
        this.DateOfBirth = ko.observable(data.DateOfBirth );
        this.Age= ko.observable(data.Age);


    }

- James

---

显而易见的解决方法是不要加载20000条记录，而是进行服务器端分页... - nemesv

@nemesv 但服务器返回数据非常快。只有这个knockout加载得很慢。 - James

@Happy，显然这个操作会很慢，因为它需要循环遍历20000条记录并创建元素。显而易见的解决方案是实现分页（服务器端和/或客户端）。 - painotpi

无法理解为什么它被踩了。 - James

Answer 1

分页是解决这个问题的最佳方案，如 @nemesv 所说。在客户端处理 20000 条记录会在渲染页面时产生自己的性能成本，因此不是 knockout 框架表现缓慢。所以你也可以使用按需加载 "onScreenscroll" 或类似方法来加速页面。

- vendettamit

---

你对这个网址https://dev59.com/b2kw5IYBdhLWcg3ws8tj 有什么看法？但我不知道该使用什么。 - James

你尝试过将较少的记录发送到页面吗？ - vendettamit

Answer 2

我们能看到TableData类的代码吗？我认为你在这个类中为每个属性创建了很多可观察对象。

由于视图不包含任何输入字段，我猜想您不想修改数据。

这就是我想的。TableData类是减慢您代码速度的罪魁祸首。TableData类是无用的，因为您没有在其中使用任何计算。并且因为您不想修改数据，所以您不需要为TableData属性创建可观察对象。

尝试使用此函数替换成功函数。

success: function (allData) {
    self.TableDataList(allData);
}

查看fiddle

- Damien

---

如果我使用您的代码，会出现错误，如下所示：对象＃<Object>的属性'Id'不是函数。 - James

在视图或视图模型的某个地方，您写了"Id()"。请将其替换为"Id"。您必须对所有属性进行此更正。 - Damien

那就是正在发生的事情。 - Chris Dixon

@ChrisDixon 那我该怎么办，Chris？请帮帮我。 - James

@Damien 抱歉，我贴上来的错误不是在我的视图中而是在我的视图模型中。我已经修复了它并正在加载数据。但仍然需要与之前相同的时间。 - James