Performance: Pure CSS vs jQuery

Question

I've seen a number of code comparisons between pure CSS and the equivalent jQuery. But I'm looking for details about why pure CSS is definitively faster than jQuery.

Here's are some of the reasons I've seen but these descriptions are not in-depth. I'm not sure if they are even true.

• CSS doesn't have to be evaluated by the browser
• jQuery has to be evaluated by the browser
• jQuery goes through a scripting language

Doesn't CSS have to be evaluated by the browser and also goes through a scripting language? Doesn't CSS have to walk the DOM like jQuery or does CSS have some advantage there?

Answer 1

• CSS doesn't have to be evaluated by the browser

  No. CSS is a language that you write your stylesheets in, which then have to be loaded, parsed and evaluated by the browser; see below.

• jQuery has to be evaluated by the browser

  Yes, because...

• jQuery goes through a scripting language

  Yes. jQuery is written in JavaScript which, like CSS, is a language which has to be parsed and evaluated by the browser; again, see below.

Doesn't CSS have to be evaluated by the browser and also goes through a scripting language?

It has to be evaluated by the browser, but as a language in its own right, it's implemented in native code similarly to the other core language features of a layout engine, like an HTML parser and a JavaScript engine. CSS implementation does not happen through a scripting language (unless, of course, the layout engine itself is written in one).

CSS styles are exposed to scripting languages via the CSSOM, which is not the CSS implementation itself, just a scripting API which you could consider as sort of a CSS equivalent to the DOM for HTML.

jQuery is written in JavaScript, which is then run by the browser's JavaScript implementation. If you use jQuery to apply CSS, then jQuery has to access the DOM and CSSOM, which are again implemented in JavaScript, which the browser has to run.

This is similar to using jQuery selectors versus the native Selectors API. jQuery selectors are implemented in Sizzle, a JavaScript selector library, while document.querySelector() is a DOM method that allows you to use a browser's natively-implemented selector engine directly from a script.