Post on 13-Aug-2015
HTTP/2Pedro Araujo / @pedrotcaraujo
Pedro AraujoDesenvolvedor front-end@pedrotcaraujo
QUEM JÁ OUVIU FALAR EM HTTP2?
QUEM JÁ OUVIU FALAR EM SPDY?
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!
QUEM É NOSSO MAIOR INIMIGO?
INTERNET EXPLORER?
DIVERSIDADE DE RESOLUÇÕES?
OU SERIA A LATÊNCIA?
POR QUE A LATÊNCIA É O PROBLEMA?
PORQUE A WEB MUDOU!
http://httparchive.org/
● 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/
● 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/
MAIS BANDA LARGA NÃO IMPORTA (MUITO)
https://www.belshe.com/2010/05/24/more-bandwidth-doesnt-matter-much/ - Mike Belshe
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
PARA UMA WEB MAIS RÁPIDA!
HTTP/2
PREOCUPAÇÕES DO HTTP 1.1?
● Uso inadequado do TCP● HEAD OF LINE BLOCKING● Muitos, eu disse MUITOS workaraounds
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
HTTP 1.1 (keep-alive)
4 a 8 conexões
FIFO (first in first out)
HTTP 1.1 (pipelining)
HEAD OF LINE BLOCKING
WORKARAOUNDS OPTIMIZAÇÕES̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶ ̶
SPRITING
DATA URIs
DOMAIN SHARDING
HTTP 2.0Binário
Header compression (HPACK)MultiplexingServer Push
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
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)
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
MULTIPLEXED STREAMS
● Uma única conexão TCP por host● Multiplos requests sem bloquear nenhum● Multiplos responses sem bloquear nenhum● Remove desnecessários workaraunds
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.
HTTP/2 = SPDY
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
http://blog.chromium.org/2015/02/hello-http2-goodbye-spdy-http-is_9.html
https://docs.google.com/presentation/d/1BVyBcR5AE2kwY7akcmM0O3dDJ5TccY3ew0U9Ux7wsQs/pub?slide=id.p
SUPORTE
https://github.com/http2/http2-spec/wiki/Implementations
https://caddyserver.com/
http://browserdiet.com/pt/
QUER IR ALÉM?
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
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/
blog.concretesolutions.com.brwww.concretesolutions.com.br
São PauloRua Sansão Alves dos Santos, 433
4º andar - Brooklin, São PauloCEP: 04565-001
Tel.: +55 11 4119-0449
Rio de JaneiroRua São José, 90 Sala: 2121Centro, Rio de JaneiroCEP: 20010-020Tel.: +55 21 2240-2030
OBRIGADO!