O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
Repaint/Reflow
Renderizando uma página web
Robson Júnior
https://github.com/JSRocksHQ
https://github.com/Webschool-io
HyperText Markup Language
[code]
Cascading Style Sheets
[code]
DOM / CSSOM
DOM
DOM
Document Object Model
● Conversão
● Conversão
● Criação de tokens
● Conversão
● Criação de tokens
● Nodes
● Conversão
● Criação de tokens
● Nodes
● Criação do DOM
O que o
DOM não é ??
● Documento de especificação
binária
● Documento de especificação
binária
● Setar tipo dos dados
● Documento de especificação
binária
● Setar tipo dos dados
● Definir relevância e como
conteúdo será estruturado
O que o DOM
realmente é ??
● Informação Cross Plataform
● Informação Cross Plataform
● Especifica interface
● Informação Cross Plataform
● Especifica interface
● API para este conjunto de
informações.
CSSOM
CSSOM
CSS Object Model
● Bytes → caracteres → tokens → nós → modelo de objeto.
● Bytes → caracteres → tokens → nós → modelo de objeto.
● Marcação HTML é transformada em DOM
● Bytes → caracteres → tokens → nós → modelo de objeto.
● Marcação HTML é transformada em DOM
● Marcação CSS é transformad...
● Bytes → caracteres → tokens → nós → modelo de objeto.
● Marcação HTML é transformada em DOM
● Marcação CSS é transformad...
Render Tree
● Analisa todos nodes
● Analisa todos nodes
● Encontra no CSSOM a regra de cada node
● Analisa todos nodes
● Encontra no CSSOM a regra de cada node
● Devolve os nodes com seus estilos computados
display: none
!==
visibility: hidden
http://jsfiddle.net/robsongajunior/23wu66zf/2/
display: none;
http://jsfiddle.net/robsongajunior/jr526u8k/3/
visibility: h...
* → Absoluto
[video]
● DOM + CSSOM === Render Tree
● DOM + CSSOM === Render Tree
● Render Tree === Nodes para renderização
● DOM + CSSOM === Render Tree
● Render Tree === Nodes para renderização
● LAYOUT === posição + tamanho exato
● DOM + CSSOM === Render Tree
● Render Tree === Nodes para renderização
● LAYOUT === posição + tamanho exato
● PAINT === R...
REPAINT
http://jsfiddle.net/robsongajunior/qugvk4bx/1/
REFLOW
REFLOW
sempre tem
REPAINT
http://jsfiddle.net/gpqjLstv/1/
http://jsperf.com/browser-diet-dom-manipulation/11
DOM
DOM
CSSOM
DOM
CSSOM
Render Tree
Referências
● http://www.w3.org/TR/DOM-Level-2-Core/introduction.html
● https://developers.google.com/web/fundamentals/per...
OBRIGADO
@robsongajunior
Repaint/Reflow/Dom/RenderTree - Renderizando uma página web
Repaint/Reflow/Dom/RenderTree - Renderizando uma página web
Repaint/Reflow/Dom/RenderTree - Renderizando uma página web
Repaint/Reflow/Dom/RenderTree - Renderizando uma página web
Repaint/Reflow/Dom/RenderTree - Renderizando uma página web
Repaint/Reflow/Dom/RenderTree - Renderizando uma página web
Repaint/Reflow/Dom/RenderTree - Renderizando uma página web
Repaint/Reflow/Dom/RenderTree - Renderizando uma página web
Repaint/Reflow/Dom/RenderTree - Renderizando uma página web
Repaint/Reflow/Dom/RenderTree - Renderizando uma página web
Repaint/Reflow/Dom/RenderTree - Renderizando uma página web
Repaint/Reflow/Dom/RenderTree - Renderizando uma página web
Repaint/Reflow/Dom/RenderTree - Renderizando uma página web
Repaint/Reflow/Dom/RenderTree - Renderizando uma página web
Repaint/Reflow/Dom/RenderTree - Renderizando uma página web
Repaint/Reflow/Dom/RenderTree - Renderizando uma página web
Repaint/Reflow/Dom/RenderTree - Renderizando uma página web
Repaint/Reflow/Dom/RenderTree - Renderizando uma página web
Repaint/Reflow/Dom/RenderTree - Renderizando uma página web
Repaint/Reflow/Dom/RenderTree - Renderizando uma página web
Repaint/Reflow/Dom/RenderTree - Renderizando uma página web
Repaint/Reflow/Dom/RenderTree - Renderizando uma página web
Repaint/Reflow/Dom/RenderTree - Renderizando uma página web
Próximos SlideShares
Carregando em…5
×

Repaint/Reflow/Dom/RenderTree - Renderizando uma página web

512 visualizações

Publicada em

Tem o ojetivo de apresentar o processo que acorre no browser até termos uma página renderizada, também iremos ver como depurar e medir os impactos na performance, além disso iremos ver as boas práticas para tal.

Publicada em: Educação
  • Seja o primeiro a comentar

Repaint/Reflow/Dom/RenderTree - Renderizando uma página web

  1. 1. Repaint/Reflow Renderizando uma página web
  2. 2. Robson Júnior
  3. 3. https://github.com/JSRocksHQ
  4. 4. https://github.com/Webschool-io
  5. 5. HyperText Markup Language
  6. 6. [code]
  7. 7. Cascading Style Sheets
  8. 8. [code]
  9. 9. DOM / CSSOM
  10. 10. DOM
  11. 11. DOM Document Object Model
  12. 12. ● Conversão
  13. 13. ● Conversão ● Criação de tokens
  14. 14. ● Conversão ● Criação de tokens ● Nodes
  15. 15. ● Conversão ● Criação de tokens ● Nodes ● Criação do DOM
  16. 16. O que o DOM não é ??
  17. 17. ● Documento de especificação binária
  18. 18. ● Documento de especificação binária ● Setar tipo dos dados
  19. 19. ● Documento de especificação binária ● Setar tipo dos dados ● Definir relevância e como conteúdo será estruturado
  20. 20. O que o DOM realmente é ??
  21. 21. ● Informação Cross Plataform
  22. 22. ● Informação Cross Plataform ● Especifica interface
  23. 23. ● Informação Cross Plataform ● Especifica interface ● API para este conjunto de informações.
  24. 24. CSSOM
  25. 25. CSSOM CSS Object Model
  26. 26. ● Bytes → caracteres → tokens → nós → modelo de objeto.
  27. 27. ● Bytes → caracteres → tokens → nós → modelo de objeto. ● Marcação HTML é transformada em DOM
  28. 28. ● Bytes → caracteres → tokens → nós → modelo de objeto. ● Marcação HTML é transformada em DOM ● Marcação CSS é transformada em CSSOM
  29. 29. ● Bytes → caracteres → tokens → nós → modelo de objeto. ● Marcação HTML é transformada em DOM ● Marcação CSS é transformada em CSSOM ● DOM e CSSOM são estruturas de dados independentes.
  30. 30. Render Tree
  31. 31. ● Analisa todos nodes
  32. 32. ● Analisa todos nodes ● Encontra no CSSOM a regra de cada node
  33. 33. ● Analisa todos nodes ● Encontra no CSSOM a regra de cada node ● Devolve os nodes com seus estilos computados
  34. 34. display: none !== visibility: hidden
  35. 35. http://jsfiddle.net/robsongajunior/23wu66zf/2/ display: none; http://jsfiddle.net/robsongajunior/jr526u8k/3/ visibility: hidden;
  36. 36. * → Absoluto
  37. 37. [video]
  38. 38. ● DOM + CSSOM === Render Tree
  39. 39. ● DOM + CSSOM === Render Tree ● Render Tree === Nodes para renderização
  40. 40. ● DOM + CSSOM === Render Tree ● Render Tree === Nodes para renderização ● LAYOUT === posição + tamanho exato
  41. 41. ● DOM + CSSOM === Render Tree ● Render Tree === Nodes para renderização ● LAYOUT === posição + tamanho exato ● PAINT === Render Tree renderizado
  42. 42. REPAINT
  43. 43. http://jsfiddle.net/robsongajunior/qugvk4bx/1/
  44. 44. REFLOW
  45. 45. REFLOW sempre tem REPAINT
  46. 46. http://jsfiddle.net/gpqjLstv/1/
  47. 47. http://jsperf.com/browser-diet-dom-manipulation/11
  48. 48. DOM
  49. 49. DOM CSSOM
  50. 50. DOM CSSOM Render Tree
  51. 51. Referências ● http://www.w3.org/TR/DOM-Level-2-Core/introduction.html ● https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object- model?hl=en ● https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object- model?hl=pt-br#css-object-model-cssom ● http://dev.w3.org/csswg/cssom/ ● https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction ● http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/ ● https://developers.google.com/web/fundamentals/performance/critical-rendering-path/measure-crp?hl=en ● https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp?hl=en ● https://developers.google.com/web/fundamentals/performance/critical-rendering-path/optimizing-critical-rendering- path?hl=en ● http://browserdiet.com/pt/ ● https://www.youtube.com/watch?v=jw4tVn7CRcI ● https://www.youtube.com/watch?v=a2_6bGNZ7bA ● https://developer.mozilla.org/pt-BR/docs/Tools/Paint_Flashing_Tool ● https://www.youtube.com/watch?v=gZH1d2Co1X0 ● https://www.youtube.com/watch?v=aH9eVa2cTcM
  52. 52. OBRIGADO @robsongajunior

×