Baixar para ler offline
![[Old] Curso de programação web dia 01](https://cdn.slidesharecdn.com/ss_thumbnails/oldcursodeprogramaowebdia01-171108165635-thumbnail.jpg?width=640&height=640&fit=bounds)
Como os browsers funcionam - Front in Floripa 2014
- 1. Como os browsersfuncionam
- 3.
- 7.
- 8. Do que é composto um browser?
- 10. ‣ WebKit ‣Gecko ‣ Blink ‣ Trident ‣ Tasman ‣ KHTML ‣ Lynx ‣W3M
- 11. O processo de renderização
- 14.
- 15. Tokenizer <html> <body> Hello world </body> </html>
- 16. Construção da árvoreDOM <html> <body> Hello world </body> </html>
- 17.
- 18.
- 19.
- 20. HTML Parser Tolerânciaa 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 tagsaninhadas 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.
- 27. Aplicando as regrasde estilo
- 30. Prioridades 1. Browserdeclarations 2. User normal declarations 3. Author normal declarations 4. Author important declarations 5. User important declarations
- 31.
- 32. ‣ Evite seletoreslongos ‣ Remova as declarações CSS que não são necessárias na página ‣ Utilize seletores específicos
- 33. Árvore de Renderizaçãoe 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; }
- 36.
- 38.
- 40.
- 42. 1. Não mexano 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