Internet Explorer vs. Firefox javascript array performance

[google]

I am trying to complete a javascript application and am having problems
with code similar to that show below.

Much testing has shown that Firefox finishes the code shown in around
0.25 secs but Internet Explorer 6 takes a massive 3.5 secs! Internet
Explorer 7 gets it down to around 2 seconds - but that's still 8 times
slower than Firefox and way unacceptable for my userbase.

Looking through the newsgroups there is some discussion around the
differences between the way the two browsers handle arrays - but a
performance differential such as this is just unbelievably dismal.

Unfortunately I need to continue to use arrays of objects and have to
support the Internet Explorer client base. I have already added
specification of the array size and also removed the use of array
"push"ing - flattening the array is not really an option.

Has anyone got experience of this and have any suggestions for me to
try out?

Many thanks,

// JavaScript Document

var ItemArray = new Array(10000);

now = new Date;
start = now.getTime();

for (Count=0; Count<10000; Count++)
ItemArray[Count] = new Item("Field1", "Field2", "Field3");

now = new Date;
end = now.getTime();

alert("Test took " + ((end - start) / 1000) + " seconds");

function Item(Field1, Field2, Field3)
{
this.Field = new Array(3);

this.Field[0] = Field1;
this.Field[1] = Field2;
this.Field[2] = Field3;

this.Flags = new Array(2);

this.Flags[0] = true;
this.Flags[1] = false;
}

 

[RobG]

I am trying to complete a javascript application and am having problems
with code similar to that show below.

Much testing has shown that Firefox finishes the code shown in around
0.25 secs but Internet Explorer 6 takes a massive 3.5 secs! Internet
Explorer 7 gets it down to around 2 seconds - but that's still 8 times
slower than Firefox and way unacceptable for my userbase.

Looking through the newsgroups there is some discussion around the
differences between the way the two browsers handle arrays - but a
performance differential such as this is just unbelievably dismal.

Unfortunately I need to continue to use arrays of objects and have to
support the Internet Explorer client base. I have already added
specification of the array size and also removed the use of array
"push"ing - flattening the array is not really an option.

Did that make any difference?

Has anyone got experience of this and have any suggestions for me to
try out?

For me, the following is marginally faster, but I don't think it will
give you the kind of gains you are after:

var ItemArray = [];
var start = new Date().getTime();
var i = 5000;
while (i--) {
ItemArray = new Item("Field1", "Field2", "Field3");
}

var end = new Date().getTime();

alert("Test took " + ((end - start) / 1000) + " seconds");

function Item(Field1, Field2, Field3)
{
this.Field = [Field1, Field2, Field3];
this.Flags = [true, false];
}

 

[google]

Thanks for your suggestions.

You are right in that the suggestions will improve performance, but not
give the order of magnitude I need to find.

I found that I could roughly halve the Internet Explorer 6 processing
time by not having an array of objects, but just using a 2 dimensional
array.

One of the downsides to this approach, is that I lost the object
structure which made the code easy to understand through being able to
reference "Item[n].Field[n]" and "Item[n].Flags[n]" - ending up with
"Item[n][m]" type references.

I guess I am just amazed at the IE/Firefox performance diffential. One
thought I has was that maybe Microsoft are more focused on getting
solutions built with server-side technology, rather than building a
browser that can handle the type of processing - that's where the
revenue is I guess ...

 

[VK]

So Gecko does cache dispid's... No wonder with their JavaScript engine
dependance for the entire browser - yet it's nice to know for sure
without digging in C-sources.

In application to IE IDispatcher doesn't cache dispid's, other words
every time it needs a reference to an object/member it takes the string
name ("Item" in your case) and searches for the memory address in the
names table. Every single of 10,000 times...

So you can improve the performance by not forcing IDispatcher to go for
external references. It seems slow down Firefox for just a little bit
(I don't know why) but on my test machines it shows 150% performance
gain for IE:

<script type="text/javascript">
var ItemArray1 = new Array(10000);

now = new Date;
start = now.getTime();

for (Count=0; Count<10000; Count++) {
ItemArray1[Count] = {
'Field' : [0,1,2]
, 'Flags' : [true, false]
};
}

now = new Date;
end = now.getTime();

alert("Test took " + ((end - start) / 1000) + " seconds");
</script>

P.S. "Second's fractions hunters" : please do not take it as a
stimulus to drop OOP immediately on IE But for extrim cases
(10,000...100,000... objects to create in one loop) that can be
something to takes into consideration.