SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    FF 10x faster than ie?

    .. 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:
    Code:
    <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:

    Code:
    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.

  2. #2
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why cant you just hide the whole table, rather than each row?

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    16,454
    Mentioned
    160 Post(s)
    Tagged
    1 Thread(s)

    javascript to hide tables

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

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah ok you could group each set off rows with a tbody tag then hide that tbody

  6. #6
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,609
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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).
    Ian Anderson
    www.siteguru.co.uk

  8. #8
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    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 (".")."
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  9. #9
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,609
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thanks for confirming my thoughts.
    Ian Anderson
    www.siteguru.co.uk

  10. #10
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  11. #11
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    16,454
    Mentioned
    160 Post(s)
    Tagged
    1 Thread(s)

    render

    Due to differences in the rendering engine?

  12. #12
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Mittineague View Post
    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.

  13. #13
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    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)
    }

  14. #14
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks mrhoo, I'm trying to get that working in my script. I'll post back the results once it's working.

  15. #15
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  16. #16
    SitePoint Zealot
    Join Date
    Sep 2007
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  17. #17
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Code:
     //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
    Code:
     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;
     }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •