Reputation: 3035
I need some suggestion how to improve the performance of the application, I'm developing MVC 3 ASP.NET Application. From the controller , I'm pulling 50,000 records of type string, All the items i.e 50,000 are added to a HTML Div dynamically using Jquery.
$(div).append("<input type='radio' name='reportType'
id='" + item.Item1 + "' value = '" + item.Item2 + "'/>" + item.Item1 ");
I see there is considerable amount of time is taken while adding above radio button to parent control i.e HTML DIV
The parent HTML DIV
has Check box
, on checking that, all the child box must be selected. I see there is considerable amount of time for checking all items
All these items are in Scroll Viewer, Is there a way to improve user experience, Like loading data on Scroll basis some thing like Data Virtualization of Silverlight in HTML 5.
I Check all items and Drag on to another part of page, which make Browser to non responsive mode. Can anyone provide me best user experience of these many records with improve Query performance
Upvotes: 1
Views: 666
Reputation: 4379
Basically, to display large dataset, try this:
1) Store it in browser memory, use sessionStorage() or localStorage()
2) Minimize DOM, do not write ALL data to DOM, dynamically add & remove the elements.
3) Allow dataset to be searchable, this means a filter function that trims the dataset.
Another recommended way of resolving this is to use Megalist, require jQuery and works well for tablet or mobile.
Upvotes: 0
Reputation: 5608
You should create a documentFragment and add the nodes there. And after you finish add the documentFragment to the DOM. Also, it's more efficient to use createElement
than to use strings. There are a lot of jsperf tests to prove that and there you can also find ways to do it in the most efficient way.
To prevent the browser from completely freezing for a long period of time, you should break your iteration in batches of...1000 item (pure guess). And call that function as many times as you need to finish the job. Keep a counter outside it. Call it with setTimeout(renderMore, 0)
. At least this will keep the window from freezing.
Depending on your UI and workflows, there might be some other improvements you can apply. But you didn't provide much info about that.
Upvotes: 1
Reputation: 113507
This will be faster than appending each string.
var htmlToAppend = "";
for (var i in items) {
var item = items[i];
htmlToAppend = "<input type='radio' name='reportType' id='" + item.Item1 + "' value = '" + item.Item2 + "'/>" + item.Item1;
}
$(div).append(htmlToAppend);
Also, I believe that there is a better way!
Upvotes: 1