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