Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Andere mochten auch
Andere mochten auch (10)
Ähnlich wie Como os navegadores funcionam: renderização, layout e desempenho
Ähnlich wie Como os navegadores funcionam: renderização, layout e desempenho (20)
Como os navegadores funcionam: renderização, layout e desempenho
- 1. Como os browsers funcionam
- 8. Do que é composto um browser?
- 10. ‣ WebKit ‣ Gecko ‣ Blink ‣ Trident ‣ Tasman ‣ KHTML ‣ Lynx ‣W3M
- 11. O processo de renderização
- 14. HTML Parser
- 15. Tokenizer <html> <body> Hello world </body> </html>
- 16. Construção da árvore DOM <html> <body> Hello world </body> </html>
- 17. Construção da árvore DOM
- 18. Construção da árvore DOM
- 19. Construção da árvore DOM
- 20. HTML Parser Tolerância a erros
- 22. </br> vira <br> if (t->isCloseTag(brTag) && m_document->inCompatMode()) { reportError(MalformedBRError); t->beginTag = true; }
- 23. <form> aninhado if (!m_currentFormElement) { m_currentFormElement = new HTMLFormElement(formTag, m_document); }
- 24. 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; }
- 25. CSS Parser
- 27. Aplicando as regras de estilo
- 30. Prioridades 1. Browser declarations 2. User normal declarations 3. Author normal declarations 4. Author important declarations 5. User important declarations
- 31. Prioridades
- 32. ‣ Evite seletores longos ‣ Remova as declarações CSS que não são necessárias na página ‣ Utilize seletores específicos
- 33. Árvore de Renderização e Layout
- 35. 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; }
- 40. 10 mandamentos
- 42. 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
- 43. Obrigado! www.nextt.com.br filipi@nextt.com.br @filipiz +55 48 3028.9556 Avenida Desembargador Vítor Lima, 260, Trindade, Florianópolis, SC