-1

Which is better for website speed, CSS :hover or jQuery hover? Or are they about the same?

Sam Sabin
  • 553
  • 1
  • 6
  • 19
  • 7
    not including an external library that the browser can do natively will always be faster – thescientist May 29 '14 at 22:53
  • 3
    Counter-question: if CSS `:hover` is enough for you needs, why would you ever consider replacing it with jQuery? – Jon May 29 '14 at 22:54
  • 1
    Use CSS! When you use jquery, you load Jquery script, it's more fast if you use css. – Joffrey Maheo May 29 '14 at 22:55
  • What if it was something were both CSS and jQuery would require an external library?(like moz-box-styling for CSS) – Sam Sabin May 29 '14 at 22:56
  • This question is WAY too broad. Please narrow the context and give specifics on what the problem is, what your trying to solve. As it stands this smells like Gorilla vs Shark. – Jay May 29 '14 at 22:58
  • This is just a theoretical question. I meant in general, which is faster, jQuery or CSS, when achieving the same end. – Sam Sabin May 29 '14 at 22:58
  • 2
    Maybe there *is* a difference between using jQuery or plain CSS, but even if there is, the difference is *so* small your users will never even notice. So use whatever is easiest for you. – display-name-is-missing May 29 '14 at 22:59

2 Answers2

6

CSS

  • CSS is native (built into browsers), like a HTML parser and a JavaScript engine
  • CSS styles are exposed to scripting languages via the CSSOM - the CSS Object Model which defines APIs for media queries, selectors and CSS itself
  • Implementation does not happen through a scripting language (unless the layout engine itself is written in one)

jQuery

  • jQuery is a JavaScript library, and therefore external to browsers
  • Needs to be downloaded and run through the browser's implementation of JavaScript
  • jQuery will need to access the DOM and CSSOM, which is implemented in JavaScript, which the browser has to run

So, theoretically, while you can use jQuery and CSS to both use onEvent methods, CSS would be faster, as it is native to browsers, and does not have to do the added step to download and "translate" the library.

More information

Performance: Pure CSS vs jQuery

How browsers work - Behind the scenes of modern web browsers

Community
  • 1
  • 1
eggy
  • 2,836
  • 3
  • 23
  • 37
  • Note : CSS hover (or any selector) for animation purpose is usually slower than jQuery animations (and way slower than pure animations framework ([Example](http://julian.com/research/velocity/)). CSS only trigger the event faster. – Apolo Aug 06 '15 at 17:42
0

Jquery and CSS can both be onEvent driven. The only time speed is affected is when loading the DOM, because the Jquery library has to be downloaded.

The de-facto for such events is using CSS simply because it is native.

Sethe23
  • 2,552
  • 4
  • 18
  • 18