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.
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
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.
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
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.
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.
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
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 marotoOlá
dev
font-size: 16px;
color: #fff;
border: 1px solid red;
span
p
maroto
DOM
dev
CSSOM
Render Tree
40. font-size: 16px;
color: #fff;
font-size: 16px;
color: #fff;
display: none;
p
font-size: 16px;
color: #fff;
Olá
p
span marotoOlá
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.
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.
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…
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.
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.
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