Question

I have an application that uses jQuery MultiSelect plugin for several select Boxes (up to 20+). The application is being “built” on the client browser (yes… it should be built on the server but that’s not my choice) and each select box can contain as many as 15,000 dynamically loaded options (via WebFocus, if that matters). The data is being grabbed (via jQuery AJAX get call). As a test, I loaded 7400 datapoints (through the plugin) into a single select box. ON IE8, this took 104 secs. On FF it only took 4 Secs.

Is this typical or is something going on that I’m not seeing???

Relevant code is here:

// Get xml data & append to selectbox
    $.ajax({  
        type: "GET",  
        url: "test.xml",  
        dataType: "xml",  
        success: function(xml){  
        $(xml).find('ReportOptions').each(function() {  
            var cNum = $(this).find('cusipnum').text();         // assign vars to incoming data
            $('#cusip').append('<option>'+cNum+'</option>');    // append data to options
        });  
            $('#cusip').multiselect('refresh'); 
    },  
        error: function (xhr, ajaxOptions, thrownError) {
            alert("Error Status:"+xhr.status+", "+thrownError);
         }
    }); 

Answer 1

Yes this is typical. If you run this in IE9+ you should see improvement. I have found that any large scale style application or DOM manipulation by jquery is very slow in IE8. That being said there are improvements that can be made to this code.

To analyze performance profile this code using IE8 Developer Tools (F12). $(‘#cusip’).append should be the big consumer here. You are forcing jquery to do a lookup for ‘#cusip’ on each loop.