Post on 11-Jul-2015
Como os browsers funcionam
Filipi Zimermann @filipiz
A melhor experiência
Do que é composto um browser?
‣WebKit ‣Gecko
‣ Blink ‣ Trident
‣ Tasman ‣ KHTML
‣ Lynx ‣W3M
O processo de renderização
HTML Parser
<html> <body> Hello world </body> </html>
Tokenizer
<html> <body> Hello world </body> </html>
Construção da árvore DOM
Construção da árvore DOM
Construção da árvore DOM
Construção da árvore DOM
HTML Parser Tolerância a erros
if (t->isCloseTag(brTag) && m_document->inCompatMode()) { reportError(MalformedBRError); t->beginTag = true; }
</br> vira <br>
<form> aninhado
if (!m_currentFormElement) { m_currentFormElement = new HTMLFormElement(formTag, m_document); }
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; }
CSS Parser
Aplicando as regras de estilo
Prioridades
1. Browser declarations 2. User normal declarations 3. Author normal declarations 4. Author important declarations 5. User important declarations
Prioridades
‣ Evite seletores longos
‣ Remova as declarações CSS que não são necessárias na página
‣ Utilize seletores específicos
Árvore de Renderização e Layout
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; }
Pintura e composição
Reflow e relayout
10 mandamentos
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
www.nextt.com.br
filipi@nextt.com.br
@filipiz
+55 48 3028.9556
Avenida Desembargador Vítor Lima, 260, Trindade, Florianópolis, SC
Obrigado!