InterCon 2016 - HTTP/2 for Web Application Developers

@sergio_caelum
sergiolopes.org

$ 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
Trying 64.233.171.121...
GET / HTTP/1.1
HTTP/1.1 200 OK
Date: Thu, 01 Apr 2017 18:37:18 GMT

REQUEST
RESPONSE
Trying 64.233.171.121...
GET / HTTP/1.1
HTTP/1.1 200 OK
Date: Thu, 01 Apr 2017 18:37:18 GMT

...ESPERA...
REQUEST
RESPONSE
Trying 64.233.171.121...
GET / HTTP/1.1
HTTP/1.1 200 OK
Date: Thu, 01 Apr 2017 18:37:18 GMT

MÉTODO E URL
STATUS
RESPOSTA
Trying 64.233.171.121...
GET / HTTP/1.1
HTTP/1.1 200 OK
Date: Thu, 01 Apr 2017 18:37:18 GMT

HEADERS
HEADERS
Trying 64.233.171.121...
GET / HTTP/1.1
HTTP/1.1 200 OK
Date: Thu, 01 Apr 2017 18:37:18 GMT

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
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 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

GET / HTTP/1.1
HTTP/1.1 200 OK
Date: Thu, 01 Apr 2017 18:37:18 GMT
<!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
Accept-Encoding: gzip
HTTP/1.1 200 OK
Date: Thu, 01 Apr 2017 18:37:18 GMT
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: /
Accept: text/html,application/xhtml+xml;q=0.9,image/jpeg
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_2)
Cookie: SID=786dads78asdbad876asdhjvb28
:method: GET
:path: /style.css
HTTP/1.1

:method: GET
:path: /
:path: /style.css
HTTP/2.0

:method: GET
:path: /
: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 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

HTTP 1.1 com Keep-Alive
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

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

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ú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

HTTP/2
COMPRESSÃO
CRIPTOGRAFIA
MULTIPLEXING
SERVER PUSH
PRIORIZAÇÃO
+MOBILE
+FÁCIL+PERFORMANCE
BINÁRIO
+COMPATÍVEL +SEGURO
+LEVE

OBRIGADO!
sergiolopes.org
@sergio_caelum

InterCon 2016 - HTTP/2 for Web Application Developers

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (9)

Ähnlich wie InterCon 2016 - HTTP/2 for Web Application Developers

Ähnlich wie InterCon 2016 - HTTP/2 for Web Application Developers (20)

Mehr von iMasters

Mehr von iMasters (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

InterCon 2016 - HTTP/2 for Web Application Developers