Sergio Lopes, Diretor e Professor da Caelum fala sobre Performance Web além do carregamento no JS Experience'17 Saiba mais em https://eventos.imasters.com.br/jsexperience

1. PERFORMANCE WEB
ALÉM DO CARREGAMENTO

2. @sergio_caelum
sergiolopes.org

3. PERFORMANCE
EXECUÇÃO
INTERAÇÃO
ANIMAÇÃO

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

5. MAIN THREAD

8. QUEBRAR EM
BLOCOS MENORES
NÃO USAR
A MAIN THREAD

9. QUEBRAR EM
BLOCOS MENORES
NÃO USAR
A MAIN THREAD

13. setTimeout(funcao, 10);

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

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

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

17. QUEBRAR EM
BLOCOS MENORES
NÃO USAR
A MAIN THREAD

18. WEB WORKERS

21. MULTI THREAD

28. QUEBRAR EM
BLOCOS MENORES
NÃO USAR
A MAIN THREAD

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

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

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

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

46. PERFORMANCE WEB
ALÉM DO CARREGAMENTO

47. OBRIGADO!
sergiolopes.org
@sergio_caelum