Desafios de Performance Web - BrazilJS

DESAFIOS PRÁTICOS DE

PERFORMANCE WEB

@sergio_caelum sergiolopes.org

@sergio_caelum sergiolopes.org

~600px

~7.000px

ATF ABOVE THE FOLD

CRITICAL RENDERING PATH

PRIORIZAR ATF

CSS / JSATF RESTO

INLINE ASYNC

HTML ATF + CSS ATF +

JS ATF +<= 14KB

FLUSH ATF

WEB FONTS*

INLINE? SERVER-PUSH!

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

BACKGROUND Web Workers

QUEBRE A TAREFA setTimeout / setImmediate /

requestAnimationFrame / requestIdleCallback

BACKGROUND Web Workers

ANIMATION

ANIMATION 60FPS

ANIMATION 16ms

.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 {position: relative;top: 0;transition: top 500ms;

}


}

.container {transition: transform 500ms;

}

.container.buscaVisivel {transform: translateY(100px);

}

.container {transition: transform 500ms;will-change: transform;

}

.container.buscaVisivel {transform: translateY(100px);

}

cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));

function cartaoOnClick() {// preparaAnimacao// disparaAnimacao// aposAnimacao

}


function cartaoOnClick() {preparaAnimacao(this);// disparaAnimacao// aposAnimacao

}

function preparaAnimacao(cartaoARemover) {

}



}


}



}


}

var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());



}


}

var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());cartaoARemover.classList.add('remove');



}


}

var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());cartaoARemover.classList.add('remove');

.cartao.remove {position: absolute;

}



}

function preparaAnimacao(cartaoARemover) {var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());cartaoARemover.classList.add('remove');

}



}


}

cartoes.forEach((cartao, i) => {



}


}

cartoes.forEach((cartao, i) => {var posFinal = cartao.getBoundingClientRect();



}


}

cartoes.forEach((cartao, i) => {var posFinal = cartao.getBoundingClientRect();var x = posInicial[i].left - posFinal.left;



}


}

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, 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;

}


function cartaoOnClick() {preparaAnimacao(this);

disparaAnimacao();// aposAnimacao

}



});}


}



requestAnimationFrame(disparaAnimacao);// aposAnimacao

}



});}


}



requestAnimationFrame(disparaAnimacao);// aposAnimacao

}



});}


}

function aposAnimacao() {lista.classList.remove('anima');this.remove();

}



requestAnimationFrame(disparaAnimacao);this.addEventListener('transitionend', aposAnimacao);

}



});}


}

function aposAnimacao() {lista.classList.remove('anima');this.remove();

}

DESAFIOS PRÁTICOS DE

PERFORMANCE WEB

OBRIGADO!sergiolopes.org

@sergio_caelum

Technology

Desafios de Performance Web - BrazilJS