Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTTP2

Avatar for Marcus Barcelos Marcus Barcelos
May 11, 2016
Technology
110
0

 HTTP2

Avatar for Marcus Barcelos

Marcus Barcelos

May 11, 2016

More Decks by Marcus Barcelos

See All by Marcus Barcelos
TDC - Integração continua
Avatar for Marcus Barcelos mvlbarcelos
1
630
Arquitetando e evoluindo um ERP para a Nuvem
Avatar for Marcus Barcelos mvlbarcelos
1
310

Other Decks in Technology

See All in Technology
モノリス Rails でも日中に rails db:migrate を走らせたい！ / Daytime rails db:migrate on Monolithic Rails!
Avatar for Shintani Teppei euglena1215
4
550
取引先から届く 「セキュリティチェックシート」の読み解き方
Avatar for かーでぃ kamadamakoto
0
130
TypeScript入門 2026
Avatar for Recruit recruitengineers
PRO
2
490
トヨタ⽣産⽅式(TPS)⼊⾨
Avatar for Recruit recruitengineers
PRO
2
640
【CEDEC2026】『GRANBLUE FANTASY: Relink - Endless Ragnarok』のバトル制作事例 ～最高のキャラゲーを目指して～
Avatar for Cygames, Inc. cygames
PRO
0
230
もう一度考える SRE チームの作り方・育て方 / Rethinking SRE #1: Building and Growing SRE Teams
Avatar for rrreeeyyy rrreeeyyy
6
1k
修正PRを食べてレビュースキルが賢くなる：Claude Codeによる自己改善サイクル
Avatar for um(うめ) yuyaumetsu
5
1.4k
ボトムアップ文化が強い組織で セキュリティをどう根付かせていくかの現在進行形の話 / Making Security Stick in a Bottom-Up Organization
Avatar for Takashi Yamaguchi yamaguchitk333
0
200
強化学習「理論」入門
Avatar for Etsuji Nakai enakai00
3
3.6k
Issue設計から始める仕様駆動開発 / 20260731 Mizuki Hirata
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
150
サイバー捜査員研修（前半）
Avatar for Nomizo Nomizo nomizone
1
1.9k
ホームラボ紹介
Avatar for 世良泰明 y_sera15
0
120

Featured

See All Featured
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
830
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
Avatar for Akash Hashmi akashhashmi
0
410
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8.3k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
950
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
1
170
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
280
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
76
5.3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
Scaling GitHub
Avatar for Zach Holman holman
464
140k

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