Your SlideShare is downloading. ×
  • Like
Otimização de Seletores
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Otimização de Seletores

  • 2,240 views
Published

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, …

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,240
On SlideShare
0
From Embeds
0
Number of Embeds
6

Actions

Shares
Downloads
24
Comments
0
Likes
10

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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

Transcript

  • 1. Seletoresjunho de 2011
  • 2. Fábio Miranda Costaglobo.com@portalpadroesMootools core developer @fabiomiranda github.com/fabiomcosta
  • 3. Seletores1. Introdução2. Engines de seleção3. Otimização
  • 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. Exemplos1. #id2. .class-name3. div4. [attribute=”attribute-value”]5. #id > .class + [data-attr=”value”]
  • 6. Exemplos CSS31. div ~ pre2. :disabled / :enabled3. :nth-child(2n)4. :nth-of-type(2n)5. :not(div)
  • 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. 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. 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. Seletores1. Introdução2. Engines de seleção3. Otimização
  • 11. O que são?São implementações deseleção e/ou comparaçãode elementos comseletores CSS usando a APIdo DOM
  • 12. Por que?1. Cross-browser2. Bugs na API nativa (querySelectorAll)3. Extensível4. XML
  • 13. Algumas Engines1. Slick (Mootools)2. Sizzle (jQuery)3. Acme (dojo)4. NWMatcher5. micro-selector (http://microjs.com/#css)6. querySelectorAll (nativa)
  • 14. Suportehttp://selectivizr.com/
  • 15. Seletores1. Introdução2. Engines de seleção3. Otimização
  • 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. Toll bridge John HrvatinStoyan Stefanov - http://www.phpied.com/dom-access-optimization/
  • 18. Navegador / Implementação DOM Ecma Chrome Webcore V8 Firefox Gecko SpiderMonkey IE Trident JScriptStoyan Stefanov - http://www.phpied.com/dom-access-optimization/
  • 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. Considerações para os próximos slides1. IE <= 7 •getElementById, getElementsByTagName •parentNode, firstChild, previousSibling, nextSibling2. HTML
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. abc1. abc2. abc3. abc Fábio Miranda Costa @fabiomiranda github.com/fabiomcosta fabiomcosta@gmail.com flickr.com/photos/dietpoison/1696163469/