Forum Moderators: not2easy
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?
Also, do you have a good script for drop down menu's?
Thanks!
Gldnratio
