Selectors Performance
- 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!
- 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