Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Optimising CSS

Not page load but page render times

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 26, 2004
votes: 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?

12:23 am on June 6, 2006 (gmt 0)

New User

10+ Year Member

joined:May 17, 2006
votes: 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?



2:09 pm on June 6, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 26, 2004
votes: 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.

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members