tdc2016sp - vamos falar sobre o futuro da web: http/2

Globalcode – Open4education

Vamos falar sobre o futuro da Web:HTTP/2

Gabriell Nascimento

@gabriellhrn

Trilha Modern Web


Sysadmin

DevOps

Bluesoft

Gabriell


Bluesoft


Bluesoft Labs


HTTP/0.9

1991

HTTP


Transferência de texto pela Internet (ASCII)

HTTP/0.9Funcionalidades


➔ GET

HTTP/0.9Métodos


web em 1991

http://www.wired.co.uk/news/archive/2013-04/30/first-web-pagehttp://arstechnica.com/information-technology/2013/04/first-website-ever-goes-back-online-on-the-open-webs-20th-birthday/


HTTP/0.9

1991

HTTP/1.0

1996

HTTP


➔ Transferência de MIME➔ Cabeçalhos➔ Status codes

HTTP/1.0Funcionalidades++


➔ GET➔ HEAD➔ POST

HTTP/1.0Métodos


HTTP/0.9

1991

HTTP/1.0 HTTP/1.1

1996 1999

HTTP


➔ Conexão persistente (keep alive)➔ HTTP pipelining

HTTP/1.1Funcionalidades++


➔ GET➔ HEAD➔ POST➔ PUT➔ DELETE

HTTP/1.1Métodos

➔ TRACE➔ OPTIONS➔ CONNECT➔ PATCH


HTTP/0.9

1991

HTTP/1.0 HTTP/1.1

1996 1999 2009

SPDY

SPDY


➔ Carregamento 50% menor➔ Compatibilidade com HTTP

SPDYPrincipais objetivos


HTTP/0.9

1991

HTTP/1.0 HTTP/1.1

1996 1999 2015

HTTP/2

HTTP

2009

SPDY


HTTP/2 (RFC 7540) + HPACK (RFC 7541)


➔ Troca de mensagens binária➔ Multiplexação

HTTP/2Funcionalidades++


➔ Priorização de requisições➔ Server push➔ Compressão de cabeçalho

HTTP/2Funcionalidades++


E por que um HTTP/2?


E por que um HTTP/2?HTTP/1.x não atende mais


➔ Sites complexos➔ Muitas requisições➔ Mobile➔ SaaS

A web atual


A web atual

https://mobiforge.com/research-analysis/the-web-is-doom


HTTP/1.1Boas práticas


✓ Concatenação

✓ Sprites✓ Domain sharding✓ Cabeçalhos/Cookies


✓ CSS no topo

✓ JS no final

✓ Minificação

✓ Compressão (gzip)


HTTP/1.1Diminuir requisições


➔ Concatenar (CSS/JS)➔ Sprites➔ Domain sharding

◆ cdn1.bluesoft.com.br◆ cdn2.bluesoft.com.br

HTTP/1.1Diminuir requisições


HTTP/1.1Paralelismo: múltiplas conexões TCP

Hi there!

I’m HTTP/1.1 only :)

https://h1.example.com

Cliente Servidor


HTTP/1.1Head of line blocking

Hi there!

I’m HTTP/1.1 only :)


Cliente Servidor


HTTP/2Multiplexação de mensagens


HTTP/2Multiplexação de mensagens

Hi there!

I’m HTTP/2 :D


Cliente

stream 7DATA

… stream 3DATA

stream 5HEADERS

stream 5DATA

stream 3DATA

Conexão HTTP/2 Servidor

$ nghttp -nv https://h2.example.com ...[ 0.009] recv HEADERS frame <length=30, flags=0x04, stream_id=39> ; END_HEADERS (padlen=0) ; First response header[ 0.009] recv (stream_id=41) :status: 200[ 0.009] recv (stream_id=41) content-length: 4864[ 0.009] recv (stream_id=41) content-type: image/png[ 0.009] recv HEADERS frame <length=30, flags=0x04, stream_id=41> ; END_HEADERS (padlen=0) ; First response header[ 0.010] recv DATA frame <length=7456, flags=0x01, stream_id=39> ; END_STREAM[ 0.010] recv DATA frame <length=4864, flags=0x01, stream_id=41> ; END_STREAM[ 0.010] recv DATA frame <length=16384, flags=0x00, stream_id=43>[ 0.010] recv DATA frame <length=4883, flags=0x00, stream_id=45> ...


Multiplexaçãowhy it matters


HTTP/1.1Conexões HTTP

6.23s


HTTP/1.1Conexões HTTP: domain sharding

2.17s


HTTP/2Conexão com multiplexação

0.99s


HTTP/1.1Priorização de requisições


➔ CSS no topo➔ JS no final

HTTP/1.1Priorização de requisições


HTTP/2Priorização de requisições


Árvore de pesos e dependências




*

A1

B8

C8

D12

E4

A - main.cssB - script.jsC - style.cssD - substyle.cssE - favicon.ico


HTTP/1.1Tamanho das requisições


➔ Cabeçalhos e cookies

HTTP/1.1Tamanho das requisições


HTTP/2Compressão de cabeçalho (HPACK)


HTTP/2Compressão de cabeçalho

Hi there!

I’m HTTP/2 :D


Cliente Servidor

stream 3HEADERS

1 :method: GET

2 :path: /login

3 :scheme: https

1 :method: GET

2 :path: /home

3 :scheme: https


HTTP/2Server push


HTTP/2Server push

Hi there!

I’m HTTP/2 :D


Cliente Servidor


HTTP/2Server push

HTTP/2

https://blog.cloudflare.com/announcing-support-for-http-2-server-push-2/


HTTP/2Server push

HTTP/2

HTTP/2+

Server Push

https://blog.cloudflare.com/announcing-support-for-http-2-server-push-2/


HTTP/2Upgrade


TCP (HTTP) e TLS (HTTPS)

HTTP/2Mecanismo de upgrade


Na prática:HTTP/2 é com HTTPS


Resumindo…


✓ Concatenação

✓ Sprites✓ Domain sharding✓ Cabeçalhos/Cookies


✓ CSS no topo

✓ JS no final

✓ Minificação



✗ Concatenação

✗ Sprites✗ Domain sharding✗ Cabeçalhos/Cookies

HTTP/2Boas práticas

✗ CSS no topo

✗ JS no final

✓ Minificação



HTTP/2Suporte


✓ Google Chrome

✓ Internet Explorer

✓ Microsoft Edge

✓ Mozilla Firefox

✓ Safari

HTTP/2Navegadores

https://github.com/http2/http2-spec/wiki/Implementationshttps://en.wikipedia.org/wiki/Comparison_of_web_browsers#Protocol_support

* Versões mais recentes

https://github.com/http2/http2-spec/wiki/Implementations


https://en.wikipedia.org/wiki/Comparison_of_web_browsers#Protocol_support

https://en.wikipedia.org/wiki/Comparison_of_web_browsers#Protocol_support


✓ Apache HTTP Server 2.4.17+

✓ Apache Tomcat 8.5+

✓ Microsoft IIS WinServer 2016

✓ Nginx 1.9.5+

HTTP/2Servidores web

https://github.com/http2/http2-spec/wiki/Implementationshttps://en.wikipedia.org/wiki/HTTP/2#Software_and_services_supporting_HTTP.2F2




✓ Akamai

✓ CloudFlare

HTTP/2CDNs

https://en.wikipedia.org/wiki/HTTP/2#Software_and_services_supporting_HTTP.2F2


HTTP/2To use or not to use?


Nginxhttp://labs.bluesoft.com.br/habilite-o-http2-no-seu-site-hoje/

Apachehttp://labs.bluesoft.com.br/habilite-o-http2-no-seu-site-agora-com-apache/

HTTP/2Artigos


$ docker pull bluesoftbr/nginx-h2$ docker pull bluesoftbr/httpd-h2

https://github.com/bluesoft/dockerfiles

HTTP/2Imagens Docker


Obrigado!

@gabriellhrn bluesoft bluesoftbrhttp://labs.bluesoft.com.br

tdc2016sp - vamos falar sobre o futuro da web: http/2

Education