SlideShare a Scribd company logo
1 of 75
Download to read offline
DESAFIOS PRÁTICOS DE
PERFORMANCE WEB
@sergio_caelum
sergiolopes.org
@sergio_caelum
sergiolopes.org
Desafios de Performance Web - BrazilJS
Desafios de Performance Web - BrazilJS
~600px
~7.000px
ATFABOVE THE FOLD
CRITICAL RENDERING PATH
Desafios de Performance Web - BrazilJS
Desafios de Performance Web - BrazilJS
Desafios de Performance Web - BrazilJS
Desafios de Performance Web - BrazilJS
PRIORIZAR ATF
CSS / JS
ATF RESTO
INLINE ASYNC
HTMLATF +
CSS ATF +
JS ATF +<= 14KB
FLUSH ATF
WEB FONTS
INLINE?
SERVER-PUSH!
Desafios de Performance Web - BrazilJS
Desafios de Performance Web - BrazilJS
SERVER-PUSH?
PRELOAD!
<link rel="preload" as="image" href="hero.jpg">
<link rel="preload" as="font"
href="opensans.woff2"
type="font/woff2"
media="(min-width: 600px)"
crossorigin>
CARREGAMENTO,
EXECUÇÃO,
ANIMAÇÃO
Desafios de Performance Web - BrazilJS
Desafios de Performance Web - BrazilJS
Desafios de Performance Web - BrazilJS
BACKGROUND
Web Workers
QUEBRE A TAREFA
setTimeout / setImmediate /
requestAnimationFrame / requestIdleCallback
BACKGROUND
Web Workers
ANIMATION
ANIMATION 60FPS
ANIMATION 16ms
Desafios de Performance Web - BrazilJS
Desafios de Performance Web - BrazilJS
.header-barraBusca {
height: 100px;
position: absolute;
top: -100px;
}
botaoBusca.onclick = function() {
container.classList.toggle('buscaVisivel');
};
.container {
position: relative;
}
.container.buscaVisivel {
top: 100px;
}
.container {
position: relative;
top: 0;
transition: top 500ms;
}
.container.buscaVisivel {
top: 100px;
}
.container {
position: relative;
top: 0;
transition: top 500ms;
}
.container.buscaVisivel {
top: 100px;
}
Desafios de Performance Web - BrazilJS
Desafios de Performance Web - BrazilJS
.container {
transition: transform 500ms;
}
.container.buscaVisivel {
transform: translateY(100px);
}
Desafios de Performance Web - BrazilJS
Desafios de Performance Web - BrazilJS
Desafios de Performance Web - BrazilJS
Desafios de Performance Web - BrazilJS
.container {
transition: transform 500ms;
will-change: transform;
}
.container.buscaVisivel {
transform: translateY(100px);
}
Desafios de Performance Web - BrazilJS
Desafios de Performance Web - BrazilJS
Desafios de Performance Web - BrazilJS
Desafios de Performance Web - BrazilJS
Desafios de Performance Web - BrazilJS
Desafios de Performance Web - BrazilJS
Desafios de Performance Web - BrazilJS
cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
// preparaAnimacao
// disparaAnimacao
// aposAnimacao
}
cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
}
cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
}
cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
}
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
}
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
}
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
.cartao.remove {
position: absolute;
}
cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
}
cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
}
cartoes.forEach((cartao, i) => {
cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
}
cartoes.forEach((cartao, i) => {
var posFinal = cartao.getBoundingClientRect();
cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
}
cartoes.forEach((cartao, i) => {
var posFinal = cartao.getBoundingClientRect();
var x = posInicial[i].left - posFinal.left;
cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
}
cartoes.forEach((cartao, i) => {
var posFinal = cartao.getBoundingClientRect();
var x = posInicial[i].left - posFinal.left;
var y = posInicial[i].top - posFinal.top;
cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
}
cartoes.forEach((cartao, i) => {
var posFinal = cartao.getBoundingClientRect();
var x = posInicial[i].left - posFinal.left;
var y = posInicial[i].top - posFinal.top;
cartao.style.transform = `translate(${x}px, ${y}px)`;
cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
}
cartoes.forEach((cartao, i) => {
var posFinal = cartao.getBoundingClientRect();
var x = posInicial[i].left - posFinal.left;
var y = posInicial[i].top - posFinal.top;
cartao.style.transform = `translate(${x}px, ${y}px)`;
});
cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
cartoes.forEach((cartao, i) => {
var posFinal = cartao.getBoundingClientRect();
var x = posInicial[i].left - posFinal.left;
var y = posInicial[i].top - posFinal.top;
cartao.style.transform = `translate(${x}px, ${y}px)`;
});
}
function disparaAnimacao() {
cartoes.forEach((cartao) => cartao.style.transform = '' );
lista.classList.add('anima');
}
cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
cartoes.forEach((cartao, i) => {
var posFinal = cartao.getBoundingClientRect();
var x = posInicial[i].left - posFinal.left;
var y = posInicial[i].top - posFinal.top;
cartao.style.transform = `translate(${x}px, ${y}px)`;
});
}
function disparaAnimacao() {
cartoes.forEach((cartao) => cartao.style.transform = '' );
lista.classList.add('anima');
}
.anima .cartao {
transition: 500ms ease-out;
}
.anima .cartao.remove {
opacity: 0;
}
cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
disparaAnimacao();
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
cartoes.forEach((cartao, i) => {
var posFinal = cartao.getBoundingClientRect();
var x = posInicial[i].left - posFinal.left;
var y = posInicial[i].top - posFinal.top;
cartao.style.transform = `translate(${x}px, ${y}px)`;
});
}
function disparaAnimacao() {
cartoes.forEach((cartao) => cartao.style.transform = '' );
lista.classList.add('anima');
}
cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
requestAnimationFrame(disparaAnimacao);
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
cartoes.forEach((cartao, i) => {
var posFinal = cartao.getBoundingClientRect();
var x = posInicial[i].left - posFinal.left;
var y = posInicial[i].top - posFinal.top;
cartao.style.transform = `translate(${x}px, ${y}px)`;
});
}
function disparaAnimacao() {
cartoes.forEach((cartao) => cartao.style.transform = '' );
lista.classList.add('anima');
}
cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
requestAnimationFrame(disparaAnimacao);
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
cartoes.forEach((cartao, i) => {
var posFinal = cartao.getBoundingClientRect();
var x = posInicial[i].left - posFinal.left;
var y = posInicial[i].top - posFinal.top;
cartao.style.transform = `translate(${x}px, ${y}px)`;
});
}
function disparaAnimacao() {
cartoes.forEach((cartao) => cartao.style.transform = '' );
lista.classList.add('anima');
}
function aposAnimacao() {
lista.classList.remove('anima');
this.remove();
}
cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
requestAnimationFrame(disparaAnimacao);
this.addEventListener('transitionend', aposAnimacao);
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
cartoes.forEach((cartao, i) => {
var posFinal = cartao.getBoundingClientRect();
var x = posInicial[i].left - posFinal.left;
var y = posInicial[i].top - posFinal.top;
cartao.style.transform = `translate(${x}px, ${y}px)`;
});
}
function disparaAnimacao() {
cartoes.forEach((cartao) => cartao.style.transform = '' );
lista.classList.add('anima');
}
function aposAnimacao() {
lista.classList.remove('anima');
this.remove();
}
Desafios de Performance Web - BrazilJS
Desafios de Performance Web - BrazilJS
DESAFIOS PRÁTICOS DE
PERFORMANCE WEB
OBRIGADO!
sergiolopes.org
@sergio_caelum

More Related Content

Viewers also liked

Design Responsivo por uma Web única
Design Responsivo por uma Web únicaDesign Responsivo por uma Web única
Design Responsivo por uma Web únicaCaelum
 
Otimizando o time to market - do zero a produção em poucas iterações
Otimizando o time to market - do zero a produção em poucas iteraçõesOtimizando o time to market - do zero a produção em poucas iterações
Otimizando o time to market - do zero a produção em poucas iteraçõesCaelum
 
All you need to know about JavaScript loading and execution in the browser - ...
All you need to know about JavaScript loading and execution in the browser - ...All you need to know about JavaScript loading and execution in the browser - ...
All you need to know about JavaScript loading and execution in the browser - ...Caelum
 
Wsrest 2013
Wsrest 2013Wsrest 2013
Wsrest 2013Caelum
 
Os Caminhos de uma Estratégia Mobile
Os Caminhos de uma Estratégia MobileOs Caminhos de uma Estratégia Mobile
Os Caminhos de uma Estratégia MobileCaelum
 
Performance na web: o modelo RAIL e outras novidades
Performance na web: o modelo RAIL e outras novidadesPerformance na web: o modelo RAIL e outras novidades
Performance na web: o modelo RAIL e outras novidadesCaelum
 
Otimizações de Performance Web: Desafios do Mundo Mobile
Otimizações de Performance Web: Desafios do Mundo MobileOtimizações de Performance Web: Desafios do Mundo Mobile
Otimizações de Performance Web: Desafios do Mundo MobileCaelum
 
Porque você deveria usar CDI nos seus projetos Java! - JavaOne LA 2012 - Sérg...
Porque você deveria usar CDI nos seus projetos Java! - JavaOne LA 2012 - Sérg...Porque você deveria usar CDI nos seus projetos Java! - JavaOne LA 2012 - Sérg...
Porque você deveria usar CDI nos seus projetos Java! - JavaOne LA 2012 - Sérg...Caelum
 
[QCon 2011] Por uma web mais rápida: técnicas de otimização de Sites
[QCon 2011] Por uma web mais rápida: técnicas de otimização de Sites[QCon 2011] Por uma web mais rápida: técnicas de otimização de Sites
[QCon 2011] Por uma web mais rápida: técnicas de otimização de SitesCaelum
 

Viewers also liked (9)

Design Responsivo por uma Web única
Design Responsivo por uma Web únicaDesign Responsivo por uma Web única
Design Responsivo por uma Web única
 
Otimizando o time to market - do zero a produção em poucas iterações
Otimizando o time to market - do zero a produção em poucas iteraçõesOtimizando o time to market - do zero a produção em poucas iterações
Otimizando o time to market - do zero a produção em poucas iterações
 
All you need to know about JavaScript loading and execution in the browser - ...
All you need to know about JavaScript loading and execution in the browser - ...All you need to know about JavaScript loading and execution in the browser - ...
All you need to know about JavaScript loading and execution in the browser - ...
 
Wsrest 2013
Wsrest 2013Wsrest 2013
Wsrest 2013
 
Os Caminhos de uma Estratégia Mobile
Os Caminhos de uma Estratégia MobileOs Caminhos de uma Estratégia Mobile
Os Caminhos de uma Estratégia Mobile
 
Performance na web: o modelo RAIL e outras novidades
Performance na web: o modelo RAIL e outras novidadesPerformance na web: o modelo RAIL e outras novidades
Performance na web: o modelo RAIL e outras novidades
 
Otimizações de Performance Web: Desafios do Mundo Mobile
Otimizações de Performance Web: Desafios do Mundo MobileOtimizações de Performance Web: Desafios do Mundo Mobile
Otimizações de Performance Web: Desafios do Mundo Mobile
 
Porque você deveria usar CDI nos seus projetos Java! - JavaOne LA 2012 - Sérg...
Porque você deveria usar CDI nos seus projetos Java! - JavaOne LA 2012 - Sérg...Porque você deveria usar CDI nos seus projetos Java! - JavaOne LA 2012 - Sérg...
Porque você deveria usar CDI nos seus projetos Java! - JavaOne LA 2012 - Sérg...
 
[QCon 2011] Por uma web mais rápida: técnicas de otimização de Sites
[QCon 2011] Por uma web mais rápida: técnicas de otimização de Sites[QCon 2011] Por uma web mais rápida: técnicas de otimização de Sites
[QCon 2011] Por uma web mais rápida: técnicas de otimização de Sites
 

More from Caelum

Progressive Web Apps: o melhor da Web appficada
Progressive Web Apps: o melhor da Web appficadaProgressive Web Apps: o melhor da Web appficada
Progressive Web Apps: o melhor da Web appficadaCaelum
 
Tudo que você precisa saber sobre picture e srcset
Tudo que você precisa saber sobre picture e srcsetTudo que você precisa saber sobre picture e srcset
Tudo que você precisa saber sobre picture e srcsetCaelum
 
Como o HTTP/2 vai mudar sua vida
Como o HTTP/2 vai mudar sua vidaComo o HTTP/2 vai mudar sua vida
Como o HTTP/2 vai mudar sua vidaCaelum
 
Métricas e a automatização do controle de qualidade
Métricas e a automatização do controle de qualidadeMétricas e a automatização do controle de qualidade
Métricas e a automatização do controle de qualidadeCaelum
 
HTTP/2, SPDY e Otimizações Web - Front In Maceió 2014 - Sérgio Lopes
HTTP/2, SPDY e Otimizações Web - Front In Maceió 2014 - Sérgio LopesHTTP/2, SPDY e Otimizações Web - Front In Maceió 2014 - Sérgio Lopes
HTTP/2, SPDY e Otimizações Web - Front In Maceió 2014 - Sérgio LopesCaelum
 
Offline Web com Service Workers - Sérgio Lopes
Offline Web com Service Workers - Sérgio LopesOffline Web com Service Workers - Sérgio Lopes
Offline Web com Service Workers - Sérgio LopesCaelum
 
Design Responsivo - MobCamp 2014
Design Responsivo - MobCamp 2014Design Responsivo - MobCamp 2014
Design Responsivo - MobCamp 2014Caelum
 
Além do responsive design: a mudança de paradigma do design adaptativo e os m...
Além do responsive design: a mudança de paradigma do design adaptativo e os m...Além do responsive design: a mudança de paradigma do design adaptativo e os m...
Além do responsive design: a mudança de paradigma do design adaptativo e os m...Caelum
 
Por trás dos frameworks e além do reflection
Por trás dos frameworks e além do reflectionPor trás dos frameworks e além do reflection
Por trás dos frameworks e além do reflectionCaelum
 
Introducao a inteligencia artificial na educacao
Introducao a inteligencia artificial na educacaoIntroducao a inteligencia artificial na educacao
Introducao a inteligencia artificial na educacaoCaelum
 
[FrontInBH 2012] Por uma web mais rápida: técnicas de otimizações de sites - ...
[FrontInBH 2012] Por uma web mais rápida: técnicas de otimizações de sites - ...[FrontInBH 2012] Por uma web mais rápida: técnicas de otimizações de sites - ...
[FrontInBH 2012] Por uma web mais rápida: técnicas de otimizações de sites - ...Caelum
 
Plataforma java: detalhes da JVM
Plataforma java: detalhes da JVMPlataforma java: detalhes da JVM
Plataforma java: detalhes da JVMCaelum
 
CDI e as ideias pro futuro do VRaptor
CDI e as ideias pro futuro do VRaptorCDI e as ideias pro futuro do VRaptor
CDI e as ideias pro futuro do VRaptorCaelum
 
Qualidade de código - a qualidade que faz a diferença
Qualidade de código - a qualidade que faz a diferençaQualidade de código - a qualidade que faz a diferença
Qualidade de código - a qualidade que faz a diferençaCaelum
 
Design de código: qualidade que faz a diferença, qcon 2011
Design de código: qualidade que faz a diferença, qcon 2011Design de código: qualidade que faz a diferença, qcon 2011
Design de código: qualidade que faz a diferença, qcon 2011Caelum
 
Agile2011
Agile2011Agile2011
Agile2011Caelum
 
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011Caelum
 
Servlets 3: o contexto assíncrono - JavaOne 2010 - Paulo Silveira
Servlets 3: o contexto assíncrono - JavaOne 2010 - Paulo SilveiraServlets 3: o contexto assíncrono - JavaOne 2010 - Paulo Silveira
Servlets 3: o contexto assíncrono - JavaOne 2010 - Paulo SilveiraCaelum
 
Como fabricar dinheiro: Otimizações de Sites e porque isso vai deixá-lo rico ...
Como fabricar dinheiro: Otimizações de Sites e porque isso vai deixá-lo rico ...Como fabricar dinheiro: Otimizações de Sites e porque isso vai deixá-lo rico ...
Como fabricar dinheiro: Otimizações de Sites e porque isso vai deixá-lo rico ...Caelum
 
Google Android - WTJatai
Google Android - WTJataiGoogle Android - WTJatai
Google Android - WTJataiCaelum
 

More from Caelum (20)

Progressive Web Apps: o melhor da Web appficada
Progressive Web Apps: o melhor da Web appficadaProgressive Web Apps: o melhor da Web appficada
Progressive Web Apps: o melhor da Web appficada
 
Tudo que você precisa saber sobre picture e srcset
Tudo que você precisa saber sobre picture e srcsetTudo que você precisa saber sobre picture e srcset
Tudo que você precisa saber sobre picture e srcset
 
Como o HTTP/2 vai mudar sua vida
Como o HTTP/2 vai mudar sua vidaComo o HTTP/2 vai mudar sua vida
Como o HTTP/2 vai mudar sua vida
 
Métricas e a automatização do controle de qualidade
Métricas e a automatização do controle de qualidadeMétricas e a automatização do controle de qualidade
Métricas e a automatização do controle de qualidade
 
HTTP/2, SPDY e Otimizações Web - Front In Maceió 2014 - Sérgio Lopes
HTTP/2, SPDY e Otimizações Web - Front In Maceió 2014 - Sérgio LopesHTTP/2, SPDY e Otimizações Web - Front In Maceió 2014 - Sérgio Lopes
HTTP/2, SPDY e Otimizações Web - Front In Maceió 2014 - Sérgio Lopes
 
Offline Web com Service Workers - Sérgio Lopes
Offline Web com Service Workers - Sérgio LopesOffline Web com Service Workers - Sérgio Lopes
Offline Web com Service Workers - Sérgio Lopes
 
Design Responsivo - MobCamp 2014
Design Responsivo - MobCamp 2014Design Responsivo - MobCamp 2014
Design Responsivo - MobCamp 2014
 
Além do responsive design: a mudança de paradigma do design adaptativo e os m...
Além do responsive design: a mudança de paradigma do design adaptativo e os m...Além do responsive design: a mudança de paradigma do design adaptativo e os m...
Além do responsive design: a mudança de paradigma do design adaptativo e os m...
 
Por trás dos frameworks e além do reflection
Por trás dos frameworks e além do reflectionPor trás dos frameworks e além do reflection
Por trás dos frameworks e além do reflection
 
Introducao a inteligencia artificial na educacao
Introducao a inteligencia artificial na educacaoIntroducao a inteligencia artificial na educacao
Introducao a inteligencia artificial na educacao
 
[FrontInBH 2012] Por uma web mais rápida: técnicas de otimizações de sites - ...
[FrontInBH 2012] Por uma web mais rápida: técnicas de otimizações de sites - ...[FrontInBH 2012] Por uma web mais rápida: técnicas de otimizações de sites - ...
[FrontInBH 2012] Por uma web mais rápida: técnicas de otimizações de sites - ...
 
Plataforma java: detalhes da JVM
Plataforma java: detalhes da JVMPlataforma java: detalhes da JVM
Plataforma java: detalhes da JVM
 
CDI e as ideias pro futuro do VRaptor
CDI e as ideias pro futuro do VRaptorCDI e as ideias pro futuro do VRaptor
CDI e as ideias pro futuro do VRaptor
 
Qualidade de código - a qualidade que faz a diferença
Qualidade de código - a qualidade que faz a diferençaQualidade de código - a qualidade que faz a diferença
Qualidade de código - a qualidade que faz a diferença
 
Design de código: qualidade que faz a diferença, qcon 2011
Design de código: qualidade que faz a diferença, qcon 2011Design de código: qualidade que faz a diferença, qcon 2011
Design de código: qualidade que faz a diferença, qcon 2011
 
Agile2011
Agile2011Agile2011
Agile2011
 
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
 
Servlets 3: o contexto assíncrono - JavaOne 2010 - Paulo Silveira
Servlets 3: o contexto assíncrono - JavaOne 2010 - Paulo SilveiraServlets 3: o contexto assíncrono - JavaOne 2010 - Paulo Silveira
Servlets 3: o contexto assíncrono - JavaOne 2010 - Paulo Silveira
 
Como fabricar dinheiro: Otimizações de Sites e porque isso vai deixá-lo rico ...
Como fabricar dinheiro: Otimizações de Sites e porque isso vai deixá-lo rico ...Como fabricar dinheiro: Otimizações de Sites e porque isso vai deixá-lo rico ...
Como fabricar dinheiro: Otimizações de Sites e porque isso vai deixá-lo rico ...
 
Google Android - WTJatai
Google Android - WTJataiGoogle Android - WTJatai
Google Android - WTJatai
 

Desafios de Performance Web - BrazilJS

  • 13. CSS / JS ATF RESTO INLINE ASYNC
  • 14. HTMLATF + CSS ATF + JS ATF +<= 14KB
  • 21. <link rel="preload" as="image" href="hero.jpg">
  • 28. QUEBRE A TAREFA setTimeout / setImmediate / requestAnimationFrame / requestIdleCallback BACKGROUND Web Workers
  • 34. .header-barraBusca { height: 100px; position: absolute; top: -100px; } botaoBusca.onclick = function() { container.classList.toggle('buscaVisivel'); };
  • 36. .container { position: relative; top: 0; transition: top 500ms; } .container.buscaVisivel { top: 100px; }
  • 37. .container { position: relative; top: 0; transition: top 500ms; } .container.buscaVisivel { top: 100px; }
  • 40. .container { transition: transform 500ms; } .container.buscaVisivel { transform: translateY(100px); }
  • 45. .container { transition: transform 500ms; will-change: transform; } .container.buscaVisivel { transform: translateY(100px); }
  • 53. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick)); function cartaoOnClick() { // preparaAnimacao // disparaAnimacao // aposAnimacao }
  • 54. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick)); function cartaoOnClick() { preparaAnimacao(this); // disparaAnimacao // aposAnimacao } function preparaAnimacao(cartaoARemover) { }
  • 55. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick)); function cartaoOnClick() { preparaAnimacao(this); // disparaAnimacao // aposAnimacao } function preparaAnimacao(cartaoARemover) { }
  • 56. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick)); function cartaoOnClick() { preparaAnimacao(this); // disparaAnimacao // aposAnimacao } function preparaAnimacao(cartaoARemover) { } var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
  • 57. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick)); function cartaoOnClick() { preparaAnimacao(this); // disparaAnimacao // aposAnimacao } function preparaAnimacao(cartaoARemover) { } var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect()); cartaoARemover.classList.add('remove');
  • 58. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick)); function cartaoOnClick() { preparaAnimacao(this); // disparaAnimacao // aposAnimacao } function preparaAnimacao(cartaoARemover) { } var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect()); cartaoARemover.classList.add('remove'); .cartao.remove { position: absolute; }
  • 59. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick)); function cartaoOnClick() { preparaAnimacao(this); // disparaAnimacao // aposAnimacao } function preparaAnimacao(cartaoARemover) { var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect()); cartaoARemover.classList.add('remove'); }
  • 60. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick)); function cartaoOnClick() { preparaAnimacao(this); // disparaAnimacao // aposAnimacao } function preparaAnimacao(cartaoARemover) { var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect()); cartaoARemover.classList.add('remove'); } cartoes.forEach((cartao, i) => {
  • 61. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick)); function cartaoOnClick() { preparaAnimacao(this); // disparaAnimacao // aposAnimacao } function preparaAnimacao(cartaoARemover) { var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect()); cartaoARemover.classList.add('remove'); } cartoes.forEach((cartao, i) => { var posFinal = cartao.getBoundingClientRect();
  • 62. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick)); function cartaoOnClick() { preparaAnimacao(this); // disparaAnimacao // aposAnimacao } function preparaAnimacao(cartaoARemover) { var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect()); cartaoARemover.classList.add('remove'); } cartoes.forEach((cartao, i) => { var posFinal = cartao.getBoundingClientRect(); var x = posInicial[i].left - posFinal.left;
  • 63. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick)); function cartaoOnClick() { preparaAnimacao(this); // disparaAnimacao // aposAnimacao } function preparaAnimacao(cartaoARemover) { var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect()); cartaoARemover.classList.add('remove'); } cartoes.forEach((cartao, i) => { var posFinal = cartao.getBoundingClientRect(); var x = posInicial[i].left - posFinal.left; var y = posInicial[i].top - posFinal.top;
  • 64. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick)); function cartaoOnClick() { preparaAnimacao(this); // disparaAnimacao // aposAnimacao } function preparaAnimacao(cartaoARemover) { var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect()); cartaoARemover.classList.add('remove'); } cartoes.forEach((cartao, i) => { var posFinal = cartao.getBoundingClientRect(); var x = posInicial[i].left - posFinal.left; var y = posInicial[i].top - posFinal.top; cartao.style.transform = `translate(${x}px, ${y}px)`;
  • 65. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick)); function cartaoOnClick() { preparaAnimacao(this); // disparaAnimacao // aposAnimacao } function preparaAnimacao(cartaoARemover) { var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect()); cartaoARemover.classList.add('remove'); } cartoes.forEach((cartao, i) => { var posFinal = cartao.getBoundingClientRect(); var x = posInicial[i].left - posFinal.left; var y = posInicial[i].top - posFinal.top; cartao.style.transform = `translate(${x}px, ${y}px)`; });
  • 66. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick)); function cartaoOnClick() { preparaAnimacao(this); // disparaAnimacao // aposAnimacao } function preparaAnimacao(cartaoARemover) { var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect()); cartaoARemover.classList.add('remove'); cartoes.forEach((cartao, i) => { var posFinal = cartao.getBoundingClientRect(); var x = posInicial[i].left - posFinal.left; var y = posInicial[i].top - posFinal.top; cartao.style.transform = `translate(${x}px, ${y}px)`; }); } function disparaAnimacao() { cartoes.forEach((cartao) => cartao.style.transform = '' ); lista.classList.add('anima'); }
  • 67. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick)); function cartaoOnClick() { preparaAnimacao(this); // disparaAnimacao // aposAnimacao } function preparaAnimacao(cartaoARemover) { var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect()); cartaoARemover.classList.add('remove'); cartoes.forEach((cartao, i) => { var posFinal = cartao.getBoundingClientRect(); var x = posInicial[i].left - posFinal.left; var y = posInicial[i].top - posFinal.top; cartao.style.transform = `translate(${x}px, ${y}px)`; }); } function disparaAnimacao() { cartoes.forEach((cartao) => cartao.style.transform = '' ); lista.classList.add('anima'); } .anima .cartao { transition: 500ms ease-out; } .anima .cartao.remove { opacity: 0; }
  • 68. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick)); function cartaoOnClick() { preparaAnimacao(this); disparaAnimacao(); // aposAnimacao } function preparaAnimacao(cartaoARemover) { var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect()); cartaoARemover.classList.add('remove'); cartoes.forEach((cartao, i) => { var posFinal = cartao.getBoundingClientRect(); var x = posInicial[i].left - posFinal.left; var y = posInicial[i].top - posFinal.top; cartao.style.transform = `translate(${x}px, ${y}px)`; }); } function disparaAnimacao() { cartoes.forEach((cartao) => cartao.style.transform = '' ); lista.classList.add('anima'); }
  • 69. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick)); function cartaoOnClick() { preparaAnimacao(this); requestAnimationFrame(disparaAnimacao); // aposAnimacao } function preparaAnimacao(cartaoARemover) { var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect()); cartaoARemover.classList.add('remove'); cartoes.forEach((cartao, i) => { var posFinal = cartao.getBoundingClientRect(); var x = posInicial[i].left - posFinal.left; var y = posInicial[i].top - posFinal.top; cartao.style.transform = `translate(${x}px, ${y}px)`; }); } function disparaAnimacao() { cartoes.forEach((cartao) => cartao.style.transform = '' ); lista.classList.add('anima'); }
  • 70. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick)); function cartaoOnClick() { preparaAnimacao(this); requestAnimationFrame(disparaAnimacao); // aposAnimacao } function preparaAnimacao(cartaoARemover) { var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect()); cartaoARemover.classList.add('remove'); cartoes.forEach((cartao, i) => { var posFinal = cartao.getBoundingClientRect(); var x = posInicial[i].left - posFinal.left; var y = posInicial[i].top - posFinal.top; cartao.style.transform = `translate(${x}px, ${y}px)`; }); } function disparaAnimacao() { cartoes.forEach((cartao) => cartao.style.transform = '' ); lista.classList.add('anima'); } function aposAnimacao() { lista.classList.remove('anima'); this.remove(); }
  • 71. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick)); function cartaoOnClick() { preparaAnimacao(this); requestAnimationFrame(disparaAnimacao); this.addEventListener('transitionend', aposAnimacao); } function preparaAnimacao(cartaoARemover) { var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect()); cartaoARemover.classList.add('remove'); cartoes.forEach((cartao, i) => { var posFinal = cartao.getBoundingClientRect(); var x = posInicial[i].left - posFinal.left; var y = posInicial[i].top - posFinal.top; cartao.style.transform = `translate(${x}px, ${y}px)`; }); } function disparaAnimacao() { cartoes.forEach((cartao) => cartao.style.transform = '' ); lista.classList.add('anima'); } function aposAnimacao() { lista.classList.remove('anima'); this.remove(); }