Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Otimização de Seletores

Otimização de Seletores

Herunterladen, um offline zu lesen

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.

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.

Weitere Verwandte Inhalte

Ähnliche Bücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Otimização de Seletores

  1. 1. Seletores junho de 2011
  2. 2. Fábio Miranda Costa globo.com@portalpadroes Mootools core developer @fabiomiranda github.com/fabiomcosta
  3. 3. Seletores 1. Introdução 2. Engines de seleção 3. Otimização
  4. 4. O que é “It’s the part of a CSS rule that matches a set of elements in an HTML or XML document” http://reference.sitepoint.com/css/selectorref
  5. 5. Exemplos 1. #id 2. .class-name 3. div 4. [attribute=”attribute-value”] 5. #id > .class + [data-attr=”value”]
  6. 6. Exemplos CSS3 1. div ~ pre 2. :disabled / :enabled 3. :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 CSS 1. CSS (Cascading Style Sheets) 2. Selecionar elementos no DOM 3. Comparação com um elemento do DOM 4. Selecionar elementos em um JSON 5. etc...
  9. 9. Dissecando uma expressão Seletor simples div#id.class[attr]:hover > a::after, div + strong Separador Pseudo-elemento Combinador Pseudo-classe Seletor de atributo Seletor de classe Seletor de id Seletor de tipo
  10. 10. Seletores 1. Introdução 2. Engines de seleção 3. Otimização
  11. 11. O que são? São implementações de seleção e/ou comparação de elementos com seletores CSS usando a API do DOM
  12. 12. Por que? 1. Cross-browser 2. Bugs na API nativa (querySelectorAll) 3. Extensível 4. XML
  13. 13. Algumas Engines 1. Slick (Mootools) 2. Sizzle (jQuery) 3. Acme (dojo) 4. NWMatcher 5. micro-selector (http://microjs.com/#css) 6. querySelectorAll (nativa)
  14. 14. Suporte http://selectivizr.com/
  15. 15. Seletores 1. Introdução 2. Engines de seleção 3. Otimização
  16. 16. Por que? “When you look for problems in your JavaScript most likely it's the DOM that's slowing you down.” Stoyan Stefanov - http://www.phpied.com/dom-access-optimization/
  17. 17. Toll bridge John Hrvatin Stoyan Stefanov - http://www.phpied.com/dom-access-optimization/
  18. 18. Navegador / Implementação DOM Ecma Chrome Webcore V8 Firefox Gecko SpiderMonkey IE Trident JScript Stoyan Stefanov - http://www.phpied.com/dom-access-optimization/
  19. 19. Abordagens de seleção 1. 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 slides 1. IE <= 7 •getElementById, getElementsByTagName •parentNode, firstChild, previousSibling, nextSibling 2. HTML
  21. 21. Top-down 1. #id vs div#id 2. .class vs div.class 3. #id > * vs #id > .class 4. .class ~ * vs .class ~ #id.class 5. div.class a.classe vs .class a.classe
  22. 22. Top-down 1. #id vs div#id 2. .class vs div.class 3. #id > * vs #id > .class 4. .class ~ * vs .class ~ #id.class 5. div.class a.classe vs .class a.classe
  23. 23. Top-down 1. #id vs div#id 2. .class vs div.class 3. #id > * vs #id > .class 4. .class ~ * vs .class ~ #id.class 5. div.class a.classe vs .class a.classe
  24. 24. Top-down 1. #id vs div#id 2. .class vs div.class 3. #id > * vs #id > .class 4. .class ~ * vs .class ~ #id.class 5. div.class a.classe vs .class a.classe
  25. 25. Top-down 1. #id vs div#id 2. .class vs div.class 3. #id > * vs #id > .class 4. .class ~ * vs .class ~ #id.class 5. div.class a.classe vs .class a.classe
  26. 26. Top-down 1. #id vs div#id 2. .class vs div.class 3. #id > * vs #id > .class 4. .class ~ * vs .class ~ #id.class 5. div.class a.classe vs .class a.classe
  27. 27. Bottom-up e Comparação 1. #id vs div#id 2. .class vs div.class 3. #id > * vs #id > .class 4. .class ~ * vs .class ~ #id.class 5. div.class a.classe vs .class a.classe
  28. 28. Bottom-up e Comparação 1. #id vs div#id 2. .class vs div.class 3. #id > * vs #id > .class 4. .class ~ * vs .class ~ #id.class 5. div.class a.classe vs .class a.classe
  29. 29. Bottom-up e Comparação 1. #id vs div#id 2. .class vs div.class 3. #id > * vs #id > .class 4. .class ~ * vs .class ~ #id.class 5. div.class a.classe vs .class a.classe
  30. 30. Bottom-up e Comparação 1. #id vs div#id 2. .class vs div.class 3. #id > * vs #id > .class 4. .class ~ * vs .class ~ #id.class 5. div.class a.classe vs .class a.classe
  31. 31. Bottom-up e Comparação 1. #id vs div#id 2. .class vs div.class 3. #id > * vs #id > .class 4. .class ~ * vs .class ~ #id.class 5. div.class a.classe vs .class a.classe
  32. 32. Bottom-up e Comparação 1. #id vs div#id 2. .class vs div.class 3. #id > * vs #id > .class 4. .class ~ * vs .class ~ #id.class 5. div.class a.classe vs .class a.classe
  33. 33. Boas práticas de otimização 1. Evitar seletores não especificados pela W3C (ex. :first, :input, :text, ...) 2. Definir um contexto com ID 3. Conheça sua Engine de seleção 4. Ter o mínimo de elementos possível no DOM 5. Ser o menos específico possível
  34. 34. abc 1. abc 2. abc 3. abc Fábio Miranda Costa @fabiomiranda github.com/fabiomcosta fabiomcosta@gmail.com flickr.com/photos/dietpoison/1696163469/

Hinweis der Redaktion

  • \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

×