The app I'm working on has a physician look-up list. It's a simple form field that takes an Id and this look-up will allow the user to view the entire list of physicians and add one to the field. We are loading the list in the controller and then returning the list to the view, where the data is formatted in a table.
<div id="physicians-selection-dialog">
<table id="list">
<thead>
<tr>
<td>#</td>
<td>First Name</td>
<td>Last Name</td>
<td>Department</td>
<td>State Lic</td>
</tr>
</thead>
<tbody>
@foreach (var physician in Model.Physicians)
{
<tr><td><button class="list-select" value="@physician.PhysFxId">@physician.PhysFxId</button></td><td>@physician.PhysFirstName</td><td>@physician.PhysLastName</td><td>@physician.PhysDepartment</td><td>@physician.PhysStateLic</td></tr>
}
</tbody>
</table>
</div>
The user clicks a link that displays a jQuery dialog with the above html for all 5k physicians. This works fine, however, it is extremely slow to render. I need to increase the performance but am not certain what I should do?
- Should I cache the physician list, so it doesn't need to keep loading the 5k objects every time the view is loaded? That list is being loaded from the DB. This list will never or rarely change, so that isn't a worry.
- Is there a way to cache the html output?
- Paginate the data, but I think they want a top down list. Faster to scroll than keep clicking next.
How can I increase performance here?