SlideShare uma empresa Scribd logo
1 de 34
Seletores
junho de 2011
Fábio Miranda Costa
globo.com@portalpadroes
Mootools core developer




                   @fabiomiranda
          github.com/fabiomcosta
Seletores


1. Introdução

2. Engines de seleção

3. Otimização
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
Exemplos


1. #id

2. .class-name

3. div

4. [attribute=”attribute-value”]

5. #id > .class + [data-attr=”value”]
Exemplos CSS3


1. div ~ pre

2. :disabled / :enabled

3. :nth-child(2n)

4. :nth-of-type(2n)

5. :not(div)
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>
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...
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
Seletores


1. Introdução

2. Engines de seleção

3. Otimização
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
Por que?


1. Cross-browser

2. Bugs na API nativa (querySelectorAll)

3. Extensível

4. XML
Algumas Engines


1. Slick (Mootools)

2. Sizzle (jQuery)

3. Acme (dojo)

4. NWMatcher

5. micro-selector (http://microjs.com/#css)

6. querySelectorAll (nativa)
Suporte




http://selectivizr.com/
Seletores


1. Introdução

2. Engines de seleção

3. Otimização
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/
Toll bridge



                         John Hrvatin




Stoyan Stefanov - http://www.phpied.com/dom-access-optimization/
Navegador / Implementação


                             DOM                  Ecma


       Chrome              Webcore                 V8


        Firefox             Gecko            SpiderMonkey


          IE                Trident              JScript


Stoyan Stefanov - http://www.phpied.com/dom-access-optimization/
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>
Considerações para os próximos slides


1. IE <= 7

 •getElementById, getElementsByTagName
 •parentNode, firstChild, previousSibling,
 nextSibling

2. HTML
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
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
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
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
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
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
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
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
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
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
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
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
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
abc


1. abc

2. abc

3. abc


         Fábio Miranda Costa
                        @fabiomiranda
               github.com/fabiomcosta
               fabiomcosta@gmail.com
                 flickr.com/photos/dietpoison/1696163469/

Mais conteúdo relacionado

Semelhante a Otimização de Seletores

Gerenciamento de projetos com o Apache Ant
Gerenciamento de projetos com o Apache AntGerenciamento de projetos com o Apache Ant
Gerenciamento de projetos com o Apache Ant
Denis L Presciliano
 

Semelhante a Otimização de Seletores (20)

performance em jQuery apps
performance em jQuery appsperformance em jQuery apps
performance em jQuery apps
 
SUIT CSS como padrão de escrita de estilos
SUIT CSS como padrão de escrita de estilosSUIT CSS como padrão de escrita de estilos
SUIT CSS como padrão de escrita de estilos
 
Selenium - WebDriver
Selenium - WebDriverSelenium - WebDriver
Selenium - WebDriver
 
Simplificando o Javascrip
Simplificando o JavascripSimplificando o Javascrip
Simplificando o Javascrip
 
HTML&CSS 3 - Introduction to CSS
HTML&CSS 3 - Introduction to CSSHTML&CSS 3 - Introduction to CSS
HTML&CSS 3 - Introduction to CSS
 
HTML & CSS - Aula 3
HTML & CSS - Aula 3 HTML & CSS - Aula 3
HTML & CSS - Aula 3
 
Introdução ao selenium
Introdução ao seleniumIntrodução ao selenium
Introdução ao selenium
 
MiniCurso Jquery - IV SimSis
MiniCurso Jquery - IV SimSisMiniCurso Jquery - IV SimSis
MiniCurso Jquery - IV SimSis
 
Doctrine for dummies
Doctrine for dummiesDoctrine for dummies
Doctrine for dummies
 
Gerenciamento de projetos com o Apache Ant
Gerenciamento de projetos com o Apache AntGerenciamento de projetos com o Apache Ant
Gerenciamento de projetos com o Apache Ant
 
Gerenciamento de projetos com o Apache Ant
Gerenciamento de projetos com o Apache AntGerenciamento de projetos com o Apache Ant
Gerenciamento de projetos com o Apache Ant
 
XHTML Básico
XHTML BásicoXHTML Básico
XHTML Básico
 
Evento Front End SP - Arquitetura de Front
Evento Front End SP - Arquitetura de FrontEvento Front End SP - Arquitetura de Front
Evento Front End SP - Arquitetura de Front
 
GBD Pattern
GBD PatternGBD Pattern
GBD Pattern
 
HTML & CSS - Aula 5
HTML & CSS - Aula 5HTML & CSS - Aula 5
HTML & CSS - Aula 5
 
Apresentação sobre Bootstrap na Maratona de Inovação ISITEC 2017
Apresentação sobre Bootstrap na Maratona de Inovação ISITEC 2017Apresentação sobre Bootstrap na Maratona de Inovação ISITEC 2017
Apresentação sobre Bootstrap na Maratona de Inovação ISITEC 2017
 
Como Perder Peso (no browser)
Como Perder Peso (no browser)Como Perder Peso (no browser)
Como Perder Peso (no browser)
 
HTML & CSS - Aula 2
HTML & CSS - Aula 2HTML & CSS - Aula 2
HTML & CSS - Aula 2
 
Slides .pptx.pdf
Slides .pptx.pdfSlides .pptx.pdf
Slides .pptx.pdf
 
Novidades do Django 1.2 e o que vem por ai
Novidades do Django 1.2 e o que vem por aiNovidades do Django 1.2 e o que vem por ai
Novidades do Django 1.2 e o que vem por ai
 

Último

Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Dirceu Resende
 

Último (7)

Apostila e caderno de exercicios de WORD
Apostila e caderno de exercicios de  WORDApostila e caderno de exercicios de  WORD
Apostila e caderno de exercicios de WORD
 
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIAEAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
 
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdfFrom_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
 
Entrevistas, artigos, livros & citações de Paulo Pagliusi
Entrevistas, artigos, livros & citações de Paulo PagliusiEntrevistas, artigos, livros & citações de Paulo Pagliusi
Entrevistas, artigos, livros & citações de Paulo Pagliusi
 
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
 
Palestras sobre Cibersegurança em Eventos - Paulo Pagliusi
Palestras sobre Cibersegurança em Eventos - Paulo PagliusiPalestras sobre Cibersegurança em Eventos - Paulo Pagliusi
Palestras sobre Cibersegurança em Eventos - Paulo Pagliusi
 
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
 

Otimização de Seletores

  • 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)
  • 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/

Notas do Editor

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n