30

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?

John Slegers
  • 45,213
  • 22
  • 199
  • 169
4thSpace
  • 43,672
  • 97
  • 296
  • 475
  • Related: http://stackoverflow.com/questions/10984771/whats-faster-css3-transitions-or-jquery-animations – RAS May 21 '13 at 17:28
  • In 99.9% of cases, jQuery is slower than using native JavaScript: http://jsperf.com/browse – cimmanon May 21 '13 at 17:35
  • I don't always upvote a question about CSS/jQuery performance, but when I do... – BoltClock May 21 '13 at 17:39
  • Ah, so nice to finally see upvotes on my questions. – 4thSpace May 21 '13 at 17:41
  • 1
    It is a more than reasonable question. Unlike most questions which simply ask "is X faster than Y?", your question here contains preliminary research and knowledge, and doesn't present itself as a meaningless comparison between apples and oranges for its own sake. I don't see why this question should be closed as not constructive - performance is not always subjective, especially when there are already facts to back up both the question and its answers. – BoltClock May 21 '13 at 17:45
  • 2
    CSS vs jQuery *to do what*? If you're talking about animations/transitions, speed is not as important as quality (in my book), since the time is supposed to be invariant. Personally, I'd never use javascript where CSS would do, because that leaves your script thread free to do things that can *only* be done in script. (And, in my experience, CSS transitions are smoother than javascript animations, but I don't know how to quantify that). – harpo May 21 '13 at 20:04

3 Answers3

34

  • 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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • 3
    You are saying that mainly the reason is because the CSS language and runtime (or implementation?) is built into the browser but much jQuery is completely external and doesn't get that native (browser) boost? – 4thSpace May 21 '13 at 17:40
  • @4thSpace: Basically, yes. There's more to it, but it's an accurate simplification. – BoltClock May 21 '13 at 17:40
  • Hey, you were way to quick on that answer. I clicked Add Comment and you already replied :) Thanks! – 4thSpace May 21 '13 at 17:41
3

Here you have many usefull information:

How browsers work - Behind the scenes of modern web browsers

Look on this section: http://taligarsiel.com/Projects/howbrowserswork1.htm#CSS_parsing

and this: http://taligarsiel.com/Projects/howbrowserswork1.htm#Parsing_scripts

From links:

Scripts

The model of the web is synchronous. Authors expect scripts to be parsed and executed immediately when the parser reaches a tag. The parsing of the document halts until the script was executed. If the script is external then the resource must be first fetched from the network - this is also done synchronously, the parsing halts until the resource is fetched. This was the model for many years and is also specified in HTML 4 and 5 specifications. Authors could mark the script as "defer" and thus it will not halt the document parsing and will execute after it is parsed. HTML5 adds an option to mark the script as asynchronous so it will be parsed and executed by a different thread.

Style sheets

Style sheets on the other hand have a different model. Conceptually it seems that since style sheets don't change the DOM tree, there is no reason to wait for them and stop the document parsing. There is an issue, though, of scripts asking for style information during the document parsing stage. If the style is not loaded and parsed yet, the script will get wrong answers and apparently this caused lots of problems. It seems to be an edge case but is quite common. Firefox blocks all scripts when there is a style sheet that is still being loaded and parsed. Webkit blocks scripts only when they try to access for certain style properties that may be effected by unloaded style sheets.

WooCaSh
  • 5,180
  • 5
  • 36
  • 54
0

I think the main reason CSS is faster is because it can be optimized more than javascript because it is less complicated, the code is just a series of rules and doesn't have much of its own logic (other than selectors and the occasional calc() function) BTW, CSS definitely does have to be evaluated by the browser.

Mohammad Faisal
  • 5,783
  • 15
  • 70
  • 117
dezman
  • 18,087
  • 10
  • 53
  • 91