After examining the datagrid filter code I noticed that this loop in createFilterButton method is taking a long time:
$.each(['nofilter'].concat(operators), function(index,item){
var op = opts.operators[item];
if (op){
menu.menu('appendItem', {
text: op.text,
name: item
});
}
});
If I replace this with native Javascript for loop, time improves ~ < 0.1 s...
but also in in jquery.menu.js there is
$.fn.menu.methods={
appendItem:function(jq,_56){
return jq.each(function(){
_3a(this,_56);
});
}};
I think you should not use jQuery each because it can be much slower than the native loop.
http://code.tutsplus.com/tutorials/10-ways-to-instantly-increase-your-jquery-performance--net-5551jQuery's each function takes over 10 times as long as JS native "for" loop. This will certainly increase when dealing with more complicated stuff, like setting CSS attributes or other DOM manipulation operations.
Edit: maybe the problem is more with this line in createFilter method
input.addClass('datagrid-filter').attr('name', field);
Changing it to this:
var input_tmp = input[0];
input_tmp.setAttribute('class',input_tmp.className += ' datagrid-filter');
input.attr('name', field);
improved time by 0,5 seconds!
http://www.zachleat.com/web/quick-performance-tip-jquery-and-addclass/Another half a second can be gained by removing this line from the for loop there:
resizeFilter(target, field);