Selectors Performance
Upcoming SlideShare
Loading in...5
×
 

Selectors Performance

on

  • 322 views

Front end optimization focused on CSS selectors

Front end optimization focused on CSS selectors

Statistics

Views

Total Views
322
Slideshare-icon Views on SlideShare
322
Embed Views
0

Actions

Likes
0
Downloads
5
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Selectors Performance Selectors Performance Presentation Transcript

    • 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. 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 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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/