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

▶
performance web
SMART_READER_LITE
LIVE PREVIEW

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

Nov 11, 2022 190 likes •1.48k views

PERFORMANCE WEB ALM DO CARREGAMENTO @sergio_caelum sergiolopes.org PERFORMANCE? VRIAS PERFORMANCES VRIAS PERFORMANCES CARREGAMENTO VRIAS PERFORMANCES CARREGAMENTO EXECUO VRIAS PERFORMANCES CARREGAMENTO EXECUO

slide-1
SLIDE 1

PERFORMANCE WEB

ALÉM DO CARREGAMENTO

slide-2
SLIDE 2

@sergio_caelum sergiolopes.org

slide-3
SLIDE 3

PERFORMANCE?

slide-4
SLIDE 4

VÁRIAS PERFORMANCES

slide-5
SLIDE 5

VÁRIAS PERFORMANCES

CARREGAMENTO

slide-6
SLIDE 6

VÁRIAS PERFORMANCES

CARREGAMENTO EXECUÇÃO

slide-7
SLIDE 7

VÁRIAS PERFORMANCES

CARREGAMENTO EXECUÇÃO INTERAÇÃO

slide-8
SLIDE 8

VÁRIAS PERFORMANCES

CARREGAMENTO EXECUÇÃO INTERAÇÃO ANIMAÇÃO

slide-9
SLIDE 9

VÁRIAS PERFORMANCES

CARREGAMENTO EXECUÇÃO INTERAÇÃO ANIMAÇÃO MEMÓRIA, BATERIA

slide-10
SLIDE 10

PERFORMANCE

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

slide-11
SLIDE 11

PERFORMANCE

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

slide-12
SLIDE 12

PERFORMANCE

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

slide-13
SLIDE 13

MAIN THREAD

slide-14
SLIDE 14
slide-15
SLIDE 15
slide-16
SLIDE 16

RESPONSE 100ms

slide-17
SLIDE 17

QUEBRAR EM BLOCOS MENORES NÃO USAR A MAIN THREAD

slide-18
SLIDE 18

QUEBRAR EM BLOCOS MENORES NÃO USAR A MAIN THREAD

slide-19
SLIDE 19
slide-20
SLIDE 20
slide-21
SLIDE 21
slide-22
SLIDE 22
slide-23
SLIDE 23
slide-24
SLIDE 24

setTimeout(funcao, 10);

slide-25
SLIDE 25

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

slide-26
SLIDE 26

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

slide-27
SLIDE 27

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

slide-28
SLIDE 28

IDLE TIME

slide-29
SLIDE 29
slide-30
SLIDE 30
slide-31
SLIDE 31

QUEBRAR EM BLOCOS MENORES NÃO USAR A MAIN THREAD

slide-32
SLIDE 32

WEB WORKERS

slide-33
SLIDE 33
slide-34
SLIDE 34
slide-35
SLIDE 35

MULTI THREAD

slide-36
SLIDE 36
slide-37
SLIDE 37
slide-38
SLIDE 38
slide-39
SLIDE 39
slide-40
SLIDE 40
slide-41
SLIDE 41
slide-42
SLIDE 42
slide-43
SLIDE 43
slide-44
SLIDE 44
slide-45
SLIDE 45

MELHORAR TTI DE SPA

slide-46
SLIDE 46

MELHORAR TTI DE SPA

SERVER SIDE RENDERING

slide-47
SLIDE 47

MELHORAR TTI DE SPA

SERVER SIDE RENDERING MENOS DEPENDÊNCIAS

slide-48
SLIDE 48

MELHORAR TTI DE SPA

SERVER SIDE RENDERING MENOS DEPENDÊNCIAS CODE SPLITTING

slide-49
SLIDE 49

MELHORAR TTI DE SPA

SERVER SIDE RENDERING MENOS DEPENDÊNCIAS CODE SPLITTING TREE SHAKING

slide-50
SLIDE 50

MELHORAR TTI DE SPA

SERVER SIDE RENDERING MENOS DEPENDÊNCIAS CODE SPLITTING TREE SHAKING AOT COMPILER

slide-51
SLIDE 51

MELHORAR TTI DE SPA

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

slide-52
SLIDE 52

QUEBRAR EM BLOCOS MENORES NÃO USAR A MAIN THREAD

slide-53
SLIDE 53
slide-54
SLIDE 54
slide-55
SLIDE 55
slide-56
SLIDE 56
slide-57
SLIDE 57

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

slide-58
SLIDE 58
slide-59
SLIDE 59

60FPS

slide-60
SLIDE 60

60FPS 16ms

slide-61
SLIDE 61
slide-62
SLIDE 62
slide-63
SLIDE 63
slide-64
SLIDE 64

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

slide-65
SLIDE 65

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

slide-66
SLIDE 66
slide-67
SLIDE 67
slide-68
SLIDE 68

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

slide-69
SLIDE 69
slide-70
SLIDE 70
slide-71
SLIDE 71
slide-72
SLIDE 72
slide-73
SLIDE 73

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

slide-74
SLIDE 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); }

slide-75
SLIDE 75
slide-76
SLIDE 76
slide-77
SLIDE 77
slide-78
SLIDE 78
slide-79
SLIDE 79
slide-80
SLIDE 80
slide-81
SLIDE 81
slide-82
SLIDE 82
slide-83
SLIDE 83
slide-84
SLIDE 84

INICIAL

slide-85
SLIDE 85

INICIAL FINAL

slide-86
SLIDE 86

INICIAL FINAL

slide-87
SLIDE 87

INICIAL FINAL

  • pacity: 0;

transition: opacity 500ms ease-out;

slide-88
SLIDE 88

INICIAL

slide-89
SLIDE 89

INICIAL FINAL

slide-90
SLIDE 90

INICIAL FINAL

var posInicial = cartao.getBoundingClientRect();

slide-91
SLIDE 91

INICIAL FINAL

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

slide-92
SLIDE 92

INICIAL FINAL

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

slide-93
SLIDE 93

INICIAL FINAL

slide-94
SLIDE 94

INICIAL FINAL

var x = posInicial.left - posFinal.left;

slide-95
SLIDE 95

INICIAL FINAL

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

slide-96
SLIDE 96

INICIAL FINAL

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

slide-97
SLIDE 97

INICIAL FINAL

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

slide-98
SLIDE 98

INICIAL FINAL INVERTE

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

slide-99
SLIDE 99

INICIAL FINAL INVERTE

slide-100
SLIDE 100

INICIAL FINAL INVERTE

transform: none; transition: transform 500ms ease-out;

slide-101
SLIDE 101

INICIAL FINAL INVERTE PLAY

transform: none; transition: transform 500ms ease-out;

slide-102
SLIDE 102

FIRST LAST INVERT PLAY

FLIP

slide-103
SLIDE 103

FIRST LAST INVERT PLAY

FLIP

slide-104
SLIDE 104

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

slide-105
SLIDE 105

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

slide-106
SLIDE 106

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

slide-107
SLIDE 107

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

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

slide-109
SLIDE 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; }

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

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

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

slide-113
SLIDE 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;

slide-114
SLIDE 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;

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

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

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

slide-118
SLIDE 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 {

  • pacity: 0;

}

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

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

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

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

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

slide-124
SLIDE 124

FLIP ANIMATION

First, Last, Invert, Play

slide-125
SLIDE 125
slide-126
SLIDE 126
slide-127
SLIDE 127

PERFORMANCE WEB

ALÉM DO CARREGAMENTO

slide-128
SLIDE 128

OBRIGADO!

sergiolopes.org @sergio_caelum