Como os browsers funcionam - Front in Floripa 2014

535 visualizações

Publicada em

Slides da minha palestra no Front in Floripa 2014

How Browsers Work
Slides from my talk on Front in Floripa 2014

Publicada em: Tecnologia
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
535
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
4
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Como os browsers funcionam - Front in Floripa 2014

  1. 1. Como os browsers funcionam
  2. 2. Filipi Zimermann @filipiz
  3. 3. A melhor experiência
  4. 4. Do que é composto um browser?
  5. 5. ‣ WebKit ‣ Gecko ‣ Blink ‣ Trident ‣ Tasman ‣ KHTML ‣ Lynx ‣W3M
  6. 6. O processo de renderização
  7. 7. HTML Parser
  8. 8. Tokenizer <html> <body> Hello world </body> </html>
  9. 9. Construção da árvore DOM <html> <body> Hello world </body> </html>
  10. 10. Construção da árvore DOM
  11. 11. Construção da árvore DOM
  12. 12. Construção da árvore DOM
  13. 13. HTML Parser Tolerância a erros
  14. 14. </br> vira <br> if (t->isCloseTag(brTag) && m_document->inCompatMode()) { reportError(MalformedBRError); t->beginTag = true; }
  15. 15. <form> aninhado if (!m_currentFormElement) { m_currentFormElement = new HTMLFormElement(formTag, m_document); }
  16. 16. Limite de tags aninhadas bool HTMLParser::allowNestedRedundantTag(const AtomicString& tagName) { ! unsigned i = 0; for (HTMLStackElem* curr = m_blockStack; i < cMaxRedundantTagDepth && curr && curr->tagName == tagName; curr = curr->next, i++) { } return i != cMaxRedundantTagDepth; }
  17. 17. CSS Parser
  18. 18. Aplicando as regras de estilo
  19. 19. Prioridades 1. Browser declarations 2. User normal declarations 3. Author normal declarations 4. Author important declarations 5. User important declarations
  20. 20. Prioridades
  21. 21. ‣ Evite seletores longos ‣ Remova as declarações CSS que não são necessárias na página ‣ Utilize seletores específicos
  22. 22. Árvore de Renderização e Layout
  23. 23. RenderObject* RenderObject::createObject(Node* node, RenderStyle* style) { Document* doc = node->document(); RenderArena* arena = doc->renderArena(); ... RenderObject* o = 0; ! switch (style->display()) { case NONE: break; case INLINE: o = new (arena) RenderInline(node); break; case BLOCK: o = new (arena) RenderBlock(node); break; case INLINE_BLOCK: o = new (arena) RenderBlock(node); break; case LIST_ITEM: o = new (arena) RenderListItem(node); break; ... } ! return o; }
  24. 24. Pintura e composição
  25. 25. Reflow e relayout
  26. 26. 10 mandamentos
  27. 27. 1. Não mexa no DOM 2. Minimize áreas de reflow 3. Guarde referências para elementos do DOM em variáveis locais 4. Agrupe mudanças de estilo (de preferência apenas modificando classe) 5. Evite pegar info de layout (posicionamento, dimensão e espaçamento) 6. Quanto menos elementos melhor 7. Quanto menos CSS melhor 8. Cuidado com eventos complexos 9. Anime elementos position absolute ou fixed 10.Não mexa no DOM
  28. 28. Obrigado! www.nextt.com.br filipi@nextt.com.br @filipiz +55 48 3028.9556 Avenida Desembargador Vítor Lima, 260, Trindade, Florianópolis, SC

×