Hiya,
Although this won't actually increase performance, you can increase
*perceived* performance by altering the way you process each of your
"user" items. If you use a recursive approach, such that once each item
is finished being processed, it sets the next one processing, and put in
a 1 or 2ms delay on each call, the browser won't lock up, so your
spinners will keep spinning, you won't risk the "unresponsive script"
dialog, and everything just seems to work faster. :)
Looking at the code, I notice that you attach event handlers to every
element. These may well impact negatively on performance in all
browsers. You might want to have a look at event delegation -- this will
reduce the number of event handlers on the page, and also cut down on
some of the code in your snippet. Oh, and instead of using "new
Array()", you're probably better off just using an array literal...
although it looks like your dta "array" should actually be an object...
perhaps consider rewriting that section as
var dta = {
itemID: usr.i,
firstname: usr.f,
// ... and so on
}
Regards,
Barry
On 09/02/10 17:03, Ralph Slooten wrote:
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
--
Not sent from my iPhone.
