Performance Issues with IE: Object creation time depends on the # of objects

Arielladog

07-02-2004, 07:58 PM

Hey guys,

It's probably easier to show you the test cases than explain, but I'll go ahead and try.

In IE, if I create Objects in an array (with new Object()) and add them onto the array, the time seems to depend on how many objects I previously created. For example, if I create 5000 objects, the time it takes is like 313 ms, then on the next run 859 ms, then 1300 ms, etc.... until I null out the references.

However, doing a similar test with DOM nodes and adding them to the Document is a constant time operation in IE.

I mozilla, they're both constant time operations (as they should be).

DOes anyone have an explanation for this?

testObjects.html:

<html>
<head>
</head>
<script>
var objArray = new Array();

function createDummyObjects()
{
var startT = new Date().getTime();
var start = objArray.length;

for (var i=start; i<start+5000; i++)
{
objArray.push(new Object());
objArray[i].prop1=new Object();
objArray[i].prop2="something";
objArray[i].prop3=new Array();
}
alert(new Date().getTime() - startT);
}

function removeDummyObjects()
{
objArray = null;
objArray = new Array();
}

</script>
<body>
<button onclick="createDummyObjects()">Create Them</button>
<button onclick="removeDummyObjects()">Remove Them</button>
</body>
</html>

testDOM.html:

<html>
<head>
</head>
<script>
var objArray = new Array();

function createDummyObjects()
{
var startT = new Date().getTime();

for (var i=0; i<2000; i++)
{
var div = document.createElement("div");
div.appendChild(document.createTextNode("Yah"));
document.body.appendChild(div);
}
alert(new Date().getTime() - startT);
}

function removeDummyObjects()
{
while(document.body.hasChildNodes()){
document.body.removeChild(document.body.lastChild)
}
var button = document.createElement("button");
button.appendChild(document.createTextNode("Create Them"));
button.onclick = createDummyObjects;
document.body.appendChild(button);

var button = document.createElement("button");
button.appendChild(document.createTextNode("Remove Them"));
button.onclick = removeDummyObjects;
document.body.appendChild(button);

}

</script>
<body onload="removeDummyObjects()"></body>
</html>

aDog :cool:

Arielladog

07-02-2004, 10:09 PM

Hey guys,

Doing some more tests, you can see that the issue isn't with an issue of taking more time to insert values into a larger array. For example:

var objArray = new Array();

function createDummyObjects()
{
var start = objArray.length;

for (var i=start; i<start+20000; i++)
{
objArray[i]="asdf";
}

var startT = new Date().getTime();
var x=null;
for(var i = 0; i< 20000; i++){
x = "asdf";
}
alert(new Date().getTime() - startT);

}

function removeDummyObjects()
{
objArray = null;
objArray = new Array();
}

In this test, each time the function is run, I have more values added to the array. Then, I timed to see how long it took to create 20,000 strings. As more values are added to the array, it takes longer to create the other strings (nothing to do with the array)

aDog :cool:

neofibril

07-02-2004, 11:07 PM

It seems to be an issue of JScript performing actions within a loop.

I tested between these scripts (as *.wsf files, to exclude Internet Explorer).

The time span remains consistent for each function call, if the value is stored outside the loop.

<job>
<script language="JScript">
var objArray = new Array;
function createDummyObjects()
{
var startT = new Date().getTime();
var n = objArray.length - 1;
var end = n + 5000;
var str = "";
str += "a";
str += "b";
str += "c";
str += "d";
str += "e";
str += "f";
str += "g";
str += "h";
str += "i";
str += "j";
str += "k";
while(++n <= end)
objArray[n] = str;
WScript.Echo("Time: " + (new Date().getTime() - startT) + "\n Length: " + objArray.length);
ask("Run function, again...");
}
function ask(Question)
{
wShell = new ActiveXObject("WScript.Shell");
switch(wShell.Popup(Question, 15, "Windows Script Host", 36))
{
case 6 : createDummyObjects();
break;
case 7 : WScript.Quit();
break;
}
}
ask("Run function...");
</script>
</job>

Inside the loop, the span increases significantly for each function call.

<job>
<script language="JScript">
var objArray = new Array;
function createDummyObjects()
{
var startT = new Date().getTime();
var n = objArray.length - 1;
var end = n + 5000;
var str = "";
while(++n <= end)
{
str += "a";
str += "b";
str += "c";
objArray[n] = str;
}
WScript.Echo("Time: " + (new Date().getTime() - startT) + "\n Length: " + objArray.length);
ask("Run function, again...");
}
function ask(Question)
{
wShell = new ActiveXObject("WScript.Shell");
switch(wShell.Popup(Question, 15, "Windows Script Host", 36))
{
case 6 : createDummyObjects();
break;
case 7 : WScript.Quit();
break;
}
}
ask("Run function...");
</script>
</job>

I meant to redifne str = ""; for each loop, in the second example; though, regardless, there's still a noticeable difference there.

Arielladog

07-02-2004, 11:26 PM

That's a good point. After trying more tests, i'm still pretty confused.

aDog :cool:

neofibril

07-03-2004, 12:44 AM

You may find relevant information here: How Do The Script Garbage Collectors Work? (http://blogs.msdn.com/ericlippert/archive/2003/09/17/53038.aspx)