Como o HTTP/2 vai mudar sua vida

HTTP/2

@sergio_caelum sergiolopes.org

review

HTTP em 5 slides

$ telnet www.caelum.com.br 80 Trying 64.233.171.121... Connected to ghs.googlehosted.com. Escape character is '^]'.

GET / HTTP/1.1 Host: www.caelum.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, 03 Apr 2014 18:37:18 GMT Server: Google Frontend Cache-‐Control: private

<!DOCTYPE html><html><head><title>Caelum</title>





TEXTO

REQUEST

RESPONSE





REQUEST

RESPONSE... ESPERA ...





MÉTODO E URL

STATUS

RESPOSTA





HEADERS

HEADERS





httptexto

request > espera > responseheaders

cliente servidor

cliente servidor

HTTP 1.1

CONEXÃO TCP

REQUEST

REQUEST

CONEXÃO TCP

cliente servidor

Keep-Alive

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

otimizações webdiminuir requests


diminuir tráfego


diminuir tráfego

paralelizar requests

otimizações webJUNTAR CSS E JS SPRITES INLINE DE RECURSOS

diminuir requests

diminuir tráfego



GZIP MINIFICAÇÃO DOMÍNIOS SEM COOKIES

diminuir requests

diminuir tráfego




MÚLTIPLOS HOSTNAMES CDNs

diminuir requests

diminuir tráfego


o fantástico mundo do

HTTP/2 (e do SPDY)


HTTP/1.1 200 OK Content-‐Type: text/html; charset=utf-‐8 Content-‐Language: pt-‐br Date: Thu, 03 Apr 2015 18:37:18 GMT Cache-‐Control: private

<!DOCTYPE html><html><head><title>Caelum</title> <meta name=viewport content=width=device-‐width> <meta name=description content="A Caelum tem os cursos de Java, Android, Scrum, Rails, .NET, HTML e CSS mais reconhecidos no mercado"><style>

http 1.1

GET / HTTP/1.1 Host: www.caelum.com.br Accept-‐Encoding: gzip

HTTP/1.1 200 OK Content-‐Type: text/html; charset=utf-‐8 Content-‐Language: pt-‐br Date: Thu, 03 Apr 2015 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

http 1.1

GZIP

0101010101010101010101

010101010101 0101010101010 101010101010 0101010101010





http 2.0

BINÁRIO

GZIP

?c?8)E8??%:?$

?T?%.?JI?;1?R ,l?T?%.?JI?;1?R ?c?8)E8??%:?$





http 2.0

BINÁRIO HPACK

GZIP

?????????

??????? ???????? ????????

?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????

http 2.0

BINÁRIO HPACK

GZIP

TLS

TLS

HEADER BINÁRIO GZIP / HPACK

TLS*

cliente servidor

HTTP 1.1 com Keep-Alive

cliente servidor

HTTP 1.1 com Pipelining*

cliente servidor


cliente servidor


Head of Line Blocking...

...

cliente servidor

HTTP 2.0 multiplexing

multiplexing

1 CONEXÃO TCP ASSÍNCRONO




diminuir requests

diminuir tráfego





diminuir requests

diminuir tráfego





diminuir requests

diminuir tráfego





diminuir requests

diminuir tráfego


:method: GET :path: / Host: www.caelum.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.caelum.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: /style.css Host: www.caelum.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


:path: /style.css

http 2.0


: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



diminuir requests

diminuir tráfego





diminuir requests

diminuir tráfego



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

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

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

index.html

priorizar conteúdo

index.html

estilo.css

priorizar conteúdo

index.html

estilo.css app.js

priorizar conteúdo

index.html

estilo.css jquery.jsapp.js

priorizar conteúdo

index.html

estilo.css jquery.jsapp.js foto.jpg

priorizar conteúdo

index.html

estilo.css jquery.js

plugin.js

app.js foto.jpg

priorizar conteúdo

index.html


plugin.js

app.js foto.jpg

priorizar conteúdo

index.html


plugin.js

app.js foto.jpg

priorizar conteúdo

index.html


plugin.js

app.js foto.jpg

priorizar conteúdo

index.html


plugin.js

app.js foto.jpg

priorizar conteúdo

index.html


plugin.js

app.js foto.jpg

priorizar conteúdo

index.html


plugin.js

app.js foto.jpg

priorizar conteúdo

index.html


plugin.js

app.js foto.jpg

logo.png

priorizar conteúdo

index.html


plugin.js

app.js foto.jpg

logo.png

12

priorizar conteúdo

index.html


plugin.js

app.js foto.jpg

logo.png

12 8

priorizar conteúdo

index.html


plugin.js

app.js foto.jpg

logo.png

12 8 8

priorizar conteúdo

index.html


plugin.js

app.js foto.jpg

logo.png

12 8 8 4

priorizar conteúdo

index.html


plugin.js

app.js foto.jpg

logo.png

12 8 8 4

8

priorizar conteúdo

index.html


plugin.js

app.js foto.jpg

logo.png

12 8 8 4

4 8

priorizar conteúdo

index.html

cliente servidor

priorizar conteúdo

index.html

cliente servidor

priorizar conteúdo

index.html

cliente servidor

priorizar conteúdo

index.html

estilo.css

cliente servidor

priorizar conteúdo

index.html

estilo.css

cliente servidor

priorizar conteúdo

index.html

app.js

estilo.css

cliente servidor

priorizar conteúdo

index.html

app.js

estilo.css

cliente servidor

priorizar conteúdo

index.html

app.js

estilo.css

cliente servidor

foto.jpg

priorizar conteúdo

index.html

app.js

estilo.css

cliente servidor

foto.jpg

priorizar conteúdo

index.html

app.js

estilo.css

cliente servidor

foto.jpgjquery.js

priorizar conteúdo

index.html

app.js

estilo.css

cliente servidor

foto.jpgjquery.js

priorizar conteúdo

index.html

app.js

estilo.css

cliente servidor

foto.jpgjquery.jsplugin.js

priorizar conteúdo

index.html

app.js

estilo.css

cliente servidor


priorizar conteúdo

index.html

app.js

estilo.css

cliente servidor


priorizar conteúdo

index.html

app.js

estilo.css

cliente servidor


estilo.css

priorizar conteúdo

index.html

app.js

estilo.css

cliente servidor


estilo.css

priorizar conteúdo

index.html

app.js

estilo.css

cliente servidor


estilo.cssjquery.js

priorizar conteúdo

index.html

app.js

estilo.css

cliente servidor


estilo.cssjquery.js

priorizar conteúdo

index.html

app.js

estilo.css

cliente servidor


app.js

estilo.cssjquery.js

priorizar conteúdo

index.html

app.js

estilo.css

cliente servidor


app.js

estilo.cssjquery.js

priorizar conteúdo

index.html

app.js

estilo.css

cliente servidor


app.js

estilo.cssjquery.js

plugin.js

priorizar conteúdo

index.html

app.js

estilo.css

cliente servidor


app.js

estilo.cssjquery.js

plugin.js

priorizar conteúdo

index.html

app.js

estilo.css

cliente servidor


app.js

estilo.css

foto.jpg

jquery.js

plugin.js

priorizar conteúdo

index.html

cliente servidor

index.html

cliente servidor

index.html

cliente servidor

espera

index.html

cliente servidor

index.html bloqueante

espera

index.html

cliente servidor

Server Push

index.html

cliente servidor

Server Push

index.html

cliente servidor

Server Push

index.html

cliente servidor

app.js

estilo.css

foto.jpg

jquery.js

plugin.js

Server Push

index.html

cliente servidor

app.js

estilo.css

foto.jpg

jquery.js

plugin.js

Server Push

cliente servidor

index.html

style.css

index.html

icone.png

cliente servidor

index.html

style.css

index.html

icone.png

Server Push Cancelável

server push

PRIORIZAÇÃO CANCELÁVEL CACHEÁVEL



diminuir requests

diminuir tráfego





diminuir requests

diminuir tráfego



http 2

http 2BINÁRIO

http 2

COMPRESSÃO

BINÁRIO

http 2

COMPRESSÃOCRIPTOGRAFIA

BINÁRIO

http 2


MULTIPLEXING

BINÁRIO

http 2


MULTIPLEXINGPRIORIZAÇÃO

BINÁRIO

http 2


MULTIPLEXING

SERVER PUSHPRIORIZAÇÃO

BINÁRIO

http 2


MULTIPLEXING


+PERFORMANCE

BINÁRIO

http 2


MULTIPLEXING


+MOBILE+PERFORMANCE

BINÁRIO

http 2


MULTIPLEXING


+MOBILE+FÁCIL+PERFORMANCE

BINÁRIO

http 2


MULTIPLEXING



BINÁRIO

+COMPATÍVEL

http 2


MULTIPLEXING



BINÁRIO

+COMPATÍVEL+LEVE

http 2


MULTIPLEXING



BINÁRIO

+COMPATÍVEL +SEGURO+LEVE

otimizações web http2diminuir tráfego

CACHE MINIFICAÇÃO JS, CSS, HTML COMPRESSÃO DE IMAGENS



SERVER PUSH / HINT CRITICAL PATH 60 FPS / JANK FREE

otimizar renderização



SERVER PUSH / HINT CRITICAL PATH 60 FPS / JANK FREE

otimizar renderização

CDNs QUIC

diminuir latência

USE HTTP/2 HOJE (ou SPDY)

@sergio_caelum

obrigado!

links adicionais:● The Effect of Network and Infrastructural Variables on

SPDY's Performance.

● Livro High Performance Browser Networking

● Especificação HTTP2

● http://daniel.haxx.se/http2/

http://arxiv.org/abs/1401.6508

http://chimera.labs.oreilly.com/books/1230000000545/ch12.html

http://http2.github.io/http2-spec/

http://daniel.haxx.se/http2/

Technology

Como o HTTP/2 vai mudar sua vida