2. Types sorted by performance
● Types sorted by performance / souders
1. 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
3. 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
4. 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?
5. Example reading left to right
document
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
6. Example reading left to right
document
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
7. Example reading left to right
document
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
8. Example reading right to left
document
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
9. Example reading right to left
document
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
10. Example reading right to left
document
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
11. 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
12. 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
13. 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
14. 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
15. Focus on selectors where the key selector
matches a large number of elements in the
page.
... Too much tips, i lost the focus
16. 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
17. 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
18. 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
19. 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.
20. Focus on selectors where the key selector
matches a large number of elements in the
page.
once again!
21. Selectors with Javascript and
JQuery
● Different types, kind of convinations ->
Different performance
22. 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
23. 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
24. 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