homepage Welcome to WebmasterWorld Guest from 54.205.144.54
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Optimising CSS
Not page load but page render times
Robin_reala




msg:1208815
 4:02 pm on Jun 5, 2006 (gmt 0)

Thought I'd share an interesting bit of information I just found out.

I'm currently coding a dropdown menu (in the suckerfish style) and was running into really nasty performance on Firefox. Even a simple background change on rollover on a submenu was taking something like a third of a second to happen which was really frustrating. Now, I'm building three different sites off the same HTML and one of them was working really snappily so I thought I'd do some investigation as to why it was working so much better than the other two.

It turned out that on that system on a:hover/focus I was only changing the background and border colours whereas on the other two I was adjusting padding and border-width. When I changed them so they only adjusted colours, they popped back up to normal speed.

My interpretation of this behaviour is that when changing just a colour Gecko knows that it only needs to update that block of the screen and can just rerender the square of the link. However when you're adjusting padding/border-width it doesn't immediately know if that's going to affect anything else even if you're doing it for decorative purposes and has to reflow as big a chunk of the page as it feels necessary (which might even be the whole page). This obviously takes far longer.

For what it's worth, this doesn't seem to affect IE much (I assume it's rendering algorithm is substantially different) but it's definitely worth it as a perf increase for Gecko alone. So if you're running up against this just try removing the padding/border-width changes and see if that helps!

Anyone else got any rendering performance tips they'd like to share?

 

gldnratio




msg:1208816
 12:23 am on Jun 6, 2006 (gmt 0)

Thanks for the info, I wish there were more posts like this.

Also, do you have a good script for drop down menu's?

Thanks!

Gldnratio

Robin_reala




msg:1208817
 2:09 pm on Jun 6, 2006 (gmt 0)

Well my one for this project was based on Patrick Griffith's 'Suckerfish' (easy to find if you search). It's simple enough and quick to load. Generally I'd recommend against using them though as they can be a usability and accessibility nightmare.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved