FF 10x faster than ie?

[phpseeker]

.. at least at this specific thing..

I have a table with 397 rows and a javascript loop to set them as hidden or unhidden. In FF it takes less than a second which is nice and responsive but in ie7 it takes 7 seconds to complete which is annoying for the user. Why is there such a big difference and is there any way to speed this up in ie?

the html goes like:

<table>
<tr id='0readmoreblock0'><td>bla</td></tr>
<tr id='0readmoreblock1'><td>bla</td></tr>
<tr id='0readmoreblock2'><td>bla</td></tr>
....up to 396
</table>

The javascript loop is:

var tab=0;
for (cc=0; cc<397; cc=cc+1) {
document.getElementById(tab + \"readmoreblock\" + cc).style.display='';
 }

This is a very simplified version to show the point. The rows need to be done individually as in the proper version some get turned on and some off.

[mortimer]

Why cant you just hide the whole table, rather than each row?

[phpseeker]

The reason is that in the actual script there are options to filter out certain types of rows and then the script loop has to hide some rows and show others depending on selections made.

[Mittineague]

Maybe it has something to do with IE using tbody tags?

[mortimer]

Ah ok you could group each set off rows with a tbody tag then hide that tbody

[phpseeker]

Unfortunately I couldn't use that, the rows must remain single as there are many different options selectable that could result in a large number of possible permutations. Thanks for the suggestion though.

[siteguru]

Is it anything to do with the ID beginning with a number (0)? I thought it was required (or at least good practise) to start an ID with a letter? (I may be confusing this with PHP, or with not having a variable start with a number).

[logic_earth]

W3C says:
"ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".")."

[siteguru]

Thanks for confirming my thoughts.

[phpseeker]

I guess the page doesn't meet those standards while still actually functioning correctly.

I just ran a quick test and generated a 397 row table with row ids as test1 test2 test3 etc and the result is still the same as with id's like 0test0 0test1 etc.

[Mittineague]

Due to differences in the rendering engine?

[phpseeker]

Maybe it has something to do with IE using tbody tags?

I just tested it on the same number of divs rather than table rows and it's still slow so the issue is not specific to tables.

[mrhoo]

In similar situations I break up the loop. How many rows can you see on screen at one time? 50? 100?

You really don't need ids for 396 rows-
you could simply loop through the table's 'tr' node list.

Every lookup takes some time, so if you do stick with ids, just look each one up once in the loop.
And it would render faster with fewer elements- table/tbody/tr/td/ are a lot of layers for text display.

function timeloop(cc){
	var table= document.getElementsByTagName('table')[0].getElementsByTagName('tr');
	var L= cc+50;
	while(cc<L) {
		var who= table[cc];
		if(!who) return true;
		who.style.display= '';
		cc++;
	}
	setTimeout(function(){timeloop(cc)},10)
}

[phpseeker]

Thanks mrhoo, I'm trying to get that working in my script. I'll post back the results once it's working.

[phpseeker]

I used the method you posted mrhoo and what was taking 7 seconds is now taking 2 seconds which is a big improvement so thanks for the input

ie is still slower than ff but it's perfectly usable now on both.

Thanks for all replies, very much apreciated.

[gimbles]

I'm guessing it's something else in your code, i ran some tests myself using basic code, and they both processed near instantaneously. So what I'm saying is, there is probably another guilty party lurking amoung your code, post more of it, cause that one loop alone wont be any different in FF or IE.

[phpseeker]

It's this section of code. I'll post the before and after versions. This is the only change made and it is now taking 2 seconds instead of 7. I confirmed that it was this section of code taking so much processing time by just removing the line in it that read...

document.getElementById(tab + \"readmoreblock\" + cc).style.display=isin;

Without that it was almost instant.


before

 //TOGGLE ROWS LOOP_________________________________
 for (cc=0; cc<ac; cc=cc+1) { isin=''; total=0;
 	for (tf=0; tf<=fieldcount; ++tf) {
		for (fc=0; fc<fcount; ++fc) {
			if (ftype=='exclude') { if ((filters[0][fc]==tf) && (filters[1][fc]!=fdata[tf][cc])) { total=total+1; } }
			else { if ((filters[0][fc]==tf) && (filters[1][fc]==fdata[tf][cc])) { total=total+1; } }
		}
		if (total==fcount) { isin=''; } else { isin='none'; }
	}
	document.getElementById(tab + \"readmoreblock\" + cc).style.display=isin;
 }

After

 var gamerows= document.getElementById(\"tabblock\" + tab).getElementsByTagName('tr');
 //TOGGLE ROWS LOOP_________________________________
 for (cc=0; cc<ac; cc=cc+1) { isin=''; total=0; stcount=0;
 	for (tf=0; tf<=fieldcount; ++tf) {
		for (fc=0; fc<fcount; ++fc) {
			if (ftype=='exclude') { if ((filters[0][fc]==tf) && (filters[1][fc]!=fdata[tf][cc])) { total=total+1; } }
			else { if ((filters[0][fc]==tf) && (filters[1][fc]==fdata[tf][cc])) { total=total+1; } }
		}
		if (total==fcount) { isin=''; } else { isin='none'; }
	}
	var currentrow= gamerows[cc+1];
	currentrow.style.display=isin;
 }