Skip to content
bjunix edited this page Jan 5, 2012 · 1 revision

From Google's Page Speed Docs:

"Avoiding inefficient key selectors that match large numbers of elements can speed up page rendering.

"As the browser parses HTML, it constructs an internal document tree representing all the elements to be displayed. It then matches elements to styles specified in various stylesheets, according to the standard CSS cascade, inheritance, and ordering rules. In Mozilla's implementation (and probably others as well), for each element, the CSS engine searches through style rules to find a match. The engine evaluates each rule from right to left, starting from the rightmost selector (called the "key") and moving through each selector until it finds a match or discards the rule. (The "selector" is the document element to which the rule should apply.)

"According to this system, the fewer rules the engine has to evaluate the better"

Clone this wiki locally