InterCon 2016 - HTTP/2 for Web Application Developers

transcript

HTTP 2.0

@sergio_caelum sergiolopes.org

REVIEW

$ 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

... ESPERA ...

REQUEST

RESPONSE

MÉTODO E URL

STATUS

RESPOSTA

HEADERS

request > espera > responseheaders

cliente servidor

HTTP 1.1

CONEXÃO TCP

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

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

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

HTTP/2.0

?????????

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

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

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

: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

paralelizar requests MÚLTIPLOS HOSTNAMES

diminuir requests

diminuir tráfego

HTTP 1.1 com Keep-Alive

cliente servidor

HTTP 1.1 com Pipelining*

cliente servidor

Head of Line Blocking...

cliente servidor

HTTP 2.0 multiplexing

cliente servidor

MULTIPLEXING

1 CONEXÃO TCP ASSÍNCRONO

diminuir requests

diminuir tráfego

diminuir requests

diminuir tráfego

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>

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

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

Server Push Cancelável

SERVER PUSH

PRIORIZAÇÃO CACHEÁVEL CANCELÁVEL*

SERVER PUSH

CASPer (cache-aware server-push)

Cache Digests

diminuir requests

diminuir tráfego

diminuir requests

diminuir tráfego

HTTP/2

COMPRESSÃOCRIPTOGRAFIA

MULTIPLEXING

SERVER PUSHPRIORIZAÇÃO

+MOBILE+FÁCIL+PERFORMANCE

BINÁRIO

+COMPATÍVEL +SEGURO+LEVE

OBRIGADO!

sergiolopes.org @sergio_caelum

InterCon 2016 - HTTP/2 for Web Application Developers

Technology