Os browsers funcionam renderizando HTML em uma árvore DOM e aplicando estilos CSS. Isso envolve processar o HTML para construir a árvore DOM, aplicar regras de CSS, criar uma árvore de renderização e realizar layout e pintura. Manter o DOM e CSS simples ajuda a melhorar a performance.
30. Prioridades
1. Browser declarations
2. User normal declarations
3. Author normal declarations
4. Author important declarations
5. User important declarations
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;
}
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