javascript - something wrong with performance

Question

I am using jquery,knockout and WCF. I am loading data coming from WCF via Ajax request and push data into observable array. This observable array is binded to html table

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

When i click on row then it takes 4-5 seconds to select it. I put profiler when i click on row. This is what it shows

Can someone point me where is it slowing down and why?

Answer 1

From your comments you have said your HTML table is displaying "5000 rows" when performance is poor but "performace is good if just have 200 rows".

Generally an app should not attempt to display a large number of items (in this case 5000) due to memory limitations and the impact on performance as you have discovered.

The most common practice is to just do paging and show say 20 items at a time complete with Previous; Next and page numbers.

An alternative approach if you don't want paging is to redesign your table to be a virtual table where you essentially there is no limit on the number of items that could be represented (virtual views only load into memory what can be seen and not what is off-screen). Thank the endless scrolling on Facebook.