Selectors

Santiago Aimetta

Types sorted by performance

● Types sorted by performance / souders1. ID, i.e. #header

2. Class, i.e. .promo

3. Type, i.e. div

4. Adjacent sibling, i.e. h2 + p

5. Child, i.e. div > p

6. Descendant, i.e. ul a

7. Universal, i.e. *

8. Attribute, i.e. [type="text"]

9. Pseudo-classes/-elements, i.e. a:hover

Performance impact

● "The impact of CSS selectors on performance derives from the amount of time it takes the browser to match the selector against the elements in the document" Souders

How selectors works

● Browsers read selectors right to left

● Example: #div-1 a○ We read #div-1 with an a○ Browser reads a in #div-1

● Why?

Example reading left to rightdocument

html

head body

div id:div-1 div id:div-2

a class: nav-link

a class: nav-link span

a

● div a {... }● div > span .classX● div img {...}● div a img {...}● #div-1 a {...}● #div-2 {...}● #div-1 a span {...}● div span a {...}● .class-x a {...}● .class-z {...}● div a span {...}● span a {...}● div > a {...}● a.nav-link + a {...}img span

Example reading left to rightdocument

html

head body

div id:div-1 div id:div-2

a class: nav-link

a class: nav-link span

a

● div a {... }● div > span .classX {..}● div img {...}● div a img {...}● #div-1 a {...}● #div-2 {...}● #div-1 a span {...}● div span a {...}● .class-x a {...}● .class-z {...}● div a span {...}● span a {...}● div > a {...}● a.nav-link + a {...}img span

Example reading left to rightdocument

html

head body

div id:div-1 div id:div-2

a class: nav-link

a class: nav-link span

a

● div a {... }● div > span .classX {..}● div img {...}● div a img {...}● #div-1 a {...}● #div-2 {...}● #div-1 a span {...}● div span a {...}● .class-x a {...}● .class-z {...}● div a span {...}● span a {...}● div > a {...}● a.nav-link + a {...}img span

Example reading right to leftdocument

html

head body

div id:div-1 div id:div-2

a class: nav-link

a class: nav-link span

a

● div a {... }● div > span .classX{..}● div img {...}● div a img {...}● #div-1 a {...}● #div-2 {...}● #div-1 a span {...}● div span a {...}● .class-x a {...}● .class-z {...}● div a span {...}● span a {...}● div > a {...}● a.nav-link + a {...}img span

Example reading right to leftdocument

html

head body

div id:div-1 div id:div-2

a class: nav-link

a class: nav-link span

a

● div a {... }● div > span .classX {..}● div img {...}● div a img {...}● #div-1 a {...}● #div-2 {...}● #div-1 a span {...}● div span a {...}● .class-x a {...}● .class-z {...}● div a span {...}● span a {...}● div > a {...}● a.nav-link + a {...}img span

Example reading right to leftdocument

html

head body

div id:div-1 div id:div-2

a class: nav-link

a class: nav-link span

a

● div a {... }● div {...}● div img {...}● div a img {...}● #div-1 a {...}● #div-2 {...}● #div-1 a span {...}● div span a {...}● .class-x a {...}● .class-z {...}● div a span {...}● span a {...}● div > a {...}● a.nav-link + a {...}img span

How selectors works

● When the browser is trying to style an element has to discard style rules fast

● Starting for the rightmost part of the selector discards a lot of rules at once

● Keep in mind that a common page has hundred of rules

● The rightmost part of the selector is called key selector

● The key selector has a significant impact on the performance of CSS selectors

Key Selector

● Rightmost part of the selector

● #some-id .some-class {...}● div .some-class a {...}● .some-class * {...}

● The matching work that the browser do is heavily affected by the rightmost selector

Tips to efficient selectors

● Avoid universal rules *:○ Try to avoid universal selectors like *, adjacent

sibling, child, descendant and attribute. The recomended selectors are id and class.

● Don't qualify id selectors:○ There is only one element per id, so there is no need

to add additional qualifiers.● Don't qualify class selectors:

○ Instead of qualifying class selectors for tags, create a new class, ie: a.nav-link use .a-nav-link .

● Specific rules

Tips to efficient selectors

● Avoid descendant selectors:○ They are one of the most expensive to process

● Avoid tag child selectors:○ tag child selectors like .content > p > a can be

replaced by a specific class like .content-anchor● Use the inheritance:

○ Use the inherited properties, dont repeat.● The number of rules and the dom deep has

an impact in performance

Focus on selectors where the key selector matches a large number of elements in the page.

... Too much tips, i lost the focus

Tunning selectors

● Example

<ul id="nav-links"> <li><a href="http://login.mercadolibre.com.ar">Ingresar</a> </li> <li><a href="http://myaccount.mercadolibre.com.ar/">Mi cuenta</a></li> <li><a href="https://syi.mercadolibre.com.ar/sell">Vender</a></li> <li><a href="http://www.mercadolibre.com.ar/ayuda_home">Ayuda</a></li></ul>

● #nav-links a {...} will evaluate all a elements and then check if it belongs to an element with nav-links id

Tunning selectors

● Example<ul id="nav-links"> <li><a class="nav-link" href="http://login.mercadolibre.com.ar">Ingresar</a> </li> <li><a class="nav-link" href="http://myaccount.mercadolibre.com.ar/">Mi cuenta</a></li> <li><a class="nav-link" href="https://syi.mercadolibre.com.ar/sell">Vender</a></li> <li><a class="nav-link" href="http://www.mercadolibre.com.ar/ayuda_home">Ayuda</a></li></ul>

● .nav-link {...} this will evaluate only the elements with the nav-link class, that are fewer, producing a fast search

Side impact

● Selectors not only affect the load time.● The selectors has an impact on reflows● Reflows are triggered when DOM element's

style properties are modified by javascript.● Reflows require that the browser re apply the

rules, which means match all CSS selectors once again

● Inefficient selectors -> slow reflows -> sluggish page

Tradeoff

● Generate more classes and ids to avoid universal selectors add weight to the page.

● More css rules.● More class and id attributes.● Less flexibility of the styles.● Css selector replacing / rewriting is

expensive in time and effort.

Focus on selectors where the key selector matches a large number of elements in the page.

once again!

Selectors with Javascript and JQuery

● Different types, kind of convinations -> Different performance

Selectors JQuery● The best: $("#someId")because the native use of document.getElementById()● Slow: $(".someClassName")because document.getElementsByClassName() is not supported in all browsers IE5-8● The worst: $(":pseudo") or $("[attribute=value]")because there is no native calls.in modern browsers querySelector() querySelectorAll() helps

Selectors JQuery● The best: $("#someId")because the native use of document.getElementById()● Slow: $(".someClassName")because document.getElementsByClassName() is not supported in all browsers IE5-8● The worst: $(":pseudo") or $("[attribute=value]")because there is no native calls.in modern browsers querySelector() querySelectorAll() helps

Selectors JQuery● The best: $("#someId")because the native use of document.getElementById()● Slow: $(".someClassName")because document.getElementsByClassName() is not supported in all browsers IE5-8● The worst: $(":pseudo") or $("[attribute=value]")because there is no native calls.in modern browsers querySelector() querySelectorAll() helps

● http://jsperf.com/santi-selectors-test/4

Id selector

Class selector

Type selector

Attribute selector

Pseudo selector

Jquery object

JSPerf - Test Case Details

JSPerf - Preparation Code

JSPerf - Setup & teardown

JSPerf - Code snippets

JSPerf - Command buttons

JSPerf - Test Runner

JSPerf - Results

JSPerf - Charts

Links● http://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-

from-right-to-left● http://csswizardry.com/2011/09/writing-efficient-css-selectors/● http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/● http://www.stevesouders.com/blog/2009/06/18/simplifying-css-selectors/● http://answers.oreilly.com/topic/647-how-to-write-efficient-css-selectors/● https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS?

redirectlocale=en-US&redirectslug=CSS%2FWriting_Efficient_CSS● http://www.html5rocks.com/en/tutorials/internals/howbrowserswork● http://reference.sitepoint.com/css/cascade● http://caniuse.com/getelementsbyclassname

● http://caniuse.com/queryselector

● Picture: http://www.flickr.com/photos/29008702@N06/5137285917/