Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Desafios de Performance Web - BrazilJS

2,152 views

Published on

Palestra do Sérgio Lopes na BrazilJS 2016. Critical Path, Priorização de ATF, server-push, preload, animations, FLIP

Published in: Technology
  • DOWNLOAD FULL. BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Desafios de Performance Web - BrazilJS

  1. 1. DESAFIOS PRÁTICOS DE PERFORMANCE WEB
  2. 2. @sergio_caelum sergiolopes.org
  3. 3. @sergio_caelum sergiolopes.org
  4. 4. ~600px ~7.000px ATFABOVE THE FOLD
  5. 5. CRITICAL RENDERING PATH
  6. 6. PRIORIZAR ATF
  7. 7. CSS / JS ATF RESTO INLINE ASYNC
  8. 8. HTMLATF + CSS ATF + JS ATF +<= 14KB
  9. 9. FLUSH ATF
  10. 10. WEB FONTS
  11. 11. INLINE? SERVER-PUSH!
  12. 12. SERVER-PUSH? PRELOAD!
  13. 13. <link rel="preload" as="image" href="hero.jpg">
  14. 14. <link rel="preload" as="font" href="opensans.woff2" type="font/woff2" media="(min-width: 600px)" crossorigin>
  15. 15. CARREGAMENTO, EXECUÇÃO, ANIMAÇÃO
  16. 16. BACKGROUND Web Workers
  17. 17. QUEBRE A TAREFA setTimeout / setImmediate / requestAnimationFrame / requestIdleCallback BACKGROUND Web Workers
  18. 18. ANIMATION
  19. 19. ANIMATION 60FPS
  20. 20. ANIMATION 16ms
  21. 21. .header-barraBusca { height: 100px; position: absolute; top: -100px; } botaoBusca.onclick = function() { container.classList.toggle('buscaVisivel'); };
  22. 22. .container { position: relative; } .container.buscaVisivel { top: 100px; }
  23. 23. .container { position: relative; top: 0; transition: top 500ms; } .container.buscaVisivel { top: 100px; }
  24. 24. .container { position: relative; top: 0; transition: top 500ms; } .container.buscaVisivel { top: 100px; }
  25. 25. .container { transition: transform 500ms; } .container.buscaVisivel { transform: translateY(100px); }
  26. 26. .container { transition: transform 500ms; will-change: transform; } .container.buscaVisivel { transform: translateY(100px); }
  27. 27. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick)); function cartaoOnClick() { // preparaAnimacao // disparaAnimacao // aposAnimacao }
  28. 28. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick)); function cartaoOnClick() { preparaAnimacao(this); // disparaAnimacao // aposAnimacao } function preparaAnimacao(cartaoARemover) { }
  29. 29. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick)); function cartaoOnClick() { preparaAnimacao(this); // disparaAnimacao // aposAnimacao } function preparaAnimacao(cartaoARemover) { }
  30. 30. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick)); function cartaoOnClick() { preparaAnimacao(this); // disparaAnimacao // aposAnimacao } function preparaAnimacao(cartaoARemover) { } var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
  31. 31. 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');
  32. 32. 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; }
  33. 33. 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'); }
  34. 34. 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) => {
  35. 35. 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();
  36. 36. 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;
  37. 37. 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;
  38. 38. 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)`;
  39. 39. 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)`; });
  40. 40. 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'); }
  41. 41. 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; }
  42. 42. 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'); }
  43. 43. 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'); }
  44. 44. 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(); }
  45. 45. 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(); }
  46. 46. DESAFIOS PRÁTICOS DE PERFORMANCE WEB
  47. 47. OBRIGADO! sergiolopes.org @sergio_caelum

×