CODEWITHSUNDEEP
jqueryperformancecssdom
4thSpace
4thSpace

Reputation: 44352

Performance: Pure CSS vs jQuery

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.

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?

Upvotes: 31

Views: 10168

Answers (3)

dezman
dezman

Reputation: 19388

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.

Upvotes: 0

BoltClock
BoltClock

Reputation: 724452

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

Upvotes: 35

WooCaSh
WooCaSh

Reputation: 5212

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.

Upvotes: 3

Related Questions