O documento discute otimização de seletores CSS, explicando que engines de seleção implementam seleção de elementos usando a API do DOM de forma cross-browser. A otimização é importante porque acesso ao DOM é o que mais desacelera JavaScript. Abordagens top-down e bottom-up de seleção são comparadas, assim como considerações para expressões de seletores mais específicas. Boas práticas incluem evitar seletores não padronizados e definir contexto, entre outras.

1. Seletores
junho de 2011

2. Fábio Miranda Costa
globo.com@portalpadroes
Mootools core developer
@fabiomiranda
github.com/fabiomcosta

3. Seletores
1. Introdução
2. Engines de seleção
3. Otimização

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. Exemplos
1. #id
2. .class-name
3. div
4. [attribute=”attribute-value”]
5. #id > .class + [data-attr=”value”]

6. Exemplos CSS3
1. div ~ pre
2. :disabled / :enabled
3. :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 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. 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. Seletores
1. Introdução
2. Engines de seleção
3. Otimização

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. Por que?
1. Cross-browser
2. Bugs na API nativa (querySelectorAll)
3. Extensível
4. XML

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. Suporte
http://selectivizr.com/

15. Seletores
1. Introdução
2. Engines de seleção
3. Otimização

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. Toll bridge
John Hrvatin
Stoyan Stefanov - http://www.phpied.com/dom-access-optimization/

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. 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. Considerações para os próximos slides
1. IE <= 7
•getElementById, getElementsByTagName
•parentNode, firstChild, previousSibling,
nextSibling
2. HTML

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. abc
1. abc
2. abc
3. abc
Fábio Miranda Costa
@fabiomiranda
github.com/fabiomcosta
fabiomcosta@gmail.com
flickr.com/photos/dietpoison/1696163469/