PERFORMANCE WEB ALM DO CARREGAMENTO @sergio_caelum sergiolopes.org - PowerPoint PPT Presentation

PERFORMANCE WEB ALÉM DO CARREGAMENTO

@sergio_caelum sergiolopes.org

PERFORMANCE?

VÁRIAS PERFORMANCES

VÁRIAS PERFORMANCES CARREGAMENTO

VÁRIAS PERFORMANCES CARREGAMENTO EXECUÇÃO

VÁRIAS PERFORMANCES CARREGAMENTO EXECUÇÃO INTERAÇÃO

VÁRIAS PERFORMANCES CARREGAMENTO EXECUÇÃO INTERAÇÃO ANIMAÇÃO

VÁRIAS PERFORMANCES CARREGAMENTO EXECUÇÃO INTERAÇÃO ANIMAÇÃO MEMÓRIA, BATERIA

PERFORMANCE EXECUÇÃO INTERAÇÃO ANIMAÇÃO

PERFORMANCE EXECUÇÃO INTERAÇÃO ANIMAÇÃO

PERFORMANCE EXECUÇÃO MAIN THREAD OCUPADA. INTERAÇÃO ANIMAÇÃO MUITO LAYOUT / PAINT.

MAIN THREAD

RESPONSE 100ms

QUEBRAR EM NÃO USAR BLOCOS MENORES A MAIN THREAD

QUEBRAR EM NÃO USAR BLOCOS MENORES A MAIN THREAD

setTimeout(funcao, 10);

setTimeout(funcao, 10); setImmediate(funcao);

setTimeout(funcao, 10); setImmediate(funcao); requestAnimationFrame(funcao);

setTimeout(funcao, 10); setImmediate(funcao); requestAnimationFrame(funcao); requestIdleCallback(funcao);

IDLE TIME

QUEBRAR EM NÃO USAR BLOCOS MENORES A MAIN THREAD

WEB WORKERS

MULTI THREAD

MELHORAR TTI DE SPA

MELHORAR TTI DE SPA SERVER SIDE RENDERING

MELHORAR TTI DE SPA SERVER SIDE RENDERING MENOS DEPENDÊNCIAS

MELHORAR TTI DE SPA SERVER SIDE RENDERING MENOS DEPENDÊNCIAS CODE SPLITTING

MELHORAR TTI DE SPA SERVER SIDE RENDERING MENOS DEPENDÊNCIAS CODE SPLITTING TREE SHAKING

MELHORAR TTI DE SPA SERVER SIDE RENDERING MENOS DEPENDÊNCIAS CODE SPLITTING TREE SHAKING AOT COMPILER

MELHORAR TTI DE SPA SERVER SIDE RENDERING MENOS DEPENDÊNCIAS CODE SPLITTING TREE SHAKING AOT COMPILER FRAMEWORK COM WEB WORKER

QUEBRAR EM NÃO USAR BLOCOS MENORES A MAIN THREAD

@keyframes anima { to { left: 200px; width: 250px; } } @keyframes animaGPU { to { transform: translateX(200px) scale(1.7); } }

60FPS

60FPS 16ms

.container { top : 0; transition : top 500ms; } .container.buscaVisivel { top : 100px; }

.container { top : 0; transition : top 500ms; } .container.buscaVisivel { top : 100px; }

.container { transition: transform 500ms; } .container.buscaVisivel { transform: translateY(100px); }

.container { transition: transform 500ms; will-change: transform; } .container.buscaVisivel { transform: translateY(100px); }

.container { .container { transition: transform 500ms; transition: transform 500ms; will-change: transform; transform: translateZ(0); } } .container.buscaVisivel { .container.buscaVisivel { transform: translateY(100px); transform: translateY(100px); } }

INICIAL

INICIAL FINAL

INICIAL FINAL

INICIAL FINAL opacity : 0; transition : opacity 500ms ease-out;

INICIAL

INICIAL FINAL

INICIAL FINAL var posInicial = cartao.getBoundingClientRect();

INICIAL FINAL var posInicial = cartao.getBoundingClientRect(); cartaoARemover.classList.add('remove');

INICIAL FINAL var posInicial = cartao.getBoundingClientRect(); cartaoARemover.classList.add('remove'); var posFinal = cartao.getBoundingClientRect();

INICIAL FINAL

INICIAL FINAL var x = posInicial.left - posFinal.left;

INICIAL FINAL var x = posInicial.left - posFinal.left; var y = posInicial.top - posFinal.top;

INICIAL FINAL var x = posInicial.left - posFinal.left; var y = posInicial.top - posFinal.top;

INICIAL FINAL var x = posInicial.left - posFinal.left; var y = posInicial.top - posFinal.top; cartao.style.transform = `translate(${x}px, ${y}px)`;

INICIAL FINAL INVERTE var x = posInicial.left - posFinal.left; var y = posInicial.top - posFinal.top; cartao.style.transform = `translate(${x}px, ${y}px)`;

INICIAL FINAL INVERTE

INICIAL FINAL INVERTE transform : none; transition : transform 500ms ease-out;