Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Performance na web: o modelo RAIL e outras novidades

1.780 Aufrufe

Veröffentlicht am

Palestra do Sérgio Lopes no QCon SP 2016

Veröffentlicht in: Technologie

Performance na web: o modelo RAIL e outras novidades

  1. 1. PERFORMANCE NA WEB O MODELO RAIL E OUTRAS NOVIDADES
  2. 2. @sergio_caelum sergiolopes.org
  3. 3. OTIMIZAÇÕES WEB MINIFICAR CSS/JS COMPRIMIR HTML GZIP CONCATENAR CSS/JS SPRITES CACHE / EXPIRES OTIMIZAR IMAGENS JS NO FIM DA PÁGINA CSS NO TOPO ASSÍNCRONO LAZY-LOAD CDN DIMINUIR COOKIES PARALELIZAR REQs
  4. 4. PERFORMANCE?
  5. 5. ONLOAD
  6. 6. VÁRIAS PERFORMANCES CARREGAMENTO INTERAÇÃO ANIMAÇÃO MEMÓRIA BATERIA
  7. 7. LIMITES DA PERCEPÇÃO DE PERFORMANCE 100ms 1s 10s instantâneo mesma tarefa perde atenção
  8. 8. RAIL
  9. 9. Response Animation Idle Load
  10. 10. LOAD 1s
  11. 11. CRITICAL RENDERING PATH
  12. 12. ~600px ~9000px ABOVE THE FOLD (ATF)
  13. 13. < 14 KB (1 RTT) inline do CSS ATF inline do JS ATF flush ATF resto do CSS e JS tudo async
  14. 14. < 14 KB (1 RTT) inline do CSS ATF inline do JS ATF flush ATF resto do CSS e JS tudo async server push http/2
  15. 15. ANIMATION 60FPS
  16. 16. ANIMATION 16ms
  17. 17. elem1.style.top = elemX.offsetTop + 10 + 'px'; elem2.style.top = elemY.offsetTop + 10 + 'px'; elem3.style.top = elemZ.offsetTop + 10 + 'px'; elem4.style.top = elemW.offsetTop + 10 + 'px';
  18. 18. // reads var topX = elemX.offsetTop; var topY = elemY.offsetTop; var topZ = elemZ.offsetTop; var topW = elemW.offsetTop; // writes elem1.style.top = topX + 10 + 'px'; elem2.style.top = topY + 10 + 'px'; elem3.style.top = topZ + 10 + 'px'; elem4.style.top = topW + 10 + 'px';
  19. 19. .header-barraBusca { height: 100px; position: absolute; top: -100px; } botaoBusca.onclick = function() { container.classList.toggle('buscaVisivel'); };
  20. 20. .container { position: relative; } .container.buscaVisivel { top: 100px; }
  21. 21. .container { position: relative; top: 0; transition: top 500ms; } .container.buscaVisivel { top: 100px; }
  22. 22. .container { transition: transform 500ms; } .container.buscaVisivel { transform: translateY(100px); }
  23. 23. .container { transition: transform 500ms; will-change: transform; } .container.buscaVisivel { transform: translateY(100px); } .container { transition: transform 500ms; transform: translateZ(0); } .container.buscaVisivel { transform: translateY(100px); }
  24. 24. agrupar read / write DOM (fastdom) animação com CSS animação GPU (transform / opacity)
  25. 25. RESPONSE 100ms
  26. 26. registre o input em <100ms o máximo em background indique progresso se >500ms
  27. 27. RESPONSE + ANIMATION
  28. 28. IDLE 50ms
  29. 29. quebre a tarefa setTimeout / setImmediate / requestAnimationFrame / requestIdleCallback coisas pesadas em background Web Workers
  30. 30. // carrega videos assincronamente var containers = document.querySelectorAll('.elasticMedia-container[data-src]' for (var i = 0; i < containers.length; i++) { var src = containers[i].getAttribute('data-src'); containers[i].innerHTML = '<iframe class="elasticMedia" src="' + src + '" f }
  31. 31. setTimeout(function(){ // carrega videos assincronamente var containers = document.querySelectorAll('.elasticMedia-container[data-src]' for (var i = 0; i < containers.length; i++) { var src = containers[i].getAttribute('data-src'); containers[i].innerHTML = '<iframe class="elasticMedia" src="' + src + '" f } }, 500);
  32. 32. requestIdleCallback(function(){ // carrega videos assincronamente var containers = document.querySelectorAll('.elasticMedia-container[data-src]' for (var i = 0; i < containers.length; i++) { var src = containers[i].getAttribute('data-src'); containers[i].innerHTML = '<iframe class="elasticMedia" src="' + src + '" f } });
  33. 33. PERFORMANCE é UX
  34. 34. IDLE 50ms ANIMATION 16ms LOAD 1s RESPONSE 100ms
  35. 35. RAIL
  36. 36. OBRIGADO! sergiolopes.org @sergio_caelum

×