Selectors
Santiago Aimetta
Types sorted by performance
● Types sorted by performance / souders
1. ID, i.e. #header
2. Class, i.e. .promo
3. Type, i.e...
Performance impact
● "The impact of CSS selectors on
performance derives from the amount of
time it takes the browser to m...
How selectors works
● Browsers read selectors right to left
● Example: #div-1 a
○ We read #div-1 with an a
○ Browser reads...
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...
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...
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...
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...
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...
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...
How selectors works
● When the browser is trying to style an
element has to discard style rules fast
● Starting for the ri...
Key Selector
● Rightmost part of the selector
● #some-id .some-class {...}
● div .some-class a {...}
● .some-class * {...}...
Tips to efficient selectors
● Avoid universal rules *:
○ Try to avoid universal selectors like *, adjacent
sibling, child,...
Tips to efficient selectors
● Avoid descendant selectors:
○ They are one of the most expensive to process
● Avoid tag chil...
Focus on selectors where the key selector
matches a large number of elements in the
page.
... Too much tips, i lost the fo...
Tunning selectors
● Example
<ul id="nav-links">
<li><a href="http://login.mercadolibre.com.ar">Ingresar</a> </li>
<li><a h...
Tunning selectors
● Example
<ul id="nav-links">
<li><a class="nav-link" href="http://login.mercadolibre.com.ar">Ingresar</...
Side impact
● Selectors not only affect the load time.
● The selectors has an impact on reflows
● Reflows are triggered wh...
Tradeoff
● Generate more classes and ids to avoid
universal selectors add weight to the page.
● More css rules.
● More cla...
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")...
Selectors JQuery
● The best: $("#someId")
because the native use of document.
getElementById()
● Slow: $(".someClassName")...
Selectors JQuery
● The best: $("#someId")
because the native use of document.
getElementById()
● Slow: $(".someClassName")...
● 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://csswiz...
Selectors Performance
Upcoming SlideShare
Loading in...5
×

Selectors Performance

279

Published on

Front end optimization focused on CSS selectors

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
279
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Selectors Performance

  1. 1. Selectors Santiago Aimetta
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 20. Focus on selectors where the key selector matches a large number of elements in the page. once again!
  21. 21. Selectors with Javascript and JQuery ● Different types, kind of convinations -> Different performance
  22. 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. 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. 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
  25. 25. ● http://jsperf.com/santi-selectors-test/4
  26. 26. Id selector
  27. 27. Class selector
  28. 28. Type selector
  29. 29. Attribute selector
  30. 30. Pseudo selector
  31. 31. Jquery object
  32. 32. JSPerf - Test Case Details
  33. 33. JSPerf - Preparation Code
  34. 34. JSPerf - Setup & teardown
  35. 35. JSPerf - Code snippets
  36. 36. JSPerf - Command buttons
  37. 37. JSPerf - Test Runner
  38. 38. JSPerf - Results
  39. 39. JSPerf - Charts
  40. 40. 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/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×