SlideShare una empresa de Scribd logo
1 de 73
Descargar para leer sin conexión
BROWSER RENDER PATH
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
DOM, CSSOM e RenderThree - Introdução ao Browser Render Path
http://bit.ly / livro-como-ser-frontend
DOM, CSSOM e RenderThree - Introdução ao Browser Render Path
LOCAWEB
OPEN SOURCE
locaweb.github.io
DOM, CSSOM e RenderThree - Introdução ao Browser Render Path
performance
as a feature
Processo
O browser segue uma série de passos para transformar os
dados da sua página em pixels na tela.
DOM
CSSOM
RenderTree
Layout
Paint
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.
Dados / Caracteres
Tokens
Nodes
DOM
Dados / Caracteres
<html><head><title>DOM</
title><meta charset=“utf-8”></
head><body><p>Olá <span>dev</
span> Maroto!</p></body></html>
Tokens
< html >
StartTag: html
/
EndTag: 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 body
meta title p
dev
span
marotoOlá
NodesDOM
<html>
<head>
<title>HTML</title>
<meta charset="utf-8">
</head>
<body>
<p>Olá <span>dev</span> maroto!</p>
</body>
</html>
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.
paragraphs = document.getElementsByTagName("P");
console.log(paragraphs[0].nodeName);
——
>> “P”
E a semântica?
CSSOM
Basicamente o CSSOM é uma representação da formatação
do documento. Ele lista as instruções e regras de estilos dos
elementos.
Dados / Caracteres
Tokens
Nodes
CSSOM
body {font-size: 16px;
background-color: #ccc;} p
{color: #fff;} span {border: 1px
solid red;}
Dados / Caracteres
body
p
font-size: 16px;
background-color: #ccc;
color: #fff;
span border: 1px solid red;
Nodes
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.
Cascata e Especificidade
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;
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;
}
div.content p {
background: red;
}
#main div.content p {
background: blue;
}
0 0 0 0
elementosIDs
classes!important
0 0 1 2
div.content p
0 1 1 2
#main div.content p
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;
}
Cuidado com o !important.
Ele é coisa do capiroto!
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
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
Somente os elementos
visíveis
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
visibility vs display
A propriedade visibility é diferente da propriedade display.
No caso do visibility, o elemento é renderizado, mas não é
visível.
Layout
Também conhecido como refluxo. Nessa fase o browser
calcula o tamanho dos elementos e os posiciona.
4
header {
width: 100%;
}
sidebar {
width: 25%;
}
article {
width: 75%;
}
SIDEBAR
25%
ARTICLE
75%
HEADER 100%
Todas as medidas relativas
são transformadas em
medidas absolutas
SIDEBAR
250px
ARTICLE
750px
HEADER 1000px
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.
Paint
Sabendo o tamanho e a posição de cada elemento, agora
o browser renderiza os pixels na tela.
1 background-color
2 background-image
3 border
4 Aí ele pinta o filho, seguindo os mesmos passos
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
canvas
z-index:
-1
0
1
DOM, CSSOM e RenderThree - Introdução ao Browser Render Path
DOM, CSSOM e RenderThree - Introdução ao Browser Render Path
Causando Reflow e Repaint
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.
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…
Resumo da parada louca
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 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.
<!-- 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 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.
<script>
<script defer>
<script async>
renderização
download do JS
execução do JS
pausa na renderização
TL;DR
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.
DOM, CSSOM e RenderThree - Introdução ao Browser Render Path
DOM, CSSOM e RenderThree - Introdução ao Browser Render Path
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.
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.
Prefira JS com async
JavaScript com async não bloquea a renderização do HTML
e do CSSOM.
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.
Goodbye!
Let me know what you think!
@diegoeis
@tableless
http://tableless.com.br
http://medium.com/@diegoeis
http://slideshare.net/diegoeis

Más contenido relacionado

La actualidad más candente

Guia do Front-end das Galáxias
Guia do Front-end das GaláxiasGuia do Front-end das Galáxias
Guia do Front-end das GaláxiasDavidson Fellipe
 
Construindo um framework CSS
Construindo um framework CSSConstruindo um framework CSS
Construindo um framework CSSDiego Eis
 
JavaScript e o perfil do desenvolvedor front end das atualidades mais atuais
JavaScript e o perfil do desenvolvedor front end das atualidades mais atuaisJavaScript e o perfil do desenvolvedor front end das atualidades mais atuais
JavaScript e o perfil do desenvolvedor front end das atualidades mais atuaisWilliam Oliveira
 
Engenharia de front end de alta performance
Engenharia de front end de alta performanceEngenharia de front end de alta performance
Engenharia de front end de alta performanceAnderson Solano
 
Design para WordPress- Anyssa Ferreira - WordCamp BH 2015
Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015
Design para WordPress- Anyssa Ferreira - WordCamp BH 2015Anyssa Ferreira
 
Você não precisa de uma sopa de letrinhas para criar web apps
Você não precisa de uma sopa de letrinhas para criar web appsVocê não precisa de uma sopa de letrinhas para criar web apps
Você não precisa de uma sopa de letrinhas para criar web appsWilliam Oliveira
 
Como criar seu próprio Framework
Como criar seu próprio FrameworkComo criar seu próprio Framework
Como criar seu próprio FrameworkHiarison Gigante
 
Html5,css3,javascript o lugar onde sonhos se tornam realidade.
Html5,css3,javascript   o lugar onde sonhos se tornam realidade.Html5,css3,javascript   o lugar onde sonhos se tornam realidade.
Html5,css3,javascript o lugar onde sonhos se tornam realidade.Edmo Jeova
 
Responsive Web Design - Introdução
Responsive Web Design - IntroduçãoResponsive Web Design - Introdução
Responsive Web Design - IntroduçãoVítor Teixeira
 
Introdução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web DesignIntrodução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web DesignGustavo Zimmermann
 
WordCampBH 2015 - O mínimo essencial para o bom desempenho do seu projeto em ...
WordCampBH 2015 - O mínimo essencial para o bom desempenho do seu projeto em ...WordCampBH 2015 - O mínimo essencial para o bom desempenho do seu projeto em ...
WordCampBH 2015 - O mínimo essencial para o bom desempenho do seu projeto em ...Sergio Costa
 
CSS - Cansei de Ser Subestimado
CSS - Cansei de Ser SubestimadoCSS - Cansei de Ser Subestimado
CSS - Cansei de Ser SubestimadoAnyssa Ferreira
 
Acessibilidade para web
Acessibilidade para webAcessibilidade para web
Acessibilidade para webDiego Eis
 
Introdução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX DesignIntrodução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX DesignGustavo Zimmermann
 
Web Design > HTML (aula 1)
Web Design > HTML (aula 1)Web Design > HTML (aula 1)
Web Design > HTML (aula 1)Felipe Fernandes
 
Tudo o que você precisa saber sobre layouts para web
Tudo o que você precisa saber sobre layouts para webTudo o que você precisa saber sobre layouts para web
Tudo o que você precisa saber sobre layouts para webÍtalo Waxman
 
Bootstrap, desenvolvendo uma interface responsiva na prática!
Bootstrap, desenvolvendo uma interface responsiva na prática!Bootstrap, desenvolvendo uma interface responsiva na prática!
Bootstrap, desenvolvendo uma interface responsiva na prática!Cristofer Sousa
 

La actualidad más candente (20)

Guia do Front-end das Galáxias
Guia do Front-end das GaláxiasGuia do Front-end das Galáxias
Guia do Front-end das Galáxias
 
Construindo um framework CSS
Construindo um framework CSSConstruindo um framework CSS
Construindo um framework CSS
 
JavaScript e o perfil do desenvolvedor front end das atualidades mais atuais
JavaScript e o perfil do desenvolvedor front end das atualidades mais atuaisJavaScript e o perfil do desenvolvedor front end das atualidades mais atuais
JavaScript e o perfil do desenvolvedor front end das atualidades mais atuais
 
Estruturação Web
Estruturação WebEstruturação Web
Estruturação Web
 
Engenharia de front end de alta performance
Engenharia de front end de alta performanceEngenharia de front end de alta performance
Engenharia de front end de alta performance
 
Design para WordPress- Anyssa Ferreira - WordCamp BH 2015
Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015
Design para WordPress- Anyssa Ferreira - WordCamp BH 2015
 
Você não precisa de uma sopa de letrinhas para criar web apps
Você não precisa de uma sopa de letrinhas para criar web appsVocê não precisa de uma sopa de letrinhas para criar web apps
Você não precisa de uma sopa de letrinhas para criar web apps
 
Como criar seu próprio Framework
Como criar seu próprio FrameworkComo criar seu próprio Framework
Como criar seu próprio Framework
 
Web Design Responsivo
Web Design ResponsivoWeb Design Responsivo
Web Design Responsivo
 
Desempenho web
Desempenho webDesempenho web
Desempenho web
 
Html5,css3,javascript o lugar onde sonhos se tornam realidade.
Html5,css3,javascript   o lugar onde sonhos se tornam realidade.Html5,css3,javascript   o lugar onde sonhos se tornam realidade.
Html5,css3,javascript o lugar onde sonhos se tornam realidade.
 
Responsive Web Design - Introdução
Responsive Web Design - IntroduçãoResponsive Web Design - Introdução
Responsive Web Design - Introdução
 
Introdução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web DesignIntrodução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web Design
 
WordCampBH 2015 - O mínimo essencial para o bom desempenho do seu projeto em ...
WordCampBH 2015 - O mínimo essencial para o bom desempenho do seu projeto em ...WordCampBH 2015 - O mínimo essencial para o bom desempenho do seu projeto em ...
WordCampBH 2015 - O mínimo essencial para o bom desempenho do seu projeto em ...
 
CSS - Cansei de Ser Subestimado
CSS - Cansei de Ser SubestimadoCSS - Cansei de Ser Subestimado
CSS - Cansei de Ser Subestimado
 
Acessibilidade para web
Acessibilidade para webAcessibilidade para web
Acessibilidade para web
 
Introdução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX DesignIntrodução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX Design
 
Web Design > HTML (aula 1)
Web Design > HTML (aula 1)Web Design > HTML (aula 1)
Web Design > HTML (aula 1)
 
Tudo o que você precisa saber sobre layouts para web
Tudo o que você precisa saber sobre layouts para webTudo o que você precisa saber sobre layouts para web
Tudo o que você precisa saber sobre layouts para web
 
Bootstrap, desenvolvendo uma interface responsiva na prática!
Bootstrap, desenvolvendo uma interface responsiva na prática!Bootstrap, desenvolvendo uma interface responsiva na prática!
Bootstrap, desenvolvendo uma interface responsiva na prática!
 

Destacado

Um pequeno estudo sobre a microsoft
Um pequeno estudo sobre a microsoftUm pequeno estudo sobre a microsoft
Um pequeno estudo sobre a microsoftDiego Eis
 
UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?Diego Eis
 
O básico sobre Web Semântica, JSON-LD e Linked Data
O básico sobre Web Semântica, JSON-LD e Linked DataO básico sobre Web Semântica, JSON-LD e Linked Data
O básico sobre Web Semântica, JSON-LD e Linked DataDiego Eis
 
CSS 4 - What's coming up
CSS 4 - What's coming upCSS 4 - What's coming up
CSS 4 - What's coming upDiego Eis
 
Flexbox and Grid Layout: How you will structure layouts tomorrow.
Flexbox and Grid Layout: How you will structure layouts tomorrow.Flexbox and Grid Layout: How you will structure layouts tomorrow.
Flexbox and Grid Layout: How you will structure layouts tomorrow.Diego Eis
 
Sass: Estilo levado à sério
Sass: Estilo levado à sérioSass: Estilo levado à sério
Sass: Estilo levado à sérioGabriel Nunes
 
Interface é código: aprimorando a experiência do usuário no front e no back-end
Interface é código: aprimorando a experiência do usuário no front e no back-endInterface é código: aprimorando a experiência do usuário no front e no back-end
Interface é código: aprimorando a experiência do usuário no front e no back-endTalita Pagani
 
Introdução a testes de usabilidade - 11º Diverso Design
Introdução a testes de usabilidade - 11º Diverso DesignIntrodução a testes de usabilidade - 11º Diverso Design
Introdução a testes de usabilidade - 11º Diverso DesignTalita Pagani
 
WAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na webWAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na webDiego Eis
 
ISP - The Interface Segregation Principle
ISP - The Interface Segregation Principle ISP - The Interface Segregation Principle
ISP - The Interface Segregation Principle Thiago c?ar
 
BIG PLOTTER Gráfica Digital
BIG PLOTTER Gráfica DigitalBIG PLOTTER Gráfica Digital
BIG PLOTTER Gráfica Digitalluperalva
 
Jogos com NodeJS e Browser - QCON SP 2011
Jogos com NodeJS e Browser - QCON SP 2011Jogos com NodeJS e Browser - QCON SP 2011
Jogos com NodeJS e Browser - QCON SP 2011Emerson Macedo
 
Apresentação
ApresentaçãoApresentação
Apresentaçãosayma vm
 
Suportes de mídia digital para produção editorial
Suportes de mídia digital para produção editorialSuportes de mídia digital para produção editorial
Suportes de mídia digital para produção editorialGuilherme Carvalho
 
WCM 2009-TT19 3 M-Programa ISP Integração dos Serviços de Terceirizados
WCM 2009-TT19 3 M-Programa ISP Integração dos Serviços de TerceirizadosWCM 2009-TT19 3 M-Programa ISP Integração dos Serviços de Terceirizados
WCM 2009-TT19 3 M-Programa ISP Integração dos Serviços de TerceirizadosEXCELLENCE CONSULTING
 
Interface é código: aprimorando a experiência do usuário no front e no back-end
Interface é código: aprimorando a experiência do usuário no front e no back-endInterface é código: aprimorando a experiência do usuário no front e no back-end
Interface é código: aprimorando a experiência do usuário no front e no back-endTalita Pagani
 
O que é um browser
O que é um browserO que é um browser
O que é um browserLeonor Costa
 
APIs: The Problems with Eating your Own Dog Food
APIs: The Problems with Eating your Own Dog FoodAPIs: The Problems with Eating your Own Dog Food
APIs: The Problems with Eating your Own Dog FoodPhil Calçado
 
Structuring apps in Scala
Structuring apps in ScalaStructuring apps in Scala
Structuring apps in ScalaPhil Calçado
 

Destacado (20)

Um pequeno estudo sobre a microsoft
Um pequeno estudo sobre a microsoftUm pequeno estudo sobre a microsoft
Um pequeno estudo sobre a microsoft
 
UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?
 
O básico sobre Web Semântica, JSON-LD e Linked Data
O básico sobre Web Semântica, JSON-LD e Linked DataO básico sobre Web Semântica, JSON-LD e Linked Data
O básico sobre Web Semântica, JSON-LD e Linked Data
 
CSS 4 - What's coming up
CSS 4 - What's coming upCSS 4 - What's coming up
CSS 4 - What's coming up
 
Flexbox and Grid Layout: How you will structure layouts tomorrow.
Flexbox and Grid Layout: How you will structure layouts tomorrow.Flexbox and Grid Layout: How you will structure layouts tomorrow.
Flexbox and Grid Layout: How you will structure layouts tomorrow.
 
Sass: Estilo levado à sério
Sass: Estilo levado à sérioSass: Estilo levado à sério
Sass: Estilo levado à sério
 
Interface é código: aprimorando a experiência do usuário no front e no back-end
Interface é código: aprimorando a experiência do usuário no front e no back-endInterface é código: aprimorando a experiência do usuário no front e no back-end
Interface é código: aprimorando a experiência do usuário no front e no back-end
 
Introdução a testes de usabilidade - 11º Diverso Design
Introdução a testes de usabilidade - 11º Diverso DesignIntrodução a testes de usabilidade - 11º Diverso Design
Introdução a testes de usabilidade - 11º Diverso Design
 
WAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na webWAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na web
 
ISP - The Interface Segregation Principle
ISP - The Interface Segregation Principle ISP - The Interface Segregation Principle
ISP - The Interface Segregation Principle
 
Software de sistema
Software de sistemaSoftware de sistema
Software de sistema
 
BIG PLOTTER Gráfica Digital
BIG PLOTTER Gráfica DigitalBIG PLOTTER Gráfica Digital
BIG PLOTTER Gráfica Digital
 
Jogos com NodeJS e Browser - QCON SP 2011
Jogos com NodeJS e Browser - QCON SP 2011Jogos com NodeJS e Browser - QCON SP 2011
Jogos com NodeJS e Browser - QCON SP 2011
 
Apresentação
ApresentaçãoApresentação
Apresentação
 
Suportes de mídia digital para produção editorial
Suportes de mídia digital para produção editorialSuportes de mídia digital para produção editorial
Suportes de mídia digital para produção editorial
 
WCM 2009-TT19 3 M-Programa ISP Integração dos Serviços de Terceirizados
WCM 2009-TT19 3 M-Programa ISP Integração dos Serviços de TerceirizadosWCM 2009-TT19 3 M-Programa ISP Integração dos Serviços de Terceirizados
WCM 2009-TT19 3 M-Programa ISP Integração dos Serviços de Terceirizados
 
Interface é código: aprimorando a experiência do usuário no front e no back-end
Interface é código: aprimorando a experiência do usuário no front e no back-endInterface é código: aprimorando a experiência do usuário no front e no back-end
Interface é código: aprimorando a experiência do usuário no front e no back-end
 
O que é um browser
O que é um browserO que é um browser
O que é um browser
 
APIs: The Problems with Eating your Own Dog Food
APIs: The Problems with Eating your Own Dog FoodAPIs: The Problems with Eating your Own Dog Food
APIs: The Problems with Eating your Own Dog Food
 
Structuring apps in Scala
Structuring apps in ScalaStructuring apps in Scala
Structuring apps in Scala
 

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

Navegadores por de baixo dos panos - Ana Luiza Bastos
Navegadores por de baixo dos panos - Ana Luiza BastosNavegadores por de baixo dos panos - Ana Luiza Bastos
Navegadores por de baixo dos panos - Ana Luiza BastosiMasters
 
Alta Performance em Aplicações Web
Alta Performance em Aplicações WebAlta Performance em Aplicações Web
Alta Performance em Aplicações WebAnderson Aguiar
 
JS Experience 2017 - Otimizando o front end
JS Experience 2017 - Otimizando o front endJS Experience 2017 - Otimizando o front end
JS Experience 2017 - Otimizando o front endiMasters
 
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Cristofer Sousa
 
A Evolução do Front end
A Evolução do Front endA Evolução do Front end
A Evolução do Front endDouglas Matoso
 
Gabarito ad1 web_2012_2
Gabarito ad1 web_2012_2Gabarito ad1 web_2012_2
Gabarito ad1 web_2012_2paulofa
 
Introdução ao Desenvolvimento WEB com Ruby on Rails
Introdução ao Desenvolvimento WEB com Ruby on RailsIntrodução ao Desenvolvimento WEB com Ruby on Rails
Introdução ao Desenvolvimento WEB com Ruby on RailsJulio Betta
 
Responsive web design_CPRecife2 - Felipe de Albuquerque
Responsive web design_CPRecife2 -  Felipe de AlbuquerqueResponsive web design_CPRecife2 -  Felipe de Albuquerque
Responsive web design_CPRecife2 - Felipe de AlbuquerqueFelipe de Albuquerque
 
Introdução ao CSS - Desenvolvimento web
Introdução ao CSS - Desenvolvimento webIntrodução ao CSS - Desenvolvimento web
Introdução ao CSS - Desenvolvimento webCarlos Eduardo Kadu
 
Performance - Acelere seu site! Na web tempo é mais que dinheiro.
Performance - Acelere seu site! Na web tempo é mais que dinheiro.Performance - Acelere seu site! Na web tempo é mais que dinheiro.
Performance - Acelere seu site! Na web tempo é mais que dinheiro.Gustavo Corrêa Alves
 
Caelum html-css-javascript-php
Caelum html-css-javascript-phpCaelum html-css-javascript-php
Caelum html-css-javascript-phpLindomar ...
 
Edição de conteúdo web usando Javascript de ponta a ponta
Edição de conteúdo web usando Javascript de ponta a pontaEdição de conteúdo web usando Javascript de ponta a ponta
Edição de conteúdo web usando Javascript de ponta a pontaJorge Walendowsky
 

Similar a DOM, CSSOM e RenderThree - Introdução ao Browser Render Path (20)

Navegadores por de baixo dos panos - Ana Luiza Bastos
Navegadores por de baixo dos panos - Ana Luiza BastosNavegadores por de baixo dos panos - Ana Luiza Bastos
Navegadores por de baixo dos panos - Ana Luiza Bastos
 
Html5
Html5Html5
Html5
 
Alta Performance em Aplicações Web
Alta Performance em Aplicações WebAlta Performance em Aplicações Web
Alta Performance em Aplicações Web
 
Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3
 
Programação Web com HTML e CSS
Programação Web com HTML e CSSProgramação Web com HTML e CSS
Programação Web com HTML e CSS
 
JS Experience 2017 - Otimizando o front end
JS Experience 2017 - Otimizando o front endJS Experience 2017 - Otimizando o front end
JS Experience 2017 - Otimizando o front end
 
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
 
HTML - Guia4
HTML - Guia4HTML - Guia4
HTML - Guia4
 
A Evolução do Front end
A Evolução do Front endA Evolução do Front end
A Evolução do Front end
 
Gabarito ad1 web_2012_2
Gabarito ad1 web_2012_2Gabarito ad1 web_2012_2
Gabarito ad1 web_2012_2
 
Introdução ao Desenvolvimento WEB com Ruby on Rails
Introdução ao Desenvolvimento WEB com Ruby on RailsIntrodução ao Desenvolvimento WEB com Ruby on Rails
Introdução ao Desenvolvimento WEB com Ruby on Rails
 
Responsive web design_CPRecife2 - Felipe de Albuquerque
Responsive web design_CPRecife2 -  Felipe de AlbuquerqueResponsive web design_CPRecife2 -  Felipe de Albuquerque
Responsive web design_CPRecife2 - Felipe de Albuquerque
 
HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3
 
Introdução ao CSS - Desenvolvimento web
Introdução ao CSS - Desenvolvimento webIntrodução ao CSS - Desenvolvimento web
Introdução ao CSS - Desenvolvimento web
 
Driver Flash para o ISFramework
Driver Flash para o ISFrameworkDriver Flash para o ISFramework
Driver Flash para o ISFramework
 
Performance - Acelere seu site! Na web tempo é mais que dinheiro.
Performance - Acelere seu site! Na web tempo é mais que dinheiro.Performance - Acelere seu site! Na web tempo é mais que dinheiro.
Performance - Acelere seu site! Na web tempo é mais que dinheiro.
 
Mini curso html5 slides
Mini curso html5   slidesMini curso html5   slides
Mini curso html5 slides
 
Caelum html-css-javascript-php
Caelum html-css-javascript-phpCaelum html-css-javascript-php
Caelum html-css-javascript-php
 
Edição de conteúdo web usando Javascript de ponta a ponta
Edição de conteúdo web usando Javascript de ponta a pontaEdição de conteúdo web usando Javascript de ponta a ponta
Edição de conteúdo web usando Javascript de ponta a ponta
 
Diazo para todos
Diazo para todosDiazo para todos
Diazo para todos
 

Más de Diego Eis

Carreira de Product Manager em 18 minutos
Carreira de Product Manager em 18 minutosCarreira de Product Manager em 18 minutos
Carreira de Product Manager em 18 minutosDiego Eis
 
Service Dominant Logic - S-D Logic em Produtos Digitais
Service Dominant Logic - S-D Logic em Produtos DigitaisService Dominant Logic - S-D Logic em Produtos Digitais
Service Dominant Logic - S-D Logic em Produtos DigitaisDiego Eis
 
Métricas para times Ágeis usando Estatística Básica
Métricas para times Ágeis usando Estatística BásicaMétricas para times Ágeis usando Estatística Básica
Métricas para times Ágeis usando Estatística BásicaDiego Eis
 
A verdadeira semântica do HTML
A verdadeira semântica do HTMLA verdadeira semântica do HTML
A verdadeira semântica do HTMLDiego Eis
 
HTML5 e CSS3 - A nova novidade
HTML5 e CSS3 - A nova novidadeHTML5 e CSS3 - A nova novidade
HTML5 e CSS3 - A nova novidadeDiego Eis
 
Manual de Sobrevivência do Desenvolvedor Empreendedor
Manual de Sobrevivência do Desenvolvedor EmpreendedorManual de Sobrevivência do Desenvolvedor Empreendedor
Manual de Sobrevivência do Desenvolvedor EmpreendedorDiego Eis
 
CSS3 - Novo contexto
CSS3 - Novo contextoCSS3 - Novo contexto
CSS3 - Novo contextoDiego Eis
 
Padrões Web passado, presente, futuro
Padrões Web passado, presente, futuroPadrões Web passado, presente, futuro
Padrões Web passado, presente, futuroDiego Eis
 
Padrões Web - Um elogio ao ócio do desenvolvedor
Padrões Web - Um elogio ao ócio do desenvolvedorPadrões Web - Um elogio ao ócio do desenvolvedor
Padrões Web - Um elogio ao ócio do desenvolvedorDiego Eis
 

Más de Diego Eis (9)

Carreira de Product Manager em 18 minutos
Carreira de Product Manager em 18 minutosCarreira de Product Manager em 18 minutos
Carreira de Product Manager em 18 minutos
 
Service Dominant Logic - S-D Logic em Produtos Digitais
Service Dominant Logic - S-D Logic em Produtos DigitaisService Dominant Logic - S-D Logic em Produtos Digitais
Service Dominant Logic - S-D Logic em Produtos Digitais
 
Métricas para times Ágeis usando Estatística Básica
Métricas para times Ágeis usando Estatística BásicaMétricas para times Ágeis usando Estatística Básica
Métricas para times Ágeis usando Estatística Básica
 
A verdadeira semântica do HTML
A verdadeira semântica do HTMLA verdadeira semântica do HTML
A verdadeira semântica do HTML
 
HTML5 e CSS3 - A nova novidade
HTML5 e CSS3 - A nova novidadeHTML5 e CSS3 - A nova novidade
HTML5 e CSS3 - A nova novidade
 
Manual de Sobrevivência do Desenvolvedor Empreendedor
Manual de Sobrevivência do Desenvolvedor EmpreendedorManual de Sobrevivência do Desenvolvedor Empreendedor
Manual de Sobrevivência do Desenvolvedor Empreendedor
 
CSS3 - Novo contexto
CSS3 - Novo contextoCSS3 - Novo contexto
CSS3 - Novo contexto
 
Padrões Web passado, presente, futuro
Padrões Web passado, presente, futuroPadrões Web passado, presente, futuro
Padrões Web passado, presente, futuro
 
Padrões Web - Um elogio ao ócio do desenvolvedor
Padrões Web - Um elogio ao ócio do desenvolvedorPadrões Web - Um elogio ao ócio do desenvolvedor
Padrões Web - Um elogio ao ócio do desenvolvedor
 

DOM, CSSOM e RenderThree - Introdução ao 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
  • 9. Processo O browser segue uma série de passos para transformar os dados da sua página em pixels na tela.
  • 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.
  • 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 marotoOlá NodesDOM
  • 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.
  • 21. CSSOM Basicamente o CSSOM é uma representação da formatação do documento. Ele lista as instruções e regras de estilos dos elementos.
  • 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 spancolor: #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.
  • 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 elementosIDs 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 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.
  • 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%; }
  • 45. Todas as medidas relativas são transformadas em medidas absolutas
  • 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
  • 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.
  • 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.
  • 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