Como os browsers funcionam - Front in Floripa 2014

43
Como os browsers funcionam

Transcript of Como os browsers funcionam - Front in Floripa 2014

Page 1: Como os browsers funcionam - Front in Floripa 2014

Como os browsers funcionam

Page 2: Como os browsers funcionam - Front in Floripa 2014
Page 3: Como os browsers funcionam - Front in Floripa 2014

Filipi Zimermann @filipiz

Page 4: Como os browsers funcionam - Front in Floripa 2014
Page 5: Como os browsers funcionam - Front in Floripa 2014
Page 6: Como os browsers funcionam - Front in Floripa 2014
Page 7: Como os browsers funcionam - Front in Floripa 2014

A melhor experiência

Page 8: Como os browsers funcionam - Front in Floripa 2014

Do que é composto um browser?

Page 9: Como os browsers funcionam - Front in Floripa 2014
Page 10: Como os browsers funcionam - Front in Floripa 2014

‣WebKit ‣Gecko

‣ Blink ‣ Trident

‣ Tasman ‣ KHTML

‣ Lynx ‣W3M

Page 11: Como os browsers funcionam - Front in Floripa 2014

O processo de renderização

Page 12: Como os browsers funcionam - Front in Floripa 2014
Page 13: Como os browsers funcionam - Front in Floripa 2014
Page 14: Como os browsers funcionam - Front in Floripa 2014

HTML Parser

Page 15: Como os browsers funcionam - Front in Floripa 2014

<html> <body> Hello world </body> </html>

Tokenizer

Page 16: Como os browsers funcionam - Front in Floripa 2014

<html> <body> Hello world </body> </html>

Construção da árvore DOM

Page 17: Como os browsers funcionam - Front in Floripa 2014

Construção da árvore DOM

Page 18: Como os browsers funcionam - Front in Floripa 2014

Construção da árvore DOM

Page 19: Como os browsers funcionam - Front in Floripa 2014

Construção da árvore DOM

Page 20: Como os browsers funcionam - Front in Floripa 2014

HTML Parser Tolerância a erros

Page 21: Como os browsers funcionam - Front in Floripa 2014
Page 22: Como os browsers funcionam - Front in Floripa 2014

if (t->isCloseTag(brTag) && m_document->inCompatMode()) { reportError(MalformedBRError); t->beginTag = true; }

</br> vira <br>

Page 23: Como os browsers funcionam - Front in Floripa 2014

<form> aninhado

if (!m_currentFormElement) { m_currentFormElement = new HTMLFormElement(formTag, m_document); }

Page 24: Como os browsers funcionam - Front in Floripa 2014

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; }

Page 25: Como os browsers funcionam - Front in Floripa 2014

CSS Parser

Page 26: Como os browsers funcionam - Front in Floripa 2014
Page 27: Como os browsers funcionam - Front in Floripa 2014

Aplicando as regras de estilo

Page 28: Como os browsers funcionam - Front in Floripa 2014
Page 29: Como os browsers funcionam - Front in Floripa 2014
Page 30: Como os browsers funcionam - Front in Floripa 2014

Prioridades

1. Browser declarations 2. User normal declarations 3. Author normal declarations 4. Author important declarations 5. User important declarations

Page 31: Como os browsers funcionam - Front in Floripa 2014

Prioridades

Page 32: Como os browsers funcionam - Front in Floripa 2014

‣ Evite seletores longos

‣ Remova as declarações CSS que não são necessárias na página

‣ Utilize seletores específicos

Page 33: Como os browsers funcionam - Front in Floripa 2014

Árvore de Renderização e Layout

Page 34: Como os browsers funcionam - Front in Floripa 2014
Page 35: Como os browsers funcionam - Front in Floripa 2014

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; }

Page 36: Como os browsers funcionam - Front in Floripa 2014

Pintura e composição

Page 37: Como os browsers funcionam - Front in Floripa 2014
Page 38: Como os browsers funcionam - Front in Floripa 2014

Reflow e relayout

Page 39: Como os browsers funcionam - Front in Floripa 2014
Page 40: Como os browsers funcionam - Front in Floripa 2014

10 mandamentos

Page 41: Como os browsers funcionam - Front in Floripa 2014
Page 42: Como os browsers funcionam - Front in Floripa 2014

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

Page 43: Como os browsers funcionam - Front in Floripa 2014

www.nextt.com.br

[email protected]

@filipiz

+55 48 3028.9556

Avenida Desembargador Vítor Lima, 260, Trindade, Florianópolis, SC

Obrigado!