Upload
tdc-globalcode
View
63
Download
0
Embed Size (px)
Citation preview
Globalcode – Open4education
Vamos falar sobre o futuro da Web:HTTP/2
Gabriell Nascimento
@gabriellhrn
Trilha Modern Web
Globalcode – Open4education
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/
Globalcode – Open4education
➔ Transferência de MIME➔ Cabeçalhos➔ Status codes
HTTP/1.0Funcionalidades++
Globalcode – Open4education
➔ Conexão persistente (keep alive)➔ HTTP pipelining
HTTP/1.1Funcionalidades++
Globalcode – Open4education
➔ GET➔ HEAD➔ POST➔ PUT➔ DELETE
HTTP/1.1Métodos
➔ TRACE➔ OPTIONS➔ CONNECT➔ PATCH
Globalcode – Open4education
➔ Carregamento 50% menor➔ Compatibilidade com HTTP
SPDYPrincipais objetivos
Globalcode – Open4education
➔ Priorização de requisições➔ Server push➔ Compressão de cabeçalho
HTTP/2Funcionalidades++
Globalcode – Open4education
✓ Concatenação
✓ Sprites✓ Domain sharding✓ Cabeçalhos/Cookies
HTTP/1.1Boas práticas
✓ CSS no topo
✓ JS no final
✓ Minificação
✓ Compressão (gzip)
Globalcode – Open4education
➔ Concatenar (CSS/JS)➔ Sprites➔ Domain sharding
◆ cdn1.bluesoft.com.br◆ cdn2.bluesoft.com.br
HTTP/1.1Diminuir requisições
Globalcode – Open4education
HTTP/1.1Paralelismo: múltiplas conexões TCP
Hi there!
I’m HTTP/1.1 only :)
https://h1.example.com
Cliente Servidor
Globalcode – Open4education
HTTP/1.1Head of line blocking
Hi there!
I’m HTTP/1.1 only :)
https://h1.example.com
Cliente Servidor
Globalcode – Open4education
HTTP/2Multiplexação de mensagens
Hi there!
I’m HTTP/2 :D
https://h2.example.com
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> ...
Globalcode – Open4education
HTTP/2Priorização de requisições
*
A1
B8
C8
D12
E4
A - main.cssB - script.jsC - style.cssD - substyle.cssE - favicon.ico
Globalcode – Open4education
HTTP/2Compressão de cabeçalho
Hi there!
I’m HTTP/2 :D
https://h2.example.com
Cliente Servidor
stream 3HEADERS
1 :method: GET
2 :path: /login
3 :scheme: https
1 :method: GET
2 :path: /home
3 :scheme: https
Globalcode – Open4education
HTTP/2Server push
Hi there!
I’m HTTP/2 :D
https://h2.example.com
Cliente Servidor
Globalcode – Open4education
HTTP/2Server push
HTTP/2
https://blog.cloudflare.com/announcing-support-for-http-2-server-push-2/
Globalcode – Open4education
HTTP/2Server push
HTTP/2
HTTP/2+
Server Push
https://blog.cloudflare.com/announcing-support-for-http-2-server-push-2/
Globalcode – Open4education
✓ Concatenação
✓ Sprites✓ Domain sharding✓ Cabeçalhos/Cookies
HTTP/1.1Boas práticas
✓ CSS no topo
✓ JS no final
✓ Minificação
✓ Compressão (gzip)
Globalcode – Open4education
✗ Concatenação
✗ Sprites✗ Domain sharding✗ Cabeçalhos/Cookies
HTTP/2Boas práticas
✗ CSS no topo
✗ JS no final
✓ Minificação
✓ Compressão (gzip)
Globalcode – Open4education
✓ 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
Globalcode – Open4education
✓ 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
Globalcode – Open4education
✓ Akamai
✓ CloudFlare
HTTP/2CDNs
https://en.wikipedia.org/wiki/HTTP/2#Software_and_services_supporting_HTTP.2F2
Globalcode – Open4education
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
Globalcode – Open4education
$ docker pull bluesoftbr/nginx-h2$ docker pull bluesoftbr/httpd-h2
https://github.com/bluesoft/dockerfiles
HTTP/2Imagens Docker