O documento descreve o processo de renderização de páginas web, incluindo a conversão de HTML em DOM, CSS em CSSOM, e a combinação desses modelos de objeto em uma árvore de renderização. A árvore de renderização é então usada para calcular layout e pintar a página renderizada. Mudanças no DOM ou CSSOM podem exigir repintes ou reflows para manter a sincronia.

1. Repaint/Reflow
Renderizando uma página web

2. Robson Júnior

6. https://github.com/JSRocksHQ

7. https://github.com/Webschool-io

9. HyperText Markup Language

11. [code]

13. Cascading Style Sheets

15. [code]

17. DOM / CSSOM

20. DOM

21. DOM
Document Object Model

22. ● Conversão

23. ● Conversão
● Criação de tokens

24. ● Conversão
● Criação de tokens
● Nodes

25. ● Conversão
● Criação de tokens
● Nodes
● Criação do DOM

27. O que o
DOM não é ??

28. ● Documento de especificação
binária

29. ● Documento de especificação
binária
● Setar tipo dos dados

30. ● Documento de especificação
binária
● Setar tipo dos dados
● Definir relevância e como
conteúdo será estruturado

31. O que o DOM
realmente é ??

32. ● Informação Cross Plataform

33. ● Informação Cross Plataform
● Especifica interface

34. ● Informação Cross Plataform
● Especifica interface
● API para este conjunto de
informações.

36. CSSOM

37. CSSOM
CSS Object Model

40. ● Bytes → caracteres → tokens → nós → modelo de objeto.

41. ● Bytes → caracteres → tokens → nós → modelo de objeto.
● Marcação HTML é transformada em DOM

42. ● Bytes → caracteres → tokens → nós → modelo de objeto.
● Marcação HTML é transformada em DOM
● Marcação CSS é transformada em CSSOM

43. ● 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.

44. Render Tree

45. ● Analisa todos nodes

46. ● Analisa todos nodes
● Encontra no CSSOM a regra de cada node

47. ● Analisa todos nodes
● Encontra no CSSOM a regra de cada node
● Devolve os nodes com seus estilos computados

48. display: none
!==
visibility: hidden

51. http://jsfiddle.net/robsongajunior/23wu66zf/2/
display: none;
http://jsfiddle.net/robsongajunior/jr526u8k/3/
visibility: hidden;

52. * → Absoluto

54. [video]

55. ● DOM + CSSOM === Render Tree

56. ● DOM + CSSOM === Render Tree
● Render Tree === Nodes para renderização

57. ● DOM + CSSOM === Render Tree
● Render Tree === Nodes para renderização
● LAYOUT === posição + tamanho exato

58. ● DOM + CSSOM === Render Tree
● Render Tree === Nodes para renderização
● LAYOUT === posição + tamanho exato
● PAINT === Render Tree renderizado

59. REPAINT

60. http://jsfiddle.net/robsongajunior/qugvk4bx/1/

61. REFLOW

62. REFLOW
sempre tem
REPAINT

63. http://jsfiddle.net/gpqjLstv/1/

64. http://jsperf.com/browser-diet-dom-manipulation/11

67. DOM

68. DOM
CSSOM

69. DOM
CSSOM
Render Tree

74. 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

75. OBRIGADO
@robsongajunior