性能有问题

Question

我正在使用 jquery、knockout 和 WCF。我正在通过 Ajax 请求加载来自 WCF 的数据并将数据推送到可观察数组中。这个 observable 数组绑定到 html 表

<div  style="overflow: hidden;" >
<table style="width: 100%" >
    <thead>
        <tr>
            <th>Id </th>
            <th>Name</th>
        </tr>
    </thead>
</table>
<div style="overflow: auto;height: 320px;">
    <table id ="Table1" style="width: 100%;" >
        <tbody data-bind="foreach: ListOfArray">
            <tr  data-bind= "click: showData">
                <td data-bind="text: Id"></td>
                <td  data-bind="text: Name "></td>
            </tr>   
        </tbody>
    </table>
</div>

当我单击行时，选择它需要 4-5 秒。当我单击行时，我放置了探查器。这就是它所显示的

谁能指出它在哪里变慢了，为什么？

Answer 1

从您的 cmets 中，您说您的 HTML 表格显示 “5000 行”，而性能差，但 “性能好 > 如果只有 200 行”。

通常，由于内存限制和您发现的性能影响，应用不应尝试显示大量项目（在本例中为 5000 个）。

最常见的做法是只进行分页并一次显示 20 个项目，并带有 Previous； 下一页和页码。

如果您不希望分页，另一种方法是将您的表格重新设计为 虚拟表格，您基本上对可以表示的项目数量没有限制（仅限虚拟视图加载到内存中可以看到的和不是什么是屏幕外）。感谢 Facebook 上的无休止滚动。