homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Optimising CSS
Not page load but page render times

WebmasterWorld Senior Member 10+ Year Member

Msg#: 9209 posted 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?



5+ Year Member

Msg#: 9209 posted 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?




WebmasterWorld Senior Member 10+ Year Member

Msg#: 9209 posted 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