Tell me more ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.
up vote -2 down vote favorite

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
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
show 1 more comment

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 specific 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, see the FAQ for guidance.

3 Answers

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

http://stackoverflow.com/questions/10716885/responsive-design-method-for-collapsing-a-div

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
up vote 2 down vote

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

share|improve this answer
up vote 0 down vote

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.