Upgrade to Pro — share decks privately, control downloads, hide ads and more …

DOM, CSSOM e RenderThree - Introdução ao Browser Render Path

DOM, CSSOM e RenderThree - Introdução ao Browser Render Path

Entender como funciona o processo de renderização do browser é simples e ajuda bastante na hora de pensar em performance. Nessa apresentação, mostro um pouco sobre esse processo.

1bf877955dc2e43662320fd3b0280166?s=128

Diego Eis

June 21, 2015
Tweet

Transcript

  1. BROWSER RENDER PATH

  2. Diego Eis I love work with web. And I lost

    37 pounds. ;-) @diegoeis @tableless http://tableless.com.br http://medium.com/@diegoeis http://slideshare.net/diegoeis
  3. None
  4. http://bit.ly / livro-como-ser-frontend

  5. None
  6. LOCAWEB OPEN SOURCE locaweb.github.io

  7. None
  8. performance as a feature

  9. Processo O browser segue uma série de passos para transformar

    os dados da sua página em pixels na tela.
  10. DOM CSSOM RenderTree Layout Paint

  11. Document Object Model Uma representação estruturada de documentos HTML e

    XML. Essa estrutura pode ser acessada por scripts e linguagens de programação, possibilitando a mudança de estrutura do documento, estilo e conteúdo.
  12. Dados / Caracteres Tokens Nodes DOM

  13. Dados / Caracteres <html><head><title>DOM</ title><meta charset=“utf-8”></ head><body><p>Olá <span>dev</ span> Maroto!</p></body></html>

  14. Tokens < html > StartTag: html / EndTag: html

  15. Tokens StartTag: html StartTag: head tag: title tag: meta EndTag:

    head StartTag: body StartTag: p dev EndTag: body EndTag: html StartTag: span EndTag: span EndTag: p Olá maroto
  16. html head body meta title p dev span maroto Olá

    Nodes DOM
  17. <html> <head> <title>HTML</title> <meta charset="utf-8"> </head> <body> <p>Olá <span>dev</span> maroto!</p>

    </body> </html>
  18. DOM e JS O JavaScript não manipula o HTML, ele

    manipula o DOM. Você escreve JavaScript, mas usa o DOM para acessar o documento e seus elementos. O DOM não é uma linguagem de programação, mas sem ele, o JavaScript não teria um modelo da página para manipular.
  19. paragraphs = document.getElementsByTagName("P"); console.log(paragraphs[0].nodeName); —— >> “P”

  20. E a semântica?

  21. CSSOM Basicamente o CSSOM é uma representação da formatação do

    documento. Ele lista as instruções e regras de estilos dos elementos.
  22. Dados / Caracteres Tokens Nodes CSSOM

  23. body {font-size: 16px; background-color: #ccc;} p {color: #fff;} span {border:

    1px solid red;} Dados / Caracteres
  24. body p font-size: 16px; background-color: #ccc; color: #fff; span border:

    1px solid red; Nodes
  25. CSSOM body p font-size: 16px; background-color: #ccc; color: #fff; font-weight:

    bold; div span color: #fff; color: #ccc; ul li list-style: none; font-size: 20px;
  26. Por que o CSSOM tem formato de árvore? Quando o

    browser carrega todos os estilos dos objetos da página, o browser aplica os estilos da regra mais genérica, recursivamente, para a mais específica, refinando os estilos aplicados. Por isso o termo Cascading (Cascata) no nome CSS.
  27. Cascata e Especificidade

  28. body p font-size: 16px; background-color: #ccc; font-size: 16px; color: #fff;

    font-weight: bold; div span font-size: 16px; font-weight: bold; color: #fff; font-size: 16px; color: #ccc; ul li font-size: 16px; color: #ccc; font-size: 16px; color: #ccc; font-size: 20px;
  29. 1 Aplicação das regras básicas do Browser 2 Declarações customizadas

    do usuário 3 Declarações normais (genéricas) do dev 3.1 Regras mais específicas 3.2 !important
  30. p { background: orange; } div.content p { background: red;

    } #main div.content p { background: blue; }
  31. 0 0 0 0 elementos IDs classes !important

  32. 0 0 1 2 div.content p 0 1 1 2

    #main div.content p
  33. p { background: orange !important; } div.content p { background:

    red; } #main div.content p { background: blue; }
  34. p { background: orange !important; } div.content p { background:

    red !important; } #main div.content p { background: blue; }
  35. p { background: orange !important; } div.content p { background:

    red !important; } #main div.content p { background: blue !important; }
  36. Cuidado com o !important. Ele é coisa do capiroto!

  37. RenderTree Quando o DOM e o CSSOM são calculados, os

    dois se juntam na RenderTree, onde são computados o layout de cada elemento visível no documento. 3
  38. font-size: 16px; color: #fff; font-size: 16px; color: #fff; border: 1px

    solid red; p font-size: 16px; color: #fff; Olá span p span maroto Olá dev font-size: 16px; color: #fff; border: 1px solid red; span p maroto DOM dev CSSOM Render Tree
  39. Somente os elementos visíveis

  40. font-size: 16px; color: #fff; font-size: 16px; color: #fff; display: none;

    p font-size: 16px; color: #fff; Olá p span maroto Olá dev span p maroto DOM CSSOM Render Tree
  41. visibility vs display A propriedade visibility é diferente da propriedade

    display. No caso do visibility, o elemento é renderizado, mas não é visível.
  42. Layout Também conhecido como refluxo. Nessa fase o browser calcula

    o tamanho dos elementos e os posiciona. 4
  43. header { width: 100%; } sidebar { width: 25%; }

    article { width: 75%; }
  44. SIDEBAR 25% ARTICLE 75% HEADER 100%

  45. Todas as medidas relativas são transformadas em medidas absolutas

  46. SIDEBAR 250px ARTICLE 750px HEADER 1000px

  47. IMAGEM Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras

    venenatis turpis nec diam tempus convallis eu ac lorem. Integer at ultrices velit, a ultricies odio. Donec eu ex luctus, maximus ante et, dictum leo. Proin ullamcorper ante id dolor viverra, id scelerisque arcu sodales. Maecenas est risus, blandit in nunc eu, ornare maximus est. Nunc nec erat et diam ultricies pellentesque consectetur non turpis. Quisque at auctor massa. Mauris a venenatis enim, nec maximus ex. In dictum odio nisl, eget commodo dui tristique id. Sed fringilla laoreet ligula at aliquam. Suspendisse sit amet nisi ligula. Cras viverra quis arcu mattis aliquet. Sed et nibh a nunc hendrerit interdum a ut lacus. Integer id turpis viverra ex vulputate tincidunt sit amet eget mauris. Praesent eu fermentum nunc, vitae scelerisque elit. Etiam vel eros libero. Phasellus et nunc lectus. Nulla sit amet iaculis felis, a dignissim ipsum. Sed consequat suscipit ipsum, quis euismod mauris commodo in. Fusce aliquet sollicitudin ultrices. Pellentesque vitae lorem mauris. Aliquam varius risus ut leo rutrum vehicula. Nulla tempor nisl mollis, facilisis arcu quis, tempus risus. Suspendisse sed turpis elit. Morbi dignissim sed metus nec luctus. Vestibulum interdum mattis aliquet. Duis facilisis mauris rutrum purus euismod pretium. Nam justo leo, lacinia id dapibus id, bibendum at neque. Sed finibus ipsum sed est commodo, in accumsan lacus luctus. Sed eget lobortis tellus. Aliquam tristique et orci nec ornare. Mauris eu vulputate eros. Etiam ac hendrerit leo, non imperdiet lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis turpis nec diam tempus convallis eu ac lorem. Integer at ultrices velit, a ultricies odio. Donec eu ex luctus, maximus ante et, dictum leo. Proin ullamcorper ante id dolor viverra, id scelerisque arcu sodales. Maecenas est risus, blandit in nunc eu, ornare maximus est.
  48. Paint Sabendo o tamanho e a posição de cada elemento,

    agora o browser renderiza os pixels na tela.
  49. 1 background-color 2 background-image 3 border 4 Aí ele pinta

    o filho, seguindo os mesmos passos
  50. 1 Canvas / Root 2 Elemento descendente de Root 1

    background-color 2 background-image 3 border 3 Elemento filho
  51. Para definir a prioridade de pintura, o browser analisa a

    ordem dos elementos e seus filhos: quem está mais próximo do canvas, é pintado primeiro
  52. canvas z-index: -1 0 1

  53. None
  54. None
  55. Causando Reflow e Repaint

  56. Reflow Quando você modifica qualquer coisa no DOM, como a

    posição dos elementos, quando você cria, remove ou esconde elementos com display: none. Essas tarefas fazem o browser ter que recalcular a geometria e a posição dos elementos e seus descendentes.
  57. Repaint Ocorre quando você modifica qualquer característica visual dos elementos

    ou seus descendentes. Quando você muda background, font, borda, esconde com visibility, muda padding, margin, etc…
  58. Resumo da parada louca

  59. 1 Inicia a construção do DOM parseando o HTML 2

    Constrói o CSSOM parseando o CSS 3 Faz o merge do DOM e do CSSOM na Render Tree 4 Computa a geometria e posição de cada nó do HTML 5 Pinta os elementos individualmente na tela
  60. 1 Inicia a construção do DOM parseando o HTML 2

    Faz o request do CSS e do JS que encontra no head 3 Constrói o CSSOM parseando o CSS 4 Executa o JS, porque ele pode modificar o DOM antes de virar HTML 5 Faz o merge do DOM e do CSSOM na Render Tree 6 Roda o Layout (calcula geometria e posição) e o Paint (mostra na tela)
  61. CSS bloqueante Por padrão o CSS é um recurso que

    faz o browser pausar o processo de renderização do conteúdo até que o CSSOM seja construído. Mas o browser é esperto e entende quais CSS são bloqueadores.
  62. <!-- Este é bloqueante --> <link href="style.css"> <!-- Este só

    é carregado na impressão --> <link href="print.css" media="print"> <!-- E este só quando a condição for verdadeira --> <link href="mobile.css" media="(max-width: 980px)">
  63. JS bloqueante O JavaScript é bloqueante por que ele pode

    modificar o DOM e o CSSOM; A sua execução bloqueia o CSSOM; E também bloqueia o DOM, a menos que seja declarado como async.
  64. <script> <script defer> <script async> renderização download do JS execução

    do JS pausa na renderização
  65. TL;DR

  66. Ferramentas O inspector do Chrome é uma das melhores ferramentas

    para monitorar e analisar a render path do browser. O site WebPageTest também é um grande aliado.
  67. None
  68. None
  69. Coloque o CSS no HEAD Todos os CSS devem ser

    especificados o mais cedo possível. Colocando no HEAD, o browser descobre seus CSS de maneira mais rápida.
  70. Não use CSS imports O browser só descobre que há

    outros CSSs quando ele baixa o CSS com @import e parseia, só depois ele busca os arquivos de CSS importados.
  71. Prefira JS com async JavaScript com async não bloquea a

    renderização do HTML e do CSSOM.
  72. Use defer nos JS que não forem essenciais Qualquer script

    não essencial, ou seja, que não seja crítico para a construção inicial da página deve ser atrasado para economizar trabalho de renderização.
  73. Goodbye! Let me know what you think! @diegoeis @tableless http://tableless.com.br

    http://medium.com/@diegoeis http://slideshare.net/diegoeis