Hi guys,
I have what I believe to be a generic problem, namely poor performance with
Internet Explorer when dealing with hundreds of objects. I'm currently
working with something similar to the gmail address book, although what I
have dynamically loads in addresses using an ajax call as a user scrolls
down. The structure of each element group is simply
<li>
<label>
<input type=checkbox" />
<div>Some short data</div>
</label>
</li>
The input & the div elements have attached events (differing) and the list
(li) element has an small array stored in the Elements Storage.
I've been careful when creating the array to group actions as far as
possible, so I'm left with something to the effect of:
result.users.each(function(usr){
var myLi = new Element('li');
var myLabel = new Element('label').inject(myLi);
var sel = new Element('input', {'id':'check'+i, 'type': 'checkbox', events:{
'change': function() {styleList(myLi);},
'click': function(){clickage(event);}
}}).inject(myLabel);
var usrData = new Element('div', { 'text': usr.f+' '+usr.l, events: {
'click': function(event){if(!event.control) selectNone();},
'dblclick':function(){editUser();}
}}).inject(myLabel);
var dta = new Array();
dta.itemID = usr.i;
dta.firstname = usr.f;
dta.lastname = usr.l;
dta.groups = usr.g;
dta.email = usr.e;
myLi.store('data', dta);
myLi.inject(myUL);
});
This is repeated for 100 addresses at a time, although all other browsers
easily handle 250, 500 and even 1000 faster than IE does 100.
IE performance just sucks. Chrome, FF, Opera, Safari, all extremely fast. Is
there some obvious way to improve performance? If I just inject text it
speeds up dramatically (on IE), however I cannot attach the necessary
functions. Just creating the div almost doubles the load time.
Any suggestions? Thanks in advance.
Cheers,
Ralph
