HTTP/2

Conheça o HTTP/2 e suas features, saiba quais são as novas práticas de desenvolvimento para front-end.

Transcript

1. HTTP/2 Pedro Araujo / @pedrotcaraujo
2. Pedro Araujo Desenvolvedor front-end @pedrotcaraujo
6. QUEM JÁ OUVIU FALAR EM HTTP2?
7. QUEM JÁ OUVIU FALAR EM SPDY?
9. HTTP (OVERVIEW): • Principal protocolo da Web • Funciona no modelo de requisição e resposta • HTTP/1.0 foi desenvolvido em 1996 • Ultima atualização em 1999 com o HTTP/1.1 (RFC 2616) SIM, 1999!
10. QUEM É NOSSO MAIOR INIMIGO?
11. INTERNET EXPLORER?
12. DIVERSIDADE DE RESOLUÇÕES?
13. OU SERIA A LATÊNCIA?
14. POR QUE A LATÊNCIA É O PROBLEMA? PORQUE A WEB MUDOU!
15. http://httparchive.org/
16. • Total transfer size: 720kb para 1900kb por página web • Total requests: 70 para 100 por página web Dados de 2011 a 2015 http://httparchive.org/
17. • 3G no Brasil tem média de 195ms de latência • 4G no Brasil tem média de 58ms de latência ESTAMOS NA ERA MÓVEL http://opensignal.com/
18. MAIS BANDA LARGA NÃO IMPORTA (MUITO) https://www.belshe.com/2010/05/24/more-bandwidth-doesnt-matter-much/ - Mike Belshe
19. PERFORMANCE É IMPORTANTE O crescimento rápido do mundo da otimização de performance da Web no passar dos anos vem da importância da velocidade na experiência do usuário. • Sites mais rápidos lidam com melhor engajamento do usuário • Sites mais rápidos lidam com melhor retenção do usuário • Sites mais rápidos lidam com alta conversão
20. PARA UMA WEB MAIS RÁPIDA! HTTP/2
21. PREOCUPAÇÕES DO HTTP 1.1? • Uso inadequado do TCP • HEAD OF LINE BLOCKING • Muitos, eu disse MUITOS workaraounds
22. UM POUCO DO TCP: • Esconde a complexidade da comunicação de rede • Garante a entrega dos dados idênticos e na mesma ordem • Precisão e distribuição • Three-way HANDSHAKE: SYN, SYN ACK e ACK
23. HTTP 1.1 (keep-alive) 4 a 8 conexões
24. FIFO (first in first out) HTTP 1.1 (pipelining) HEAD OF LINE BLOCKING
26. WORKARAOUNDS OPTIMIZAÇÕES ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶
27. SPRITING
28. DATA URIs
29. DOMAIN SHARDING
31. HTTP 2.0 Binário Header compression (HPACK) Multiplexing Server Push
32. HTTP/2 (OVERVIEW): • Principal objetivo é reduzir a latência • Usa somente uma conexão TCP • NÃO modifica a semântica do HTTP (methods, status code, URIs, etc) • Baseado no SPDY
33. HTTP/2 BINÁRIO • A camada binária esta no core do HTTP/2 • Messages são separados em vários frames • Possui sistema de priorização de streams • Responsável permitir requests e responses multiplexing • Precisa de uma ferramenta para inspecionar. (Wireshark - http://wireshark.org)
34. HEADER COMPRESSION • Cada header descreve o recurso a ser transferido e suas propriedades • Média de 500 – 800 bytes • GZIP foi registrado como inseguro na versão com SPDY HPACK
35. MULTIPLEXED STREAMS • Uma única conexão TCP por host • Multiplos requests sem bloquear nenhum • Multiplos responses sem bloquear nenhum • Remove desnecessários workaraunds
36. SERVER PUSH Server Push evita um round trip, enviando os assets que ele acha que o client irá precisar. Server Hint é um mecanismo onde o servidor pode notificar o cliente de um recurso que vai ser necessário.
37. HTTP/2 = SPDY
38. SPDY (overview): • Protocolo experimental feito pelo Google feito em 2009 • Objetivo de diminuir o Page Load Time em 50% • Minimizar a complexidade de deployment • Evitar mudanças de infra-estrutura de rede • Desenvolver um protocolo com a comunidade open-source • Obter o ganho de performance para (in)validar o protocolo
39. http://blog.chromium.org/2015/02/hello-http2-goodbye-spdy-http-is_9.html
40. https://docs.google.com/presentation/d/1BVyBcR5AE2kwY7akcmM0O3dDJ5TccY3ew0U9Ux7wsQs/pub?slide=id.p
41. SUPORTE
43. https://github.com/http2/http2-spec/wiki/Implementations
44. https://caddyserver.com/
45. http://browserdiet.com/pt/
46. QUER IR ALÉM?
47. MAIS... • HTTP/2 (IETF HTTP Working Group) - https://http2.github.io/ • High Performance Browser Networking - http://chimera.labs.oreilly.com/books/1230000000545/ch12.html • HTTP2 for front-end web developers - https://mattwilcox.net/web-development/http2-for-front-end-web-developers • Need for Speed 2: Improving Front-End Performance - https://jonsuh.com/blog/need-for-speed-2/ • HTTP/2 - Let’s Surf Like It’s 2015 - https://www.linkedin.com/pulse/http2-lets-surf-like-its-2015-rajat-taneja
48. em português... • SPDY, HTTP2 e por que você deveria conhecê-los - http://blog.caelum.com.br/spdy-http2-e-por-que-voce-deveria-conhece-los/ • HTTP 2.0 tem sua primeira versão publicada - http://www.infoq.com/br/news/2012/12/http-20-draft-publicado • As fantásticas novidades do HTTP 2.0 e do SPDY - http://blog.caelum.com.br/as-fantasticas-novidades-do-http-2-0-e-do-spdy/ • HTTP/2 - Atualização do protocolo base da internet - http://tableless.com.br/http2-atualizacao-do-protocolo-base-da-internet/ • Simplificando o HTTP 2.0 - http://betomuniz.com/blog/simplificando-o-http-2-0/
49. blog.concretesolutions.com.br www.concretesolutions.com.br São Paulo Rua Sansão Alves dos Santos, 433 4º andar - Brooklin, São Paulo CEP: 04565-001 Tel.: +55 11 4119-0449 Rio de Janeiro Rua São José, 90 Sala: 2121 Centro, Rio de Janeiro CEP: 20010-020 Tel.: +55 21 2240-2030 OBRIGADO!