55
HTTP 2.0
| Date post: | 16-Apr-2017 |
| Category: |
Technology |
| Upload: | imasters |
| View: | 143 times |
| Download: | 0 times |
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 / 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>
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>
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>
... 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>
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>
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>
texto
request > espera > responseheaders
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
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
OTIMIZAÇÕES WEBJUNTAR CSS E JS SPRITES INLINE DE RECURSOS
GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES
MÚLTIPLOS HOSTNAMES
diminuir requests
diminuir tráfego
paralelizar requests
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: 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
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
?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
?????????
??????? ???????? ????????
?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
HPACK
GZIP
TLS
TLS
HTTP/2.0
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: 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
: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
: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
: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
HEADER TABLES
MENOS BYTES REQUEST e RESPONSE STATEFUL
OTIMIZAÇÕES WEBJUNTAR CSS E JS SPRITES INLINE DE RECURSOS
GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES
diminuir requests
diminuir tráfego
paralelizar requests MÚLTIPLOS HOSTNAMES
OTIMIZAÇÕES WEBJUNTAR CSS E JS SPRITES INLINE DE RECURSOS
GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES
diminuir requests
diminuir tráfego
paralelizar requests MÚLTIPLOS HOSTNAMES
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 WEBJUNTAR CSS E JS SPRITES INLINE DE RECURSOS
GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES
diminuir requests
diminuir tráfego
paralelizar requests MÚLTIPLOS HOSTNAMES
OTIMIZAÇÕES WEBJUNTAR CSS E JS SPRITES INLINE DE RECURSOS
GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES
diminuir requests
diminuir tráfego
paralelizar requests MÚLTIPLOS HOSTNAMES
OTIMIZAÇÕES WEBJUNTAR CSS E JS SPRITES INLINE DE RECURSOS
GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES
MÚLTIPLOS HOSTNAMES
diminuir requests
diminuir tráfego
paralelizar requests
INLINE
DIMINUIR REQUESTS PRIORIZAR CONTEÚDO
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>
<!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
<!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
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.jpgjquery.jsplugin.js
app.js
estilo.css
foto.jpg
jquery.js
plugin.js
priorizar conteúdo
cliente servidor
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
Server Push Cancelável
SERVER PUSH
PRIORIZAÇÃO CACHEÁVEL CANCELÁVEL*
SERVER PUSH
CASPer (cache-aware server-push)
Cache Digests
OTIMIZAÇÕES WEBJUNTAR CSS E JS SPRITES INLINE DE RECURSOS
GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES
diminuir requests
diminuir tráfego
paralelizar requests MÚLTIPLOS HOSTNAMES
OTIMIZAÇÕES WEBJUNTAR CSS E JS SPRITES INLINE DE RECURSOS
GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES
diminuir requests
diminuir tráfego
paralelizar requests MÚLTIPLOS HOSTNAMES
HTTP/2
COMPRESSÃOCRIPTOGRAFIA
MULTIPLEXING
SERVER PUSHPRIORIZAÇÃO
+MOBILE+FÁCIL+PERFORMANCE
BINÁRIO
+COMPATÍVEL +SEGURO+LEVE
OBRIGADO!
sergiolopes.org @sergio_caelum
