HTTP2

Transcript

1. pen4education Vamos falar sobre o futuro da Web: HTTP/2 Gabriell Nascimento Marcus Barcelos Trilha Web @gabriellhrn @mvlbarcelos
2. pen4education Sysadmin DevOps Bluesoft Quem somos Gabriell
3. pen4education Arquiteto de soluções DevOps Bluesoft Quem somos Marcus Barcelos
4. pen4education Bluesoft
5. pen4education Bluesoft Labs
6. pen4education HTTP/0.9 1991 HTTP
7. pen4education Transferência de texto pela Internet (ASCII) HTTP/0.9 Funcionalidades
8. pen4education ➔ GET HTTP/0.9 Métodos
9. pen4education web em 1991 http://www.wired.co.uk/news/archive/2013-04/30/first-web-page http://arstechnica.com/information-technology/2013/04/first-website-ever-goes-back-online-on-the-open-webs-20th-birthday/
10. pen4education HTTP/0.9 1991 HTTP/1.0 1996 HTTP
11. pen4education ➔ Transferência de MIME ➔ Cabeçalhos ➔ Status codes HTTP/1.0 Funcionalidades++
12. pen4education ➔ GET ➔ HEAD ➔ POST HTTP/1.0 Métodos
13. pen4education HTTP/0.9 1991 HTTP/1.0 HTTP/1.1 1996 1999 HTTP
14. pen4education ➔ Conexão persistente (keep alive) ➔ HTTP pipelining HTTP/1.1 Funcionalidades++
15. pen4education ➔ GET ➔ HEAD ➔ POST ➔ PUT ➔ DELETE HTTP/1.1 Métodos ➔ TRACE ➔ OPTIONS ➔ CONNECT ➔ PATCH
16. pen4education HTTP/0.9 1991 HTTP/1.0 HTTP/1.1 1996 1999 2009 SPDY SPDY
17. pen4education ➔ Carregamento 50% menor ➔ Compatibilidade com HTTP SPDY Principais objetivos
18. pen4education HTTP/0.9 1991 HTTP/1.0 HTTP/1.1 1996 1999 2015 HTTP/2 HTTP 2009 SPDY
19. pen4education HTTP/2 (RFC 7540) + HPACK (RFC 7541)
20. pen4education ➔ Troca de mensagens binária ➔ Multiplexação HTTP/2 Funcionalidades++
21. pen4education ➔ Priorização de requisições ➔ Server push ➔ Compressão de cabeçalho HTTP/2 Funcionalidades++
22. pen4education E por que um HTTP/2?
23. pen4education E por que um HTTP/2? HTTP/1.x não atende mais
24. pen4education ➔ Sites complexos ➔ Muitas requisições ➔ Mobile A web atual
25. pen4education A web atual https://mobiforge.com/research-analysis/the-web-is-doom
26. pen4education HTTP/1.1 Boas práticas
27. pen4education ✓ Concatenação ✓ Sprites ✓ Domain sharding ✓ Cabeçalhos/Cookies HTTP/1.1 Boas práticas ✓ CSS no topo ✓ JS no final ✓ Minificação ✓ Compressão (gzip)
28. pen4education HTTP/1.1 Diminuir requisições
29. pen4education ➔ Concatenar (CSS/JS) ➔ Sprites ➔ Domain sharding ◆ cdn1.bluesoft.com.br ◆ cdn2.bluesoft.com.br HTTP/1.1 Diminuir requisições
30. pen4education HTTP/1.1 Paralelismo: múltiplas conexões TCP Hi there! I’m HTTP/1.1 only :) https://h1.example.com Cliente Servidor
31. pen4education HTTP/1.1 Head of line blocking Hi there! I’m HTTP/1.1 only :) https://h1.example.com Cliente Servidor
32. pen4education HTTP/2 Multiplexação de mensagens
33. pen4education HTTP/2 Multiplexação de mensagens Hi there! I’m HTTP/2 :D https://h2.example.com Cliente stream 7 DATA … stream 3 DATA stream 5 HEADERS stream 5 DATA stream 3 DATA Conexão HTTP/2 Servidor
34. $ 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> ...
35. pen4education Multiplexação why it matters
36. pen4education Multiplexação why it matters
37. pen4education HTTP/1.1 Conexões HTTP 6.23s
38. pen4education HTTP/1.1 Conexões HTTP: domain sharding 2.17s
39. pen4education HTTP/2 Conexão com multiplexação 0.99s
40. pen4education HTTP/1.1 Priorização de requisições
41. pen4education ➔ CSS no topo ➔ JS no final HTTP/1.1 Priorização de requisições
42. pen4education HTTP/2 Priorização de requisições
43. pen4education Árvore de pesos e dependências HTTP/2 Priorização de requisições
44. pen4education HTTP/2 Priorização de requisições * A 1 B 8 C 8 D 12 E 4 A - main.css B - script.js C - style.css D - substyle.css E - favicon.ico
45. pen4education HTTP/1.1 Tamanho das requisições
46. pen4education ➔ Cabeçalhos e cookies HTTP/1.1 Tamanho das requisições
47. pen4education HTTP/2 Compressão de cabeçalho (HPACK)
48. pen4education HTTP/2 Compressão de cabeçalho Hi there! I’m HTTP/2 :D https://h2.example.com Cliente Servidor stream 3 HEADERS 1 :method: GET 2 :path: /login 3 :scheme: https 1 :method: GET 2 :path: /home 3 :scheme: https
49. pen4education HTTP/2 Server push
50. pen4education HTTP/2 Server push Hi there! I’m HTTP/2 :D https://h2.example.com Cliente Servidor
51. pen4education HTTP/2 Server push HTTP/2 https://blog.cloudflare.com/announcing-support-for-http-2-server-push-2/
52. pen4education HTTP/2 Server push HTTP/2 HTTP/2 + Server Push https://blog.cloudflare.com/announcing-support-for-http-2-server-push-2/
53. pen4education HTTP/2 Upgrade
54. pen4education TCP (HTTP) e TLS (HTTPS) HTTP/2 Mecanismo de upgrade
55. pen4education Na prática: HTTP/2 é com HTTPS
56. pen4education Resumindo...
57. pen4education ✓ Concatenação ✓ Sprites ✓ Domain sharding ✓ Cabeçalhos/Cookies HTTP/1.1 Boas práticas ✓ CSS no topo ✓ JS no final ✓ Minificação ✓ Compressão (gzip)
58. pen4education ✗ Concatenação ✗ Sprites ✗ Domain sharding ✗ Cabeçalhos/Cookies HTTP/2 Boas práticas ✗ CSS no topo ✗ JS no final ✓ Minificação ✓ Compressão (gzip)
59. pen4education HTTP/2 Suporte
60. pen4education ✓ Google Chrome ✓ Internet Explorer ✓ Microsoft Edge ✓ Mozilla Firefox ✓ Safari HTTP/2 Navegadores https://github.com/http2/http2-spec/wiki/Implementations https://en.wikipedia.org/wiki/Comparison_of_web_browsers#Protocol_support * Versões mais recentes
61. pen4education ✓ Apache HTTP Server 2.4.17+ ✓ Apache Tomcat 8.5+ ✓ Microsoft IIS WinServer 2016 ✓ Nginx 1.9.5+ HTTP/2 Servidores web https://github.com/http2/http2-spec/wiki/Implementations https://en.wikipedia.org/wiki/HTTP/2#Software_and_services_supporting_HTTP.2F2
62. pen4education ✓ Akamai ✓ CloudFlare HTTP/2 CDNs https://en.wikipedia.org/wiki/HTTP/2#Software_and_services_supporting_HTTP.2F2
63. pen4education HTTP/2 To use or not to use?
64. pen4education Nginx http://labs.bluesoft.com.br/habilite-o-http2-no-seu- site-hoje/ Apache http://labs.bluesoft.com.br/habilite-o-http2-no-seu- site-agora-com-apache/ HTTP/2 Artigos
65. pen4education $ docker pull bluesoftbr/nginx-h2 $ docker pull bluesoftbr/httpd-h2 https://github.com/bluesoft/dockerfiles HTTP/2 Imagens Docker
66. pen4education Obrigado! @gabriellhrn @mvlbarcelos bluesoft bluesoftbr http://labs.bluesoft.com.br