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.

Answer 1

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.