Otimização de Seletores

2,528 views

Published on

A API de manipulação do DOM é a mais lenta e inconsistente entre browsers que os programadores client têm acesso. Conheça e saiba como funciona uma engine de seleção de elementos DOM (Slick, Sizzle, micro-selector, etc), onde elas são usadas e como otimizar seletores CSS nessas engines para comparação e busca de elementos.

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

No Downloads
Views
Total views
2,528
On SlideShare
0
From Embeds
0
Number of Embeds
728
Actions
Shares
0
Downloads
26
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Otimização de Seletores

    1. 1. Seletoresjunho de 2011
    2. 2. Fábio Miranda Costaglobo.com@portalpadroesMootools core developer @fabiomiranda github.com/fabiomcosta
    3. 3. Seletores1. Introdução2. Engines de seleção3. Otimização
    4. 4. O que é“It’s the part of a CSS rulethat matches a set ofelements in an HTML orXML document” http://reference.sitepoint.com/css/selectorref
    5. 5. Exemplos1. #id2. .class-name3. div4. [attribute=”attribute-value”]5. #id > .class + [data-attr=”value”]
    6. 6. Exemplos CSS31. div ~ pre2. :disabled / :enabled3. :nth-child(2n)4. :nth-of-type(2n)5. :not(div)
    7. 7. Exemplo no HTML #id div.class span[data-attr=”attr”]1 <div id="id">2 <div class="class">3 <span data-attr=”attr”>texto</span>4 <span>span</span>5 </div>6 </div>
    8. 8. Não somente para CSS1. CSS (Cascading Style Sheets)2. Selecionar elementos no DOM3. Comparação com um elemento do DOM4. Selecionar elementos em um JSON5. etc...
    9. 9. Dissecando uma expressão Seletor simplesdiv#id.class[attr]:hover > a::after, div + strong Separador Pseudo-elemento Combinador Pseudo-classe Seletor de atributo Seletor de classe Seletor de idSeletor de tipo
    10. 10. Seletores1. Introdução2. Engines de seleção3. Otimização
    11. 11. O que são?São implementações deseleção e/ou comparaçãode elementos comseletores CSS usando a APIdo DOM
    12. 12. Por que?1. Cross-browser2. Bugs na API nativa (querySelectorAll)3. Extensível4. XML
    13. 13. Algumas Engines1. Slick (Mootools)2. Sizzle (jQuery)3. Acme (dojo)4. NWMatcher5. micro-selector (http://microjs.com/#css)6. querySelectorAll (nativa)
    14. 14. Suportehttp://selectivizr.com/
    15. 15. Seletores1. Introdução2. Engines de seleção3. Otimização
    16. 16. Por que?“When you look forproblems in your JavaScriptmost likely its the DOMthats slowing you down.”Stoyan Stefanov - http://www.phpied.com/dom-access-optimization/
    17. 17. Toll bridge John HrvatinStoyan Stefanov - http://www.phpied.com/dom-access-optimization/
    18. 18. Navegador / Implementação DOM Ecma Chrome Webcore V8 Firefox Gecko SpiderMonkey IE Trident JScriptStoyan Stefanov - http://www.phpied.com/dom-access-optimization/
    19. 19. Abordagens de seleção1. top-down 1 <div> 2 <p>2. bottom-up 3 4 <a href="#"></a> <span></span> 5 <span></span> 6 </p> 7 <p> 8 <span></span> 9 <span></span> 10 <span></span> 11 </p>div p > span 12 </div>
    20. 20. Considerações para os próximos slides1. IE <= 7 •getElementById, getElementsByTagName •parentNode, firstChild, previousSibling, nextSibling2. HTML
    21. 21. Top-down1. #id vs div#id2. .class vs div.class3. #id > * vs #id > .class4. .class ~ * vs .class ~ #id.class5. div.class a.classe vs .class a.classe
    22. 22. Top-down1. #id vs div#id2. .class vs div.class3. #id > * vs #id > .class4. .class ~ * vs .class ~ #id.class5. div.class a.classe vs .class a.classe
    23. 23. Top-down1. #id vs div#id2. .class vs div.class3. #id > * vs #id > .class4. .class ~ * vs .class ~ #id.class5. div.class a.classe vs .class a.classe
    24. 24. Top-down1. #id vs div#id2. .class vs div.class3. #id > * vs #id > .class4. .class ~ * vs .class ~ #id.class5. div.class a.classe vs .class a.classe
    25. 25. Top-down1. #id vs div#id2. .class vs div.class3. #id > * vs #id > .class4. .class ~ * vs .class ~ #id.class5. div.class a.classe vs .class a.classe
    26. 26. Top-down1. #id vs div#id2. .class vs div.class3. #id > * vs #id > .class4. .class ~ * vs .class ~ #id.class5. div.class a.classe vs .class a.classe
    27. 27. Bottom-up e Comparação1. #id vs div#id2. .class vs div.class3. #id > * vs #id > .class4. .class ~ * vs .class ~ #id.class5. div.class a.classe vs .class a.classe
    28. 28. Bottom-up e Comparação1. #id vs div#id2. .class vs div.class3. #id > * vs #id > .class4. .class ~ * vs .class ~ #id.class5. div.class a.classe vs .class a.classe
    29. 29. Bottom-up e Comparação1. #id vs div#id2. .class vs div.class3. #id > * vs #id > .class4. .class ~ * vs .class ~ #id.class5. div.class a.classe vs .class a.classe
    30. 30. Bottom-up e Comparação1. #id vs div#id2. .class vs div.class3. #id > * vs #id > .class4. .class ~ * vs .class ~ #id.class5. div.class a.classe vs .class a.classe
    31. 31. Bottom-up e Comparação1. #id vs div#id2. .class vs div.class3. #id > * vs #id > .class4. .class ~ * vs .class ~ #id.class5. div.class a.classe vs .class a.classe
    32. 32. Bottom-up e Comparação1. #id vs div#id2. .class vs div.class3. #id > * vs #id > .class4. .class ~ * vs .class ~ #id.class5. div.class a.classe vs .class a.classe
    33. 33. Boas práticas de otimização1. Evitar seletores não especificados pela W3C (ex. :first, :input, :text, ...)2. Definir um contexto com ID3. Conheça sua Engine de seleção4. Ter o mínimo de elementos possível no DOM5. Ser o menos específico possível
    34. 34. abc1. abc2. abc3. abc Fábio Miranda Costa @fabiomiranda github.com/fabiomcosta fabiomcosta@gmail.com flickr.com/photos/dietpoison/1696163469/

    ×