spdy o que vem por aí e o que http 2front… · +performance +fÁcil binÁrio +compatÍvel +seguro...

Post on 30-May-2020

2 Views

Category:

Documents

0 Downloads

Preview:

Click to see full reader

TRANSCRIPT

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>

$ 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

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

REQUEST

RESPONSE... ESPERA ...

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

MÉTODO E URL

STATUS

RESPOSTA

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

HEADERS

HEADERS

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

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

Host: www.caelum.com.br

HTTP/1.1 200 OK

Content-Type: text/html; charset=utf-8

Content-Language: pt-br

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

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

BINÁRIO

GZIP

?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

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*

cliente servidor

HTTP 1.1 com pipelining*

HOL Blocking...

...

cliente servidor

HTTP 2.0 multiplexing

multiplexing

1 CONEXÃO TCPASSÍNCRONO

otimizações webJUNTAR CSS E JSSPRITESINLINE DE RECURSOS

GZIPMINIFICAÇÃODOMÍNIOS SEM COOKIES

MÚLTIPLOS HOSTNAMESCDNs

diminuirrequests

diminuirtráfego

paralelizarrequests

otimizações webJUNTAR CSS E JSSPRITESINLINE DE RECURSOS

GZIPMINIFICAÇÃODOMÍNIOS SEM COOKIES

MÚLTIPLOS HOSTNAMESCDNs

diminuirrequests

diminuirtráfego

paralelizarrequests

otimizações webJUNTAR CSS E JSSPRITESINLINE DE RECURSOS

GZIPMINIFICAÇÃODOMÍNIOS SEM COOKIES

MÚLTIPLOS HOSTNAMESCDNs

diminuirrequests

diminuirtráfego

paralelizarrequests

otimizações webJUNTAR CSS E JSSPRITESINLINE DE RECURSOS

GZIPMINIFICAÇÃODOMÍNIOS SEM COOKIES

MÚLTIPLOS HOSTNAMESCDNs

diminuirrequests

diminuirtráfego

paralelizarrequests

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

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

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

:path: /style.css

http 2.0

: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

:path: /style.css

:path: /main.js

:path: /imagem.jpg

Host: images.caelum.com.br

http 2.0

header tables

MENOS BYTESREQUEST e RESPONSE

STATEFUL

otimizações webJUNTAR CSS E JSSPRITESINLINE DE RECURSOS

GZIPMINIFICAÇÃODOMÍNIOS SEM COOKIES

diminuirrequests

diminuirtráfego

MÚLTIPLOS HOSTNAMESCDNs

paralelizarrequests

otimizações webJUNTAR CSS E JSSPRITESINLINE DE RECURSOS

GZIPMINIFICAÇÃODOMÍNIOS SEM COOKIES

diminuirrequests

diminuirtráfego

MÚLTIPLOS HOSTNAMESCDNs

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

otimizações webJUNTAR CSS E JSSPRITESINLINE DE RECURSOS

GZIPMINIFICAÇÃODOMÍNIOS SEM COOKIES

diminuirrequests

diminuirtráfego

MÚLTIPLOS HOSTNAMESCDNs

paralelizarrequests

otimizações webJUNTAR CSS E JSSPRITESINLINE DE RECURSOS

GZIPMINIFICAÇÃODOMÍNIOS SEM COOKIES

diminuirrequests

diminuirtráfego

MÚLTIPLOS HOSTNAMESCDNs

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

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

…});

home.js contato.js

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

…});

modularização JS

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

…});

home.js contato.js

all.min.js

LOADER

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

…});

modularização JS 2.0

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

…});

home.js contato.js

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

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

…});

modularização JS 2.0

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

…});

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!

top related