SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    May 2002
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    too much CPU usage when doing className change ?!

    I'm doing some experiments with onMouseOver&Out effects on table rows.

    HTML code:
    <tr onmouseover="this.className='test1';" onmouseout="this.className='test2';">

    But when i move my mouse over the rows altering the class thakes about 80% with IE(6) ans about 40% in Mozilla (1.1)...

    what's that all about... it's not acceptable, so if anyone out there have a work around this, please contribute. I realy can't use anything else like this.style.backgroundColor, becouse i have to use seperated CSS file (multiple color themes)...

  2. #2
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hm...perhaps events that are 'global' to the table will be faster...
    Code:
    function trOver(e) {
    	var o = (document.all) ? e.srcElement : e.target;
    	if (o.nodeName != "TR") return;
    	o.className = 'test1';
    	}
    function trOut(e) {
    	var o = (document.all) ? e.srcElement : e.target;
    	if (o.nodeName != "TR") return;
    	o.className = 'test2';
    	}
    
    <table onMouseOver="trOver(event);" onMouseOut="trOut(event);">
    <tr>
    <td>blah</td><td>blah</td><td>blah</td>
    </tr>
    <tr>
    <td>blah</td><td>blah</td><td>blah</td>
    </tr>
    <tr>
    <td>blah</td><td>blah</td><td>blah</td>
    </tr>
    </table>
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  3. #3
    Rehab is for quiters! spartan's Avatar
    Join Date
    Apr 2002
    Location
    Cape Town, South Africa
    Posts
    343
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    beetle
    why would that be faster? or less expensive (CPU-wise)

    just picking your brain
    Spartan
    ---------------------
    It's like our sergeant told us before one trip into the jungle. Men! Fifty of you are leaving on a mission. Twenty-five of you ain't coming back.
    -Mr.Payne

  4. #4
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't know. But it's a different way to do the same thing (takes less coding too ). One is bound to be quicker.

    I'll let xbite figure out which one is.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2001
    Location
    northern Maine
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The CPU-usage comes from having to rerender sections of the page, if not the entire thing.

    Changing colors, text-decorations, etc are typically fast operations. That is because nothing is reflowed. Which means the browser can keep the rendering of the rest of the page constant, while changing the look of the one element (which isn't changing in size).

    Now, let's say we change font-size, font-weight, width, and height. The browser "knows" that these affect the box surrounding the element by changing its size. It has to rerender the element, it's children, and then all the element's parents until it can safely assume that the current element is not affected by the change in size.

    If this is a small page, no problem. Modern browsers can typically render small pages fast (Mozilla and Opera faster than others though). Now, we take the time that takes, and consider a page many times larger. It seems to me that while it is still an O(n) operation (I could very well be wrong on this algorithm), the multiple of n that we ignore in algorithms increases.

    If we could see the class you are changing from, and the class you are changing too, it may help a little.
    Jason - Contact Me
    Supermoderator @ CodingForums

  6. #6
    SitePoint Enthusiast
    Join Date
    May 2002
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The code that beetle pasted in didn't change anything...


    and 2 classes from my CSS definition:


    .test1 {
    background-color: #EFEFEF;
    }

    .test2 {
    background-color: transparent;
    }

    that's it..

  7. #7
    Rehab is for quiters! spartan's Avatar
    Join Date
    Apr 2002
    Location
    Cape Town, South Africa
    Posts
    343
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I dunno.
    80% seems a bit excessive if you ask me... and just for a color change!


    lets just blame it on microsoft

    maybe jkd can shed some light on the subject now that we know what your classes look like.

    jkd?
    Spartan
    ---------------------
    It's like our sergeant told us before one trip into the jungle. Men! Fifty of you are leaving on a mission. Twenty-five of you ain't coming back.
    -Mr.Payne

  8. #8
    SitePoint Enthusiast
    Join Date
    Mar 2001
    Location
    northern Maine
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't see any reason for that much CPU-usage by looking at those classes. Perhaps, instead of changing the class name, since you only have one property in each class, change just the property:

    onmouseover="this.style.backgroundColor = '#efefef'" onmouseout="this.style.backgroundColor = 'transparent'"

    That should at least be a little faster than changing the class.
    Jason - Contact Me
    Supermoderator @ CodingForums

  9. #9
    SitePoint Enthusiast
    Join Date
    May 2002
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    jkd.. that IS a solution... but I need the classes, are differend CSS files with diferent colors - multiple themes...

  10. #10
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok. Let me ask an important question. Are you concerned about the percentage figure itself? Or is there a visual performance hit? If you are just worried about the percentage, don't. Just quickly dragging a window around on my machine takes the CPU up to 100%, but it doesn't lag or cause performance issues, the CPU is just streching it's legs.

    XP Pro, 1.7GHz, 256MB
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  11. #11
    SitePoint Enthusiast
    Join Date
    May 2002
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you have a point, but ignoring the problem wasn't my idea of solving it...

  12. #12
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I understand, but you still didn't answer my question. is it:

    A) Just a CPU hit
    B) Actual visual performance drop

    Pick one
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  13. #13
    SitePoint Enthusiast
    Join Date
    May 2002
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    page shuld look cool - the row highlighting is cool, isn't it ...

    ok.. i guess i'll just have to ignore the CPU usage..



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
  •