Webmasters Stack Exchange is a question and answer site for pro webmasters. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I have two working solutions for hover navigation that I've built. One solution uses JS, one use CSS. My question is, assuming a browser is JS-enabled, which solution will work faster?

I'll most likely opt for CSS anyway to avoid given non-JS browsers trouble, but I was curious. I'm not sure of a way to programatically test my solutions with the necessary resolution, but I presume this has been documented somewhere.

share|improve this question

closed as not constructive by Su', danlefree Sep 11 '12 at 17:13

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.If this question can be reworded to fit the rules in the help center, please edit the question.

Why does it matter? It would be a matter of microseconds at most, in any normal setup. If there is a reason to suspect that the speed difference could be noticeable to the human eye, the odds are that your navigation system or its implementation is far too complex. – Jukka K. Korpela Aug 5 '12 at 7:24
It certainly does matter. Even with a quick jQuery and or CSS menu if it's fast enough that you can't tell the difference but the code varies by a few kb it adds up and when you're paying for server resources that's what matters. 1 million hits a month x a few kb adds up. Why do you think some stack exchange sites don't use meta descriptions to save on bandwidth. So yes it matters and you should always be trying to optimize your code. – Anagio Aug 5 '12 at 7:34
@Anagio, the question was about rendering faster, not amount of code. – Jukka K. Korpela Aug 5 '12 at 9:48
Flagging to close. This is pretty much entirely theoretical, and impossible to address in this blanket manner, anyway. You can only evaluate specific cases. – Su' Aug 5 '12 at 10:02
@JukkaK.Korpela - While rendering times may be nearly the same, the amount of code DOES matter greatly because not only does it save bandwidth, it saves time to transmit to the end user. That's why we like to gzip our content before serving it. It saves time and bandwidth both. (Thus loading in the browser faster). – ionFish Aug 5 '12 at 14:17
up vote 0 down vote accepted

I asked a similar question on stack overflow they said...

CSS ist for Style. JavaScript should be only for the application logic... Generally you want to separate the application logic from the design & animation. Beside that it performs much better especially on mobile devices


So if you can use pure CSS go with that

share|improve this answer
Thanks. I think the quote you give is a lot more relevant to my question than the question/answer in the link, but helpful nonetheless. – Dan Aug 5 '12 at 8:25
How does this address the question about rendering speed? – Jukka K. Korpela Aug 5 '12 at 9:49
@JukkaK.Korpela because it has to do with the amount of code as well as one performing better. – Anagio Aug 5 '12 at 14:31

Definitively use CSS pseudo-class :hover. It will be faster and more reliable.

share|improve this answer

I have been looking into similar issues, hence my clicking on the link. I learned a lot from this article on writing efficient CSS from Mozilla: https://developer.mozilla.org/en-US/docs/CSS/Writing_Efficient_CSS

share|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.