Execução, Interação, Animação. Palestra do Sérgio Lopes

1. PERFORMANCE WEB
ALÉM DO CARREGAMENTO

2. @sergio_caelum
sergiolopes.org

3. PERFORMANCE?

4. VÁRIAS PERFORMANCES

5. VÁRIAS PERFORMANCES
CARREGAMENTO

6. VÁRIAS PERFORMANCES
CARREGAMENTO
EXECUÇÃO

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

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

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

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

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

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

13. MAIN THREAD

16. RESPONSE 100ms

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

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

24. setTimeout(funcao, 10);

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

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

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

28. IDLE TIME

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

32. WEB WORKERS

35. MULTI THREAD

45. MELHORAR TTI DE SPA

46. MELHORAR TTI DE SPA
SERVER SIDE RENDERING

47. MELHORAR TTI DE SPA
SERVER SIDE RENDERING
MENOS DEPENDÊNCIAS

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

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

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

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

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

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

59. 60FPS

60. 60FPS
16ms

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

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

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

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

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

84. INICIAL

85. INICIAL FINAL

86. INICIAL FINAL

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

88. INICIAL

89. INICIAL FINAL

90. INICIAL FINAL
var posInicial = cartao.getBoundingClientRect();

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

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

93. INICIAL FINAL

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

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

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

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

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

99. INICIAL FINAL INVERTE

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

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

102. FIRST LAST INVERT PLAY
FLIP

103. FIRST LAST INVERT PLAY
FLIP

104. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
// preparaAnimacao
// disparaAnimacao
// aposAnimacao
}

105. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
}

106. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
}

107. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
}
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());

108. 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');

109. 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;
}

110. 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');
}

111. 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) => {

112. 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();

113. 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;

114. 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;

115. 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)`;

116. 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)`;
});

117. 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');
}

118. 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;
}

119. 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');
}

120. 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');
}

121. 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();
}

122. 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();
}

123. 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();
}

124. FLIP ANIMATION
First, Last, Invert, Play

127. PERFORMANCE WEB
ALÉM DO CARREGAMENTO

128. OBRIGADO!
sergiolopes.org
@sergio_caelum