HTTP 2.0
@sergio_caelum
sergiolopes.org
REVIEW
HTTP
$ telnet www.alura.com.br 80
Trying 64.233.171.121...
Connected to ghs.googlehosted.com.
Escape character is '^]'.
GET / H...
TEXTO
$ telnet www.alura.com.br 80
Trying 64.233.171.121...
Connected to ghs.googlehosted.com.
Escape character is '^]'.
G...
REQUEST
RESPONSE
$ telnet www.alura.com.br 80
Trying 64.233.171.121...
Connected to ghs.googlehosted.com.
Escape character...
...ESPERA...
REQUEST
RESPONSE
$ telnet www.alura.com.br 80
Trying 64.233.171.121...
Connected to ghs.googlehosted.com.
Esc...
MÉTODO E URL
STATUS
RESPOSTA
$ telnet www.alura.com.br 80
Trying 64.233.171.121...
Connected to ghs.googlehosted.com.
Esca...
HEADERS
HEADERS
$ telnet www.alura.com.br 80
Trying 64.233.171.121...
Connected to ghs.googlehosted.com.
Escape character ...
texto
request > espera > response
headers
HTTP
cliente servidor
cliente servidor
HTTP 1.1
CONEXÃO TCP
REQUEST
REQUEST
CONEXÃO TCP
cliente servidor
REQUEST
REQUEST #2
REQUEST #3
CONEXÃO TCP
cliente servidor
TCP
HANDSHAKE
REQUEST
REQUEST #2
REQUEST #3
cliente servidor
TCP
HANDSHAKE
REQUEST
REQUEST #2
REQUEST #3
...
OTIMIZAÇÕES WEB
JUNTAR CSS E JS
SPRITES
INLINE DE RECURSOS
GZIP
MINIFICAÇÃO
DOMÍNIOS SEM COOKIES
MÚLTIPLOS HOSTNAMES
dimin...
O NOVO
HTTP/2
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:...
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...
?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...
?????????
???????
????????
????????
??????????????????????????????????????????????????????????
???????????????????????????...
TUDO BINÁRIO
HPACK
GZIP*
TLS*
:method: GET
:path: /
Host: www.alura.com.br
Accept: text/html,application/xhtml+xml;q=0.9,image/jpeg
Accept-Encoding: gzi...
:method: GET
:path: /
Host: www.alura.com.br
Accept: text/html,application/xhtml+xml;q=0.9,image/jpeg
Accept-Encoding: gzi...
:method: GET
:path: /
Host: www.alura.com.br
Accept: text/html,application/xhtml+xml;q=0.9,image/jpeg
Accept-Encoding: gzi...
:method: GET
:path: /
Host: www.alura.com.br
Accept: text/html,application/xhtml+xml;q=0.9,image/jpeg
Accept-Encoding: gzi...
HEADER TABLES
MENOS BYTES
REQUEST e RESPONSE
STATEFUL
OTIMIZAÇÕES WEB
JUNTAR CSS E JS
SPRITES
INLINE DE RECURSOS
GZIP
MINIFICAÇÃO
DOMÍNIOS SEM COOKIES
diminuir
requests
diminui...
OTIMIZAÇÕES WEB
JUNTAR CSS E JS
SPRITES
INLINE DE RECURSOS
GZIP
MINIFICAÇÃO
DOMÍNIOS SEM COOKIES
diminuir
requests
diminui...
HTTP 1.1 com Keep-Alive
cliente servidor
HTTP 1.1 com Pipelining*
cliente servidor
HTTP 1.1 com Pipelining*
cliente servidor
HTTP 1.1 com Pipelining*
Head of Line Blocking
...
...
cliente servidor
HTTP 2.0 multiplexing
cliente servidor
MULTIPLEXING
1 CONEXÃO TCP
ASSÍNCRONO
OTIMIZAÇÕES WEB
JUNTAR CSS E JS
SPRITES
INLINE DE RECURSOS
GZIP
MINIFICAÇÃO
DOMÍNIOS SEM COOKIES
diminuir
requests
diminui...
OTIMIZAÇÕES WEB
JUNTAR CSS E JS
SPRITES
INLINE DE RECURSOS
GZIP
MINIFICAÇÃO
DOMÍNIOS SEM COOKIES
diminuir
requests
diminui...
OTIMIZAÇÕES WEB
JUNTAR CSS E JS
SPRITES
INLINE DE RECURSOS
GZIP
MINIFICAÇÃO
DOMÍNIOS SEM COOKIES
MÚLTIPLOS HOSTNAMES
dimin...
INLINE
DIMINUIR REQUESTS
PRIORIZAR CONTEÚDO
priorizar conteúdo
<!DOCTYPE html>
<html>
<head>
<style>
/* estilo para o ATF */
</style>
<script>
/* javascript important...
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="estilo.css">
<script src="app.js" async></script>
</head>
<body...
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="estilo.css">
<script src="app.js" async></script>
</head>
<body...
index.html
estilo.css jquery.js
plugin.js
app.js foto.jpg
logo.png
12 8 8 4
4 8
priorizar conteúdo
index.html
app.js
estilo.css
foto.jpg
jquery.js
plugin.js
app.js
estilo.css
foto.jpg
jquery.js
plugin.js
priorizar conteúd...
index.html
index.html bloqueante
espera
cliente servidor
index.html
app.js
estilo.css
foto.jpg
jquery.js
plugin.js
Server Push
cliente servidor
index.html
app.js
estilo.css
foto.jpg
jquery.js
plugin.js
cliente servidor
Server Push
index.html
style.css
index.html
icone.png
index.html
style.css
index.html
icone.png
cliente servidor
cliente servidor
Serv...
SERVER PUSH
PRIORIZAÇÃO
CACHEÁVEL
CANCELÁVEL*
SERVER PUSH
CASPer(cache-aware server-push)
Cache Digests
OTIMIZAÇÕES WEB
JUNTAR CSS E JS
SPRITES
INLINE DE RECURSOS
GZIP
MINIFICAÇÃO
DOMÍNIOS SEM COOKIES
diminuir
requests
diminui...
OTIMIZAÇÕES WEB
JUNTAR CSS E JS
SPRITES
INLINE DE RECURSOS
GZIP
MINIFICAÇÃO
DOMÍNIOS SEM COOKIES
diminuir
requests
diminui...
HTTP/2
COMPRESSÃO
CRIPTOGRAFIA
MULTIPLEXING
SERVER PUSH
PRIORIZAÇÃO
+MOBILE
+FÁCIL+PERFORMANCE
BINÁRIO
+COMPATÍVEL +SEGURO...
OBRIGADO!
sergiolopes.org
@sergio_caelum
InterCon 2016 - HTTP/2 for Web Application Developers
InterCon 2016 - HTTP/2 for Web Application Developers
InterCon 2016 - HTTP/2 for Web Application Developers
Próximos SlideShares
Carregando em…5
×

InterCon 2016 - HTTP/2 for Web Application Developers

131 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
131
No SlideShare
0
A partir de incorporações
0
Número de incorporações
0
Ações
Compartilhamentos
0
Downloads
2
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

×