Make Jquery\Javascript more Efficient

Question

I have the following piece of code to generate an select list on the fly. The code works okay when the records retrieved are between 0-300 records. However when I try to work with records over this number, 671 records to be exact, the browsers(IE,FF,Chrome,Opera) hang and it seems the javascript is taking up a lot of resources and the browsers become slow after the select option is finally generated after a 5 minute wait.... I am looking for a way to make this more efficient and prevent such hangups as I will work with records upto 5000

$("#idea_selectrel").on("change",function(){
       var attributeid = $("option:selected",this).val();
       $.post("/OCSRM/PopulateHTMLTablesServlet.do",{"attributeid":attributeid,"table":'idearelations'},function(data){
           if(!$.isEmptyObject(data))
           {
               $("#idea_selectrelvalue option:not(:first)").remove();
               var html='';
               var len = data.length;               
               for(var i=0,len = data.length; i<len; i++ )
               {
                   var relvalue = [data[i].relvalue];
                   var description = [data[i].description];
                   html +='<option value="'+relvalue+'">'+relvalue+' - '+description+'</option>';
                   $("#idea_selectrelvalue").append(html).show();
               }
           }
           else
           {
               alert('No data found.');

           }


       },'json');
       //alert(attributeid);

    });

5000 dom elements is screaming for a re-think on the design of your interface. You should ideally be paging this on the server. — BenjaminPaul
– BenjaminPaul, Commented Jan 21, 2015 at 15:21
add the html to DOM after you are done constructing all of it instead of piece by piece — Abraham Adam
– Abraham Adam, Commented Jan 21, 2015 at 15:21
How do you expect users to cope with a dropdown containing 5000 options? — musefan
– musefan, Commented Jan 21, 2015 at 15:23

Pointy · Accepted Answer · 2015-01-21 15:18:37Z

4

Your code is building up a long string of HTML containing the options. It's also appending the string over and over again to the <select> element.

Move the .append() to after the loop:

           for(var i=0,len = data.length; i<len; i++ )
           {
               var relvalue = [data[i].relvalue];
               var description = [data[i].description];
               html +='<option value="'+relvalue+'">'+relvalue+' - '+description+'</option>';
           }
           $("#idea_selectrelvalue").append(html).show();

answered Jan 21, 2015 at 15:18

Pointy

415k62 gold badges600 silver badges631 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

beije · Accepted Answer · 2015-01-21 15:22:42Z

1

Not being able to test the code but from what I can tell you're not clearing the html variable inside the loop, currently, the html will be added recursively for every iteration, and every iteration is updating the DOM, which will get pretty large, fast.

I'm not sure if this is by design, but if it's not, try moving the append outside of the loop.

           var html='';
           var len = data.length;               
           for(var i=0,len = data.length; i<len; i++ )
           {
               var relvalue = [data[i].relvalue];
               var description = [data[i].description];
               html +='<option value="'+relvalue+'">'+relvalue+' - '+description+'</option>';
           }

           $("#idea_selectrelvalue").append(html).show();

answered Jan 21, 2015 at 15:22

beije

8715 silver badges11 bronze badges

1 Comment

iCollect.it Ltd Over a year ago

Best to check that the exact same answer was not already posted (4 mins earlier) before posting :)

Kevin Eaton · Accepted Answer · 2015-01-21 15:20:45Z

0

That is a lot of DOM elements that will be slow to load even if created without JS. Assuming you don't have a way to pre-generate the select on the server and send it down, you could try not appending the value in the loop. You could build out a string of option values and then, after the string is created, set the html of the select to the generated string. The DOM manipulation in the loop could be a culprit at that level. However, it is important to note that large or deeply nested DOM elements can be a performance concern regardless.

answered Jan 21, 2015 at 15:20

Kevin Eaton

1113 silver badges13 bronze badges

Collectives™ on Stack Overflow

Make Jquery\Javascript more Efficient

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related