SPDY o que vem por aí e o que HTTP 2...o que vem por aí e o que você pode utilizar já com SPDY...

rumo ao

HTTP 2.0o que vem por aí e o que você pode utilizar já com

SPDY

Luiz Corte Real@srsaude

Sérgio Lopes@sergio_caelum

lançamento

review

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


Trying 64.233.171.121...



GET / HTTP/1.1


HTTP/1.1 200 OK




Date: Thu, 03 Apr 2014 18:37:18 GMT




TEXTO

REQUEST

RESPONSE


Trying 64.233.171.121...



GET / HTTP/1.1


HTTP/1.1 200 OK




Date: Thu, 03 Apr 2014 18:37:18 GMT




REQUEST

RESPONSE... ESPERA ...


Trying 64.233.171.121...



GET / HTTP/1.1


HTTP/1.1 200 OK




Date: Thu, 03 Apr 2014 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, 03 Apr 2014 18:37:18 GMT




HEADERS

HEADERS


Trying 64.233.171.121...



GET / HTTP/1.1


HTTP/1.1 200 OK




Date: Thu, 03 Apr 2014 18:37:18 GMT




httptexto

request > espera > response

headers

cliente servidor

cliente servidor

HTTP 1.1

cliente servidor

Keep-Alive

TCPHANDSHAKE

REQUEST

REQUEST #2

REQUEST #3

cliente servidor

TCPHANDSHAKE

REQUEST

REQUEST #2

REQUEST #3

cliente servidor

TCPHANDSHAKE

REQUEST

REQUEST #2

REQUEST #3

cliente servidor

TCPHANDSHAKE

REQUEST

REQUEST #2

REQUEST #3

cliente servidor

TCPHANDSHAKE

REQUEST

REQUEST #2

REQUEST #3

cliente servidor

TCPHANDSHAKE

REQUEST

REQUEST #2

REQUEST #3

cliente servidor

TCPHANDSHAKE

REQUEST

REQUEST #2

REQUEST #3

de 4 a 8 conexões

otimizações webJUNTAR CSS E JSSPRITESINLINE DE RECURSOS

GZIPMINIFICAÇÃODOMÍNIOS SEM COOKIES

MÚLTIPLOS HOSTNAMESCDNs

diminuirrequests

diminuirtráfego

paralelizarrequests

o fantástico mundo do

HTTP 2.0(e do SPDY)

GET / HTTP/1.1


HTTP/1.1 200 OK



Date: Thu, 03 Apr 2014 18:37:18 GMT



<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


Accept-Encoding: gzip

HTTP/1.1 200 OK



Date: Thu, 03 Apr 2014 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

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

SSL

ou não #heartbleed

?????????

???????

????????

????????

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

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

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

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

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

http 2.0

BINÁRIO HPACK

GZIP

SSL

SSL

HEADER BINÁRIOGZIP / HPACK

SSL

cliente servidor

HTTP 1.1 com Keep-Alive

cliente servidor

HTTP 1.1 com Pipelining*

cliente servidor

HTTP 1.1 com pipelining*

HOL Blocking...

...

cliente servidor

HTTP 2.0 multiplexing

multiplexing

1 CONEXÃO TCPASSÍNCRONO

http://www.youtube.com/watch?v=786v3xD9Wfw

http://www.youtube.com/watch?v=jFIlP_JT7is

http://www.youtube.com/watch?v=U1c_h2rSzaE




diminuirrequests

diminuirtráfego

paralelizarrequests

: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 BYTESREQUEST e RESPONSE

STATEFUL



diminuirrequests

diminuirtráfego


paralelizarrequests

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>

index.html

main.js

style.css

priorizar conteúdo

cliente servidor

index.html

main.js

style.css

priorizar conteúdo

cliente servidor

1

5

3

index.html

main.js

style.css

index.html blocante

cliente servidor

espera

cliente servidor

index.html

style.css

index.html

icone.png

Server Push

cliente servidor

index.html

style.css

index.html

icone.png

Server Push

style.css

icone.png

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ÇÃOCANCELÁVELCACHEÁVEL



diminuirrequests

diminuirtráfego


paralelizarrequests

http 2

COMPRESSÃOCRIPTOGRAFIA

MULTIPLEXING

SERVER PUSHPRIORIZAÇÃO

+MOBILE+FÁCIL+PERFORMANCE

BINÁRIO

+COMPATÍVEL +SEGURO+LEVE

spdy

Google: até 45% mais rápido

spdyRTTBandaPerdasReal: dependeBrowser

otimizações web http2diminuirtráfego

CACHEMINIFICAÇÃO JS, CSS, HTMLCOMPRESSÃO DE IMAGENS

SERVER PUSH / HINTCRITICAL PATH60 FPS / JANK FREE

otimizar renderização

CDNsQUIC

diminuirlatência

http 2Dez 2013: draft 09 (impl.)

Nov 2014: recomendação

Abr 2014: draft 11

spdyNov 2013: draft 3.1

???: draft 4

servidornginx NodeJS

mod_spdy Jetty

spdy

servidornghttp2 NodeJS

Ruby

http 2.0

Go

USE SPDY HOJEFIQUE DE OLHO NO HTTP2 DE

AMANHÃ

BÔNUS

web components

<link rel=”import” href=”super-botao.html”>

<link rel=”stylesheet” href=”super-botao.css”>

<template>

<button>{{texto}}</button>

</template>

<script src=”super-botao.js”></script>

super-botao.html

web components

BARATOSERVER PUSH

define([“jquery”], function($) {

…});

modularização JS


…});

home.js contato.js


…});

modularização JS


…});

home.js contato.js

all.min.js

LOADER


…});

modularização JS 2.0


…});

home.js contato.js

<script src=”loader.js”></script><script src=”jquery.js” async></script><script src=”home.js” async></script>


…});

modularização JS 2.0


…});

home.js contato.js

<script src=”loader.js”></script><script src=”jquery.js” async></script><script src=”home.js” async></script>

server push

modularização

BARATOCACHEÁVEL

LOADER + SIMPLES

@srsaude@sergio_caelum

20% OFF CUPOM

QCONSP2014

obrigado!

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

SPDY's Performance.

● Livro High Performance Browser Networking

● Especificação HTTP2

http://arxiv.org/abs/1401.6508




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

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

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

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

SPDY o que vem por aí e o que HTTP 2...o que vem por aí e o que você pode utilizar já com SPDY...

Documents

Transcript of SPDY o que vem por aí e o que HTTP 2...o que vem por aí e o que você pode utilizar já com SPDY...