Upload
diego-eis
View
506
Download
0
Embed Size (px)
Citation preview
Diego EisI love work with web. And I lost 37 pounds. ;-)
@diegoeis @tableless
http://tableless.com.br http://medium.com/@diegoeis http://slideshare.net/diegoeis
ProcessoO browser segue uma série de passos para transformar os dados da sua página em pixels na tela.
Document Object ModelUma 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.
Dados / Caracteres
<html><head><title>DOM</title><meta charset=“utf-8”></head><body><p>Olá <span>dev</span> Maroto!</p></body></html>
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
<html> <head>
<title>HTML</title> <meta charset="utf-8">
</head> <body>
<p>Olá <span>dev</span> maroto!</p>
</body></html>
DOM e JSO 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.
CSSOMBasicamente o CSSOM é uma representação da formatação do documento. Ele lista as instruções e regras de estilos dos elementos.
body {font-size: 16px; background-color: #ccc;} p {color: #fff;} span {border: 1px solid red;}
Dados / Caracteres
CSSOM
body
p
font-size: 16px;background-color: #ccc;
color: #fff;font-weight: bold; div
spancolor: #fff;
color: #ccc;
ul
li
list-style: none;
font-size: 20px;
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.
body
p
font-size: 16px;background-color: #ccc;
font-size: 16px;color: #fff;font-weight: bold;
div
spanfont-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;
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
p { background: orange !important;}
div.content p { background: red;}
#main div.content p { background: blue;}
p { background: orange !important;}
div.content p { background: red !important;}
#main div.content p { background: blue;}
p { background: orange !important;}
div.content p { background: red !important;}
#main div.content p { background: blue !important;}
RenderTreeQuando 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
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
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
visibility vs displayA propriedade visibility é diferente da propriedade display. No caso do visibility, o elemento é renderizado, mas não é visível.
LayoutTambém conhecido como refluxo. Nessa fase o browser calcula o tamanho dos elementos e os posiciona.4
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.
1 Canvas / Root
2 Elemento descendente de Root
1 background-color
2 background-image
3 border
3 Elemento filho
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
ReflowQuando 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.
RepaintOcorre 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…
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
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)
CSS bloqueantePor 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.
<!-- 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)">
JS bloqueanteO 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.
<script>
<script defer>
<script async>
renderização
download do JS
execução do JS
pausa na renderização
FerramentasO inspector do Chrome é uma das melhores ferramentas para monitorar e analisar a render path do browser. O site WebPageTest também é um grande aliado.
Coloque o CSS no HEADTodos os CSS devem ser especificados o mais cedo possível. Colocando no HEAD, o browser descobre seus CSS de maneira mais rápida.
Não use CSS importsO 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.
Use defer nos JS que não forem essenciaisQualquer 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.
Goodbye!Let me know what you think!
@diegoeis @tableless
http://tableless.com.br http://medium.com/@diegoeis http://slideshare.net/diegoeis