CODEWITHSUNDEEP
javascriptjquery
user145610
user145610

Reputation: 3035

Performance improvement of page where million records are present

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

Answers (3)

Alvin K.
Alvin K.

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

TheBrain
TheBrain

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

Ionică Bizău
Ionică Bizău

Reputation: 113507

  1. Build your HTML string that you want to append.
  2. Append it once, after its building is finished.

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

Related Questions