Arrays and IE

[Christopher Benson-Manica]

I've noticed that IE apparently has a horrible implementation of the
array object, since traversing one with as few as 1000 items it tends
to pop up a dialog informing the user that the script is taking too
long. I tried splitting the array into a 10x100 two-dimensional array
as well as changing the array to a linked list, but neither improved
the code's efficiency sufficiently. Can anyone suggest methods for
optimizing array efficiency, or some other workaround for yet another
one of Bill Gates' blunders?

--
Christopher Benson-Manica | I *should* know what I'm talking about - if I
ataru(at)cyberspace.org | don't, I need to know. Flames welcome.

[Douglas Crockford]

> I've noticed that IE apparently has a horrible implementation of the

array object, since traversing one with as few as 1000 items it tends
to pop up a dialog informing the user that the script is taking too
long. I tried splitting the array into a 10x100 two-dimensional array
as well as changing the array to a linked list, but neither improved
the code's efficiency sufficiently. Can anyone suggest methods for
optimizing array efficiency, or some other workaround for yet another
one of Bill Gates' blunders?

Do the work on the server.

[Christopher Benson-Manica]

Douglas Crockford <no****@covad.net> spoke thus:

Do the work on the server.

It's an option, but we've decided not to do it in order to reduce the
amount of markup our users must download.

--
Christopher Benson-Manica | I *should* know what I'm talking about - if I
ataru(at)cyberspace.org | don't, I need to know. Flames welcome.

[Mick White]

Christopher Benson-Manica wrote:

I've noticed that IE apparently has a horrible implementation of the
array object, since traversing one with as few as 1000 items it tends
to pop up a dialog informing the user that the script is taking too
long. I tried splitting the array into a 10x100 two-dimensional array
as well as changing the array to a linked list, but neither improved
the code's efficiency sufficiently. Can anyone suggest methods for
optimizing array efficiency, or some other workaround for yet another
one of Bill Gates' blunders?

What type of objects are in the array?
Mick

[Christopher Benson-Manica]

Mick White <mw***********@rochester.rr.com> spoke thus:

What type of objects are in the array?
Mick

Some objects that have 5 or 6 strings as members.

--
Christopher Benson-Manica | I *should* know what I'm talking about - if I
ataru(at)cyberspace.org | don't, I need to know. Flames welcome.

[Mick White]

Christopher Benson-Manica wrote:

Mick White <mw***********@rochester.rr.com> spoke thus:

What type of objects are in the array?
Mick

Some objects that have 5 or 6 strings as members.

This really should not impose much strain on the browser, perhaps there
is some way to optimize your code.
Mick

[Christopher Benson-Manica]

Mick White <mw***********@rochester.rr.com> spoke thus:

This really should not impose much strain on the browser, perhaps there
is some way to optimize your code.

I'll see if I can get an example together tomorrow that demonstrates
the unfortunate behavior :)

--
Christopher Benson-Manica | I *should* know what I'm talking about - if I
ataru(at)cyberspace.org | don't, I need to know. Flames welcome.

[Grant Wagner]

"Christopher Benson-Manica" <at***@nospam.cyberspace.org> wrote in
message news:cs**********@chessie.cirr.com...

I've noticed that IE apparently has a horrible implementation of the
array object, since traversing one with as few as 1000 items it tends
to pop up a dialog informing the user that the script is taking too
long. I tried splitting the array into a 10x100 two-dimensional array
as well as changing the array to a linked list, but neither improved
the code's efficiency sufficiently. Can anyone suggest methods for
optimizing array efficiency, or some other workaround for yet another
one of Bill Gates' blunders?

var now = new Date();
var a = new Array(2500000);
for (var i = 0; i < a.length; ++i);
document.write((new Date()) - now);

Takes about 3.8 seconds in IE 6.0.2800. No warning.

var now = new Date();
var a = new Array(1000000);
for (var i = 0; i < a.length; ++i) {
a[i] = 99999;
}
document.write((new Date()) - now);

Takes about 9 seconds in IE 6.0.2800. No warning.

So the implementation of the Array object is not to blame. What you are
doing inside the loop most likely is the problem. For example:

var now = new Date();
var a = new Array(100000);
var s = '';
for (var i = 0; i < a.length; ++i) {
s += 'x';
}
document.write((new Date()) - now);

Takes about 20 seconds.

var now = new Date();
var a = new Array(100000);
var s = [];
for (var i = 0; i < a.length; ++i) {
s.push('x');
}
s = s.join('');
document.write((new Date()) - now);

Takes about 3 seconds.

Of course:

var now = new Date();
var s = (new Array(100001)).join('x');
document.write((new Date()) - now);

takes < 100ms.

Lastly:

for (var i = 0; i < document.forms[0].elements.length; ++i) {
var whatever = document.forms[0].elements[i].value;
}

is must less efficient than:

var elements = document.forms[0].elements;
for (var i = 0; i < elements.length; ++i) {
var whatever = elements[i].value;
}

so "caching" commonly used deep DOM hierarchies is of value as well.

--
Grant Wagner <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq

[Christopher Benson-Manica]

Grant Wagner <gw*****@agricoreunited.com> spoke thus:

So the implementation of the Array object is not to blame. What you are
doing inside the loop most likely is the problem. For example:

Hm. Well, this is an example of the script that causes the problem
(http://ataru.gomen.org/jstest.html). The loop executes a paltry
10,500 script statements, but IE gives me the "slow script" warning
when it is run. Any advice on how to speed this up would be
appreciated.

var now = new Date();
function bar( one, two, three, four, five, six, seven, eight, nine, ten, eleven ) {
this.one=one;
this.two=two;
this.three=three;
this.four=four;
this.five=five;
this.six=six;
this.seven=seven;
this.eight=eight;
this.nine=nine;
this.ten=ten;
this.eleven=eleven;
}
var foo=[];
foo[0]=new bar( '<td>foo</td>', '<td>foo</td>', '<td>foo</td>', '<td>foo</td>', '<td>foo</td>', '<td>foo</td>', '<td>foo</td>', '<td>foo</td>', '<td>foo</td>', '<td>foo</td>', '<td>foo</td>' );
// go all the way up to foo[699]
with( document ) {
writeln( '<table>' );
for (var i = 0; i < foo.length; ++i) {
writeln( '<tr>' );
writeln( '<td>'+i+'</td>' );
var thisfoo=foo[i];
writeln( thisfoo.one );
writeln( thisfoo.two );
writeln( thisfoo.three );
writeln( thisfoo.four );
writeln( thisfoo.five );
writeln( thisfoo.six );
writeln( thisfoo.seven );
writeln( thisfoo.eight );
writeln( thisfoo.nine );
writeln( thisfoo.ten );
writeln( thisfoo.eleven );
writeln( '</tr>' );
}
writeln( '<table>' );
close();
}
document.write((new Date()) - now);

--
Christopher Benson-Manica | I *should* know what I'm talking about - if I
ataru(at)cyberspace.org | don't, I need to know. Flames welcome.

[Douglas Crockford]

>>> I've noticed that IE apparently has a horrible implementation of the

array object, since traversing one with as few as 1000 items it tends
to pop up a dialog informing the user that the script is taking too
long. I tried splitting the array into a 10x100 two-dimensional array
as well as changing the array to a linked list, but neither improved
the code's efficiency sufficiently. Can anyone suggest methods for
optimizing array efficiency, or some other workaround for yet another
one of Bill Gates' blunders?

So the implementation of the Array object is not to blame. What you are
doing inside the loop most likely is the problem. For example:

Hm. Well, this is an example of the script that causes the problem
(http://ataru.gomen.org/jstest.html). The loop executes a paltry
10,500 script statements, but IE gives me the "slow script" warning
when it is run. Any advice on how to speed this up would be
appreciated.

var now = new Date();
function bar( one, two, three, four, five, six, seven, eight, nine, ten, eleven ) {
this.one=one;
this.two=two;
this.three=three;
this.four=four;
this.five=five;
this.six=six;
this.seven=seven;
this.eight=eight;
this.nine=nine;
this.ten=ten;
this.eleven=eleven;
}
var foo=[];
foo[0]=new bar( '<td>foo</td>', '<td>foo</td>', '<td>foo</td>', '<td>foo</td>', '<td>foo</td>', '<td>foo</td>', '<td>foo</td>', '<td>foo</td>', '<td>foo</td>', '<td>foo</td>', '<td>foo</td>' );
// go all the way up to foo[699]
with( document ) {
writeln( '<table>' );
for (var i = 0; i < foo.length; ++i) {
writeln( '<tr>' );
writeln( '<td>'+i+'</td>' );
var thisfoo=foo[i];
writeln( thisfoo.one );
writeln( thisfoo.two );
writeln( thisfoo.three );
writeln( thisfoo.four );
writeln( thisfoo.five );
writeln( thisfoo.six );
writeln( thisfoo.seven );
writeln( thisfoo.eight );
writeln( thisfoo.nine );
writeln( thisfoo.ten );
writeln( thisfoo.eleven );
writeln( '</tr>' );
}
writeln( '<table>' );
close();
}
document.write((new Date()) - now);

I think you owe Bill Gates an apology. While he has made more than his
share of software blunders (like his demos crashing on stage at the
Consumer Electronics Show last week), this blunder is yours.

Tables can be complicated structures to display. Extremely large tables
will be slow to display.

Replace the
with(document) {
with
var writelin = document.writeln;
That will save you a little bit of time.

You can also replace the bar constructor will object literal notation.

var foo = [
['<td>foo</td>', '<td>foo</td>', '<td>foo</td>',
'<td>foo</td>', '<td>foo</td>', '<td>foo</td>',
'<td>foo</td>', '<td>foo</td>', '<td>foo</td>',
'<td>foo</td>', '<td>foo</td>'],
['<td>foo</td>', '<td>foo</td>', '<td>foo</td>',
'<td>foo</td>', '<td>foo</td>', '<td>foo</td>',
'<td>foo</td>', '<td>foo</td>', '<td>foo</td>',
'<td>foo</td>', '<td>foo</td>'],
...
];

And then use foo[i].join() to knock it down. That should save a lot of
time.

http://www.crockford.com/javascript

[Christopher Benson-Manica]

Douglas Crockford <no****@covad.net> spoke thus:

I think you owe Bill Gates an apology. While he has made more than his
share of software blunders (like his demos crashing on stage at the
Consumer Electronics Show last week), this blunder is yours.
It's one shared by some other people here, apparently. While I don't
feel disposed to apologize to Mr. Gates, I do owe you a debt of
gratitude :)
And then use foo[i].join() to knock it down. That should save a lot of
time.

That works like a charm - thank you!!!

--
Christopher Benson-Manica | I *should* know what I'm talking about - if I
ataru(at)cyberspace.org | don't, I need to know. Flames welcome.

[wolfgang zeidler]

Christopher Benson-Manica schrieb:

I've noticed that IE apparently has a horrible implementation of the
array object, since traversing one with as few as 1000 items it tends
to pop up a dialog informing the user that the script is taking too
long. I tried splitting the array into a 10x100 two-dimensional array
as well as changing the array to a linked list, but neither improved
the code's efficiency sufficiently. Can anyone suggest methods for
optimizing array efficiency, or some other workaround for yet another
one of Bill Gates' blunders?

var clock
function startCL () {
clock = new Date().getTime()
}
function stopCL ( d ) {
var cl = new Date().getTime()
d.write ( cl - clock )
}

var trData = []
function singleTR () {
this.va = []
for ( var i = 0 ; i < 11 ; i++ ) this.va.push ( '<td>' + arguments
[i] + '</td>' )
}
function init () {
for ( var i = 0 ; i < 700 ; i++ ) trData.push ( new singleTR ( 'aaa'
, 'bbb' , 'ccc' , 'ddd' , 'eee' , 'fff' , 'ggg' , 'hhh' , 'iii' , 'jjj'
, 'kkk' ) )
}

function version_1 ( d ) { // d = document
d.write ( '<table border>' )
for ( var i = 0 ; i < trData.length ; i++ ) {
var trLine = trData [i]
d.write ( '<tr><td>' + i + '</td>' )
for ( var j = 0 ; j < 11 ; j++ ) d.write ( trLine.va [j] )
d.write ( '</tr>' )
}
d.write ( '</table>' )
}

function version_2 ( d ) { // d = document
d.write ( '<table border>' )
for ( var i = 0 ; i < trData.length ; i++ ) {
var trLine = trData [i]
var s = '<tr><td>' + i + '</td>'
for ( var j = 0 ; j < 11 ; j++ ) s+= trLine.va [j]
d.write ( s + '</tr>' )
}
d.write ( '</table>' )
}

function version_3 ( d ) { // d = document
var s = '<table border>'
for ( var i = 0 ; i < trData.length ; i++ ) {
var trLine = trData [i]
s += '<tr><td>' + i + '</td>'
for ( var j = 0 ; j < 11 ; j++ ) s+= trLine.va [j]
s += '</tr>'
}
d.write ( s + '</table>' )
}

startCL ()
init ()
stopCL ( document )
startCL ()
version_1 ( document ) // OR version_2 OR version_3
stopCL ( document )

-------------
Results:

Mozilla 1.75:
init: 0.3 sec
version_1: 5.5 sec
version_2: 1.9 sec
version_3: 1.5 sec

IE 6:
init: 0.5 sec
version_1: ~ 20 sec with timeout warning
version_2: 0.6 sec
version_3: > 40 sec (!) but without timeout warning
-------------
regards, wz

[Grant Wagner]

"wolfgang zeidler" <di**********************************@arcor.de> wrote
in message news:41***********************@newsread2.arcor-online.net...

Christopher Benson-Manica schrieb:

I've noticed that IE apparently has a horrible implementation of the
array object, since traversing one with as few as 1000 items it tends
to pop up a dialog informing the user that the script is taking too
long. I tried splitting the array into a 10x100 two-dimensional
array
as well as changing the array to a linked list, but neither improved
the code's efficiency sufficiently. Can anyone suggest methods for
optimizing array efficiency, or some other workaround for yet another
one of Bill Gates' blunders?

var clock
function startCL () {
clock = new Date().getTime()
}
function stopCL ( d ) {
var cl = new Date().getTime()
d.write ( cl - clock )
}

var trData = []
function singleTR () {
this.va = []
for ( var i = 0 ; i < 11 ; i++ ) this.va.push ( '<td>' + arguments
[i] + '</td>' )
}
function init () {
for ( var i = 0 ; i < 700 ; i++ ) trData.push ( new singleTR ( 'aaa'
, 'bbb' , 'ccc' , 'ddd' , 'eee' , 'fff' , 'ggg' , 'hhh' , 'iii' ,
'jjj' , 'kkk' ) )
}

function version_1 ( d ) { // d = document
d.write ( '<table border>' )
for ( var i = 0 ; i < trData.length ; i++ ) {
var trLine = trData [i]
d.write ( '<tr><td>' + i + '</td>' )
for ( var j = 0 ; j < 11 ; j++ ) d.write ( trLine.va [j] )
d.write ( '</tr>' )
}
d.write ( '</table>' )
}

function version_2 ( d ) { // d = document
d.write ( '<table border>' )
for ( var i = 0 ; i < trData.length ; i++ ) {
var trLine = trData [i]
var s = '<tr><td>' + i + '</td>'
for ( var j = 0 ; j < 11 ; j++ ) s+= trLine.va [j]
d.write ( s + '</tr>' )
}
d.write ( '</table>' )
}

function version_3 ( d ) { // d = document
var s = '<table border>'
for ( var i = 0 ; i < trData.length ; i++ ) {
var trLine = trData [i]
s += '<tr><td>' + i + '</td>'
for ( var j = 0 ; j < 11 ; j++ ) s+= trLine.va [j]
s += '</tr>'
}
d.write ( s + '</table>' )
}

startCL ()
init ()
stopCL ( document )
startCL ()
version_1 ( document ) // OR version_2 OR version_3
stopCL ( document )

-------------
Results:

Mozilla 1.75:
init: 0.3 sec
version_1: 5.5 sec
version_2: 1.9 sec
version_3: 1.5 sec

IE 6:
init: 0.5 sec
version_1: ~ 20 sec with timeout warning
version_2: 0.6 sec
version_3: > 40 sec (!) but without timeout warning
-------------
regards, wz

So the problem isn't with the Array handling (because that is done in
init()), the problem is that repeated calls to document.write() are not
efficient in IE.

Here is a new version:

function version_4 ( d ) {
var s = [ '<table border>' ]
for ( var i = 0 ; i < trData.length ; i++ ) {
var trLine = trData[i]
s.push( '<tr><td>' , i , '</td>' )
for ( var j = 0 ; j < 11 ; j++ ) s.push( trLine.va[j] )
s.push( '</tr>' )
}
s.push( '</table>' )
d.write( s.join( '' ) )
}

Mozilla 1.7.5: 1.5 sec
IE 6.0.2900: 0.3 sec

In all your examples, you are calling document.write() as you go. In my
example, I put everything into an Array, then document.write(
Array.join('') )

You basically use the Array as an "output buffer", assemble what you
want to output, then call document.write() _once_.

In Mozilla it is about as fast as your fastest example, and in IE, it is
faster than any of your examples. Problem solved. Don't call
document.write() repeatedly when you can assemble everything and call it
once.

--
Grant Wagner <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq

[wolfgang zeidler]

Grant Wagner schrieb:

"wolfgang zeidler" <di**********************************@arcor.de> wrote
in message news:41***********************@newsread2.arcor-online.net...

Christopher Benson-Manica schrieb:

I've noticed that IE apparently has a horrible implementation of the
array object, since traversing one with as few as 1000 items it tends
to pop up a dialog informing the user that the script is taking too
long. I tried splitting the array into a 10x100 two-dimensional
array
as well as changing the array to a linked list, but neither improved
the code's efficiency sufficiently. Can anyone suggest methods for
optimizing array efficiency, or some other workaround for yet another
one of Bill Gates' blunders?

var clock
function startCL () {
clock = new Date().getTime()
}
function stopCL ( d ) {
var cl = new Date().getTime()
d.write ( cl - clock )
}

var trData = []
function singleTR () {
this.va = []
for ( var i = 0 ; i < 11 ; i++ ) this.va.push ( '<td>' + arguments
[i] + '</td>' )
}
function init () {
for ( var i = 0 ; i < 700 ; i++ ) trData.push ( new singleTR ( 'aaa'
, 'bbb' , 'ccc' , 'ddd' , 'eee' , 'fff' , 'ggg' , 'hhh' , 'iii' ,
'jjj' , 'kkk' ) )
}

function version_1 ( d ) { // d = document
d.write ( '<table border>' )
for ( var i = 0 ; i < trData.length ; i++ ) {
var trLine = trData [i]
d.write ( '<tr><td>' + i + '</td>' )
for ( var j = 0 ; j < 11 ; j++ ) d.write ( trLine.va [j] )
d.write ( '</tr>' )
}
d.write ( '</table>' )
}

function version_2 ( d ) { // d = document
d.write ( '<table border>' )
for ( var i = 0 ; i < trData.length ; i++ ) {
var trLine = trData [i]
var s = '<tr><td>' + i + '</td>'
for ( var j = 0 ; j < 11 ; j++ ) s+= trLine.va [j]
d.write ( s + '</tr>' )
}
d.write ( '</table>' )
}

function version_3 ( d ) { // d = document
var s = '<table border>'
for ( var i = 0 ; i < trData.length ; i++ ) {
var trLine = trData [i]
s += '<tr><td>' + i + '</td>'
for ( var j = 0 ; j < 11 ; j++ ) s+= trLine.va [j]
s += '</tr>'
}
d.write ( s + '</table>' )
}

startCL ()
init ()
stopCL ( document )
startCL ()
version_1 ( document ) // OR version_2 OR version_3
stopCL ( document )

-------------
Results:

Mozilla 1.75:
init: 0.3 sec
version_1: 5.5 sec
version_2: 1.9 sec
version_3: 1.5 sec

IE 6:
init: 0.5 sec
version_1: ~ 20 sec with timeout warning
version_2: 0.6 sec
version_3: > 40 sec (!) but without timeout warning
-------------
regards, wz

So the problem isn't with the Array handling (because that is done in
init()), the problem is that repeated calls to document.write() are not
efficient in IE.

Here is a new version:

function version_4 ( d ) {
var s = [ '<table border>' ]
for ( var i = 0 ; i < trData.length ; i++ ) {
var trLine = trData[i]
s.push( '<tr><td>' , i , '</td>' )
for ( var j = 0 ; j < 11 ; j++ ) s.push( trLine.va[j] )
s.push( '</tr>' )
}
s.push( '</table>' )
d.write( s.join( '' ) )
}

Mozilla 1.7.5: 1.5 sec
IE 6.0.2900: 0.3 sec

In all your examples, you are calling document.write() as you go. In my
example, I put everything into an Array, then document.write(
Array.join('') )

You basically use the Array as an "output buffer", assemble what you
want to output, then call document.write() _once_.

In Mozilla it is about as fast as your fastest example, and in IE, it is
faster than any of your examples. Problem solved. Don't call
document.write() repeatedly when you can assemble everything and call it
once.

A) Version_4 seems fast, congratulation

B) Both version_3 and version_4 uses
only 1 write-statement,
I think the difference between them is:
version_4 uses concatenation "s += ..."
which might by also slowly in IE
( and other browsers ).
So I think we should say:
use an array for sampling
but don't use repeating write statements
*and* don't use string concatenation.

C) Based on your version_4 I wrote a version_5.
There seems to be not much differences between both
but for completeness you'll find the listing below.

D) Finally I wrote version_6.
All other versions used the constuctor singleTR ()
like the original poster used the constuctor bar ().
But there is no need to store 11 "TD-datas" in an array
if you are able to store the whole tableRow in a string.

Regards, wz

----------

Results:
m1.75 ie6.0 op7.11 ns4.75
init: 0.3 0.5 0.2 0.5
version_1: 5.5 ~20 2.5 184
version_2: 1.9 0.6 1.1 16.3
version_3: 1.5 40.5 40.5 crashed
version_4: 1.6 0.4 7.0 4.9
version_5: 1.5 0.4 6.4 5.0
init_6: 0.1 0.1 0.1 0.2
version_6: 1.4 0.2 1.2 4.5

----------

function version_5 ( d ) {
var s = new Array ( 12 * trData.length + 1 )
s [0] = '<table border>'
var addr = 0
for ( var i = 0 ; i < trData.length ; i++ ) {
var trLine = trData [i]
s [++addr] = '<tr><td>' + i + '</td>'
for ( var j = 0 ; j < 11 ; j++ ) s [++addr] = trLine.va [j]
s [++addr] = '</tr>'
}
s.push ( '</table>' )
d.write ( s.join ( '' ) )
}

----------

var trData_6 = new Array ( 700 )
function singleTR_6 ( n , a ) {
trData_6 [n] = '<tr><td>' + n + '</td><td>' + a.join ( '</td><td>' )
+ '</td></tr>'
}
function init_6 () {
for ( var i = 0 ; i < 700 ; i++ ) singleTR_6 ( i , [ 'aaa' , 'bbb' ,
'ccc' , 'ddd' , 'eee' , 'fff' , 'ggg' , 'hhh' , 'iii' , 'jjj' , 'kkk' ] )
}

function version_6 ( d ) {
d.write ( '<table border>' )
d.write ( trData_6.join ( '' ) )
d.write ( '</table>' )
}

startCL ()
init_6 ()
stopCL ( document )
startCL ()
version_6 ( document )
stopCL ( document )

----

Details of results:

mz 1.75
init 270 330 330 330 280
v1 5500 5490 5490 5440 5490
v2 1920 1930 1920 1920 1980
v3 1540 1480 1480 1480 1540
v4 1650 1590 1540 1590 1590
v5 1490 1530 1490 1480 1480
I6 110 110 50 50 70
v6 1420 1430 1370 1430 1370

ie 6.0.26
init 490 490 510 510 490
v1 2420 2030 2130 2080 2310
v2 610 540 600 630 600
v3 40370 40590 40310 40420 40900
v4 380 390 440 380 390
v5 380 380 390 390 380
I6 50 110 110 60 110
v6 220 170 170 220 160

opera 7.11
init 220 220 220 170 170
v1 2470 2410 2580 2530 2530
v2 1100 1100 1100 1150 1100
v3 16310 16260 16360 16260 16260
v4 7250 7300 7140 6040 7200
v5 6370 6700 6260 6090 6480
I6 170 110 110 160 110
v6 1260 1210 1260 1210 1210

netscape 4.75
init 440 550 600 500 620
v1 170490 198110
v2 16310 15930 16090 16480 16700
v3 "JavaScript Error: out of memory" ( twice )
v4 5110 5110 4770 4890 4720
v5 4940 4720 4940 5170 5050
I6 220 170 110 100 170
v6 4450 4450 4500 4450 4440