DOM

O que é DOM?

DOM

O que é DOM?

  - Document Object Model

  - Representação estruturada das marcações HTML

  - É acessível via API

DOM

CSSOM

O que é CSSOM?

CSSOM

O que é CSSOM?

  - CSS Object Model

  - Representação estruturada das regras de CSS

CSSOM

Render Tree

O que é Render Tree?

Render Tree

O que é Render Tree?

  - É uma árvore que o browser guarda internamente para representar os elementos visuais

  - Contém somente os nós necessários para renderizar a página

Render Tree

Render Tree

Repaint e Reflow

Qual a diferença entre Repaint e Reflow?

Repaint e Reflow

O que é Reflow?

Repaint e Reflow

O que é Reflow?

  - É o processo de recalcular o posicionamento dos elementos 

  - Ocorre toda vez que o navegador precisa recalcular o posicionamento dos elementos, após o carregamento inicial

Repaint e Reflow

O que é Repaint?

Repaint e Reflow

O que é Repaint?

  - É o processo de 'repintar' os elementos

  - Ocorre toda vez que o navegador precisa modificar visualmente um elemento, porém sem alterar sua posição ou dimensão

Repaint e Reflow

CSS Reflow - Firefox Download Page

  - https://www.youtube.com/watch?v=z9Cps2QEh-k

CSS Reflow google.com

  - https://www.youtube.com/watch?v=4bZrJwxVPS8

Performance

Como medir performance?

Network

Timeline