Renderizando uma página web

Aborda assuntos como:

* HTML
* CSS
* DOM
* CSSOM
* REPAINT
* REFLOW

Tudo isso de uma forma que conseguimos entender todo o trabalho que o navegador tem para renderizar uma página web.

Transcript

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