Very slow performance in IE with large data set

[tpcrr]

I was seeing a > 30 second load time for a 2,000 row data set.

I tracked down the offending code in the fnDraw method.

$.each(aDistinctOptions, function (i, sOption) {
    var sText;
    sText = $('<div>' + sOption + '</div>').text();
    widget.$Select.append($('<option></option>').attr('value', sOption).text(sText));
});

Both the jQuery append and each are fairly slow in IE when used this way. I did some searching and found an improvement to this code.

var iLength = aDistinctOptions.length;
var aOptions = [];
var i = 0;
for (var a = 0; a < iLength; a += 1) {
    aOptions[i++] = '<option value="';
    aOptions[i++] = aDistinctOptions[a];
    aOptions[i++] = '">';
    aOptions[i++] = aDistinctOptions[a];
    aOptions[i++] = '</option>';
}
widget.$Select.append(aOptions.join(''));

I hope this can help someone else out.

[Muhahe]

Hi, maybe im retarded, but when i use your option, performance rapidly go down for me :(

My function is this

$.each( aDistinctOptions, function( i, sOption ) {

                var sText; 
                sText = $( '<div>' + sOption + '</div>' ).text();

                                if(widget.oColumn.sTitle == 'Start' || widget.oColumn.sTitle == 'End'){
                                var czDate = sText.split('.'); 
                                if(czDate[0].length == 1){
                                    czDate[0] = '0'+czDate[0]; 
                                }
                                var czDateParsed = (czDate[2]+czDate[1]+czDate[0]);

                                widget.$Select.append( $( '<option class="sortable"></option>' ).attr( 'value', sOption ).attr( 'data-sort', czDateParsed).text( sText ) );    
                                }else{ 
                widget.$Select.append( $( '<option class="sortable"></option>' ).attr( 'value', sOption ).attr( 'data-sort', sText).text( sText ) );
                                }
            //pridano pokus o sort data


            } );

But when i make it

$.each( aDistinctOptions, function( i, sOption ) {
var iLength = aDistinctOptions.length;
var aOptions = [];
var i = 0;
for (var a = 0; a < iLength; a += 1) {
    aOptions[i++] = '<option value="';
    aOptions[i++] = aDistinctOptions[a];
    aOptions[i++] = '">';
    aOptions[i++] = aDistinctOptions[a];
    aOptions[i++] = '</option>';
}
widget.$Select.append(aOptions.join(''));

  } );

Am i doing something terribly wrong?

[skarv]

@cyberhobo: I can fully support @tpcrr's suggestion - I've implemented it in my code, and ColumnFilterWidgets performs better in IE11. The difference becomes very notable with 500+ rows. How about replacing the other $.each methods that slows IE 11 down with large datasets as well? In a current project with 500+ rows, ColumnFilterWidgets sadly drags the page load time down from 4 seconds to 20 seconds.