InterCon 2016 - HTTP/2 for Web Application Developers

161 visualizações

Publicada em

Sergio Lopes, Developer & Director da Caelum fala sobre HTTP/2 for Web Application Developers no InterCon 2016.
Saiba mais em http://intercon2016.imasters.com.br/

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
161
No SlideShare
0
A partir de incorporações
0
Número de incorporações
0
Ações
Compartilhamentos
0
Downloads
3
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

InterCon 2016 - HTTP/2 for Web Application Developers

  1. 1. HTTP 2.0
  2. 2. @sergio_caelum sergiolopes.org
  3. 3. REVIEW HTTP
  4. 4. $ telnet www.alura.com.br 80 Trying 64.233.171.121... Connected to ghs.googlehosted.com. Escape character is '^]'. GET / HTTP/1.1 Host: www.alura.com.br HTTP/1.1 200 OK Content-Type: text/html; charset=utf-8 Vary: Accept-Encoding,User-Agent Content-Language: pt-br Date: Thu, 01 Apr 2017 18:37:18 GMT Server: Google Frontend Cache-Control: private <!DOCTYPE html><html><head><title>Caelum</title>
  5. 5. TEXTO $ telnet www.alura.com.br 80 Trying 64.233.171.121... Connected to ghs.googlehosted.com. Escape character is '^]'. GET / HTTP/1.1 Host: www.alura.com.br HTTP/1.1 200 OK Content-Type: text/html; charset=utf-8 Vary: Accept-Encoding,User-Agent Content-Language: pt-br Date: Thu, 01 Apr 2017 18:37:18 GMT Server: Google Frontend Cache-Control: private <!DOCTYPE html><html><head><title>Caelum</title>
  6. 6. REQUEST RESPONSE $ telnet www.alura.com.br 80 Trying 64.233.171.121... Connected to ghs.googlehosted.com. Escape character is '^]'. GET / HTTP/1.1 Host: www.alura.com.br HTTP/1.1 200 OK Content-Type: text/html; charset=utf-8 Vary: Accept-Encoding,User-Agent Content-Language: pt-br Date: Thu, 01 Apr 2017 18:37:18 GMT Server: Google Frontend Cache-Control: private <!DOCTYPE html><html><head><title>Caelum</title>
  7. 7. ...ESPERA... REQUEST RESPONSE $ telnet www.alura.com.br 80 Trying 64.233.171.121... Connected to ghs.googlehosted.com. Escape character is '^]'. GET / HTTP/1.1 Host: www.alura.com.br HTTP/1.1 200 OK Content-Type: text/html; charset=utf-8 Vary: Accept-Encoding,User-Agent Content-Language: pt-br Date: Thu, 01 Apr 2017 18:37:18 GMT Server: Google Frontend Cache-Control: private <!DOCTYPE html><html><head><title>Caelum</title>
  8. 8. MÉTODO E URL STATUS RESPOSTA $ telnet www.alura.com.br 80 Trying 64.233.171.121... Connected to ghs.googlehosted.com. Escape character is '^]'. GET / HTTP/1.1 Host: www.alura.com.br HTTP/1.1 200 OK Content-Type: text/html; charset=utf-8 Vary: Accept-Encoding,User-Agent Content-Language: pt-br Date: Thu, 01 Apr 2017 18:37:18 GMT Server: Google Frontend Cache-Control: private <!DOCTYPE html><html><head><title>Caelum</title>
  9. 9. HEADERS HEADERS $ telnet www.alura.com.br 80 Trying 64.233.171.121... Connected to ghs.googlehosted.com. Escape character is '^]'. GET / HTTP/1.1 Host: www.alura.com.br HTTP/1.1 200 OK Content-Type: text/html; charset=utf-8 Vary: Accept-Encoding,User-Agent Content-Language: pt-br Date: Thu, 01 Apr 2017 18:37:18 GMT Server: Google Frontend Cache-Control: private <!DOCTYPE html><html><head><title>Caelum</title>
  10. 10. texto request > espera > response headers HTTP
  11. 11. cliente servidor cliente servidor HTTP 1.1 CONEXÃO TCP REQUEST REQUEST CONEXÃO TCP
  12. 12. cliente servidor REQUEST REQUEST #2 REQUEST #3 CONEXÃO TCP
  13. 13. cliente servidor TCP HANDSHAKE REQUEST REQUEST #2 REQUEST #3 cliente servidor TCP HANDSHAKE REQUEST REQUEST #2 REQUEST #3 cliente servidor TCP HANDSHAKE REQUEST REQUEST #2 REQUEST #3 cliente servidor TCP HANDSHAKE REQUEST REQUEST #2 REQUEST #3 cliente servidor TCP HANDSHAKE REQUEST REQUEST #2 REQUEST #3 cliente servidor TCP HANDSHAKE REQUEST REQUEST #2 REQUEST #3 de 4 a 8 conexões
  14. 14. OTIMIZAÇÕES WEB JUNTAR CSS E JS SPRITES INLINE DE RECURSOS GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES MÚLTIPLOS HOSTNAMES diminuir requests diminuir tráfego paralelizar requests
  15. 15. O NOVO HTTP/2
  16. 16. GET / HTTP/1.1 Host: www.alura.com.br HTTP/1.1 200 OK Content-Type: text/html; charset=utf-8 Content-Language: pt-br Date: Thu, 01 Apr 2017 18:37:18 GMT Cache-Control: private <!DOCTYPE html><html><head><title>Alura</title> <meta name=viewport content=width=device-width> <meta name=description content="Cursos online de tecnologia, programação, front-end, mobile, design, ux, infra e muito mais"><style> HTTP/1.1
  17. 17. GET / HTTP/1.1 Host: www.alura.com.br Accept-Encoding: gzip HTTP/1.1 200 OK Content-Type: text/html; charset=utf-8 Content-Language: pt-br Date: Thu, 01 Apr 2017 18:37:18 GMT Cache-Control: private Content-Encoding: gzip Vary: Accept-Encoding ??[mŚ???,l?T?%.?JI?;1?R0??E?д?H{{?un??Tm??:?U?5DI??su? L??!???ӵm?_?{-??bՓ?u??6?1,W??N?C.?0?f*??ꮘ?BV?????!#m|? x???L? Q???֝?U?.?MZ跘?M?JN_?I??RNN???}Y??????cM?<?T?l U????8?Π???id?c?8)E8??%:?$D*ⰹ?????$4???j?F? ((R2[??O?;s???ާy??Fd⒙HK?x?-?$???ȈȈ??????????O GZIP HTTP/1.1
  18. 18. ?c?8)E8??%:?$ ?T?%.?JI?;1?R ,l?T?%.?JI?;1?R ?c?8)E8??%:?$ ??[mŚ???,l?T?%.?JI?;1?R0??E?д?H{{?un??Tm??:?U?5DI??su? L??!???ӵm?_?{-??bՓ?u??6?1,W??N?C.?0?f*??ꮘ?BV?????!#m|? x???L? Q???֝?U?.?MZ跘?M?JN_?I??RNN???}Y??????cM?<?T?l U????8?Π???id?c?8)E8??%:?$D*ⰹ?????$4???j?F? ((R2[??O?;s???ާy??Fd⒙HK?x?-?$???ȈȈ??????????O HPACK GZIP HTTP/2.0
  19. 19. ????????? ??????? ???????? ???????? ?????????????????????????????????????????????????????????? ?????????????????????????????????????????????????????????? ?????????????????????????????????????????????????????????? ?????????????????????????????????????????????????????????? ????????????????????????????????????????????????????????? HPACK GZIP TLS TLS HTTP/2.0
  20. 20. TUDO BINÁRIO HPACK GZIP* TLS*
  21. 21. :method: GET :path: / Host: www.alura.com.br Accept: text/html,application/xhtml+xml;q=0.9,image/jpeg Accept-Encoding: gzip User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_2) Cookie: SID=786dads78asdbad876asdhjvb28 :method: GET :path: /style.css Host: www.alura.com.br Accept: text/html,application/xhtml+xml;q=0.9,image/jpeg Accept-Encoding: gzip User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_2) Cookie: SID=786dads78asdbad876asdhjvb28 HTTP/1.1
  22. 22. :method: GET :path: / Host: www.alura.com.br Accept: text/html,application/xhtml+xml;q=0.9,image/jpeg Accept-Encoding: gzip User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_2) Cookie: SID=786dads78asdbad876asdhjvb28 :method: GET :path: /style.css Host: www.alura.com.br Accept: text/html,application/xhtml+xml;q=0.9,image/jpeg Accept-Encoding: gzip User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_2) Cookie: SID=786dads78asdbad876asdhjvb28 HTTP/1.1
  23. 23. :method: GET :path: / Host: www.alura.com.br Accept: text/html,application/xhtml+xml;q=0.9,image/jpeg Accept-Encoding: gzip User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_2) Cookie: SID=786dads78asdbad876asdhjvb28 :path: /style.css HTTP/2.0
  24. 24. :method: GET :path: / Host: www.alura.com.br Accept: text/html,application/xhtml+xml;q=0.9,image/jpeg Accept-Encoding: gzip User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_2) Cookie: SID=786dads78asdbad876asdhjvb28 :path: /style.css :path: /main.js :path: /imagem.jpg Host: images.caelum.com.br HTTP/2.0
  25. 25. HEADER TABLES MENOS BYTES REQUEST e RESPONSE STATEFUL
  26. 26. OTIMIZAÇÕES WEB JUNTAR CSS E JS SPRITES INLINE DE RECURSOS GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES diminuir requests diminuir tráfego paralelizar requests MÚLTIPLOS HOSTNAMES
  27. 27. OTIMIZAÇÕES WEB JUNTAR CSS E JS SPRITES INLINE DE RECURSOS GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES diminuir requests diminuir tráfego paralelizar requests MÚLTIPLOS HOSTNAMES
  28. 28. HTTP 1.1 com Keep-Alive cliente servidor
  29. 29. HTTP 1.1 com Pipelining* cliente servidor
  30. 30. HTTP 1.1 com Pipelining* cliente servidor
  31. 31. HTTP 1.1 com Pipelining* Head of Line Blocking ... ... cliente servidor
  32. 32. HTTP 2.0 multiplexing cliente servidor
  33. 33. MULTIPLEXING 1 CONEXÃO TCP ASSÍNCRONO
  34. 34. OTIMIZAÇÕES WEB JUNTAR CSS E JS SPRITES INLINE DE RECURSOS GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES diminuir requests diminuir tráfego paralelizar requests MÚLTIPLOS HOSTNAMES
  35. 35. OTIMIZAÇÕES WEB JUNTAR CSS E JS SPRITES INLINE DE RECURSOS GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES diminuir requests diminuir tráfego paralelizar requests MÚLTIPLOS HOSTNAMES
  36. 36. OTIMIZAÇÕES WEB JUNTAR CSS E JS SPRITES INLINE DE RECURSOS GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES MÚLTIPLOS HOSTNAMES diminuir requests diminuir tráfego paralelizar requests
  37. 37. INLINE DIMINUIR REQUESTS PRIORIZAR CONTEÚDO
  38. 38. priorizar conteúdo <!DOCTYPE html> <html> <head> <style> /* estilo para o ATF */ </style> <script> /* javascript importante */ </script> /* javascript pra depois */ <script src="secundario.js" async></script> </head> <body> ... </body> </html>
  39. 39. <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="estilo.css"> <script src="app.js" async></script> </head> <body> <img src="foto.jpg"> ... <script src="jquery.js"></script> <script src="plugin.js"></script> </body> </html> priorizar conteúdo
  40. 40. <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="estilo.css"> <script src="app.js" async></script> </head> <body> <img src="foto.jpg"> ... <script src="jquery.js"></script> <script src="plugin.js"></script> </body> </html> priorizar conteúdo
  41. 41. index.html estilo.css jquery.js plugin.js app.js foto.jpg logo.png 12 8 8 4 4 8 priorizar conteúdo
  42. 42. index.html app.js estilo.css foto.jpg jquery.js plugin.js app.js estilo.css foto.jpg jquery.js plugin.js priorizar conteúdo cliente servidor
  43. 43. index.html index.html bloqueante espera cliente servidor
  44. 44. index.html app.js estilo.css foto.jpg jquery.js plugin.js Server Push cliente servidor
  45. 45. index.html app.js estilo.css foto.jpg jquery.js plugin.js cliente servidor Server Push
  46. 46. index.html style.css index.html icone.png index.html style.css index.html icone.png cliente servidor cliente servidor Server Push Cancelável
  47. 47. SERVER PUSH PRIORIZAÇÃO CACHEÁVEL CANCELÁVEL*
  48. 48. SERVER PUSH CASPer(cache-aware server-push) Cache Digests
  49. 49. OTIMIZAÇÕES WEB JUNTAR CSS E JS SPRITES INLINE DE RECURSOS GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES diminuir requests diminuir tráfego paralelizar requests MÚLTIPLOS HOSTNAMES
  50. 50. OTIMIZAÇÕES WEB JUNTAR CSS E JS SPRITES INLINE DE RECURSOS GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES diminuir requests diminuir tráfego paralelizar requests MÚLTIPLOS HOSTNAMES
  51. 51. HTTP/2 COMPRESSÃO CRIPTOGRAFIA MULTIPLEXING SERVER PUSH PRIORIZAÇÃO +MOBILE +FÁCIL+PERFORMANCE BINÁRIO +COMPATÍVEL +SEGURO +LEVE
  52. 52. OBRIGADO! sergiolopes.org @sergio_caelum

×