Skip to content

Instantly share code, notes, and snippets.

@diegoeis
Created June 18, 2015 18:27
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save diegoeis/ccbb67161e2acddee016 to your computer and use it in GitHub Desktop.
Save diegoeis/ccbb67161e2acddee016 to your computer and use it in GitHub Desktop.
Anotações da palestra do Rafael Rinaldi no #17elw em 2015

Rafael Rinaldi

HTTP/2

  • HTTP é a comunicação entre o servidor e o client.
  • A web depende do TCP/IP, que é podemos falar que é uma suite de ferramentas.
  • O HTTP usa o TCP para fazer a transferencia de dados e informação.
  • O IP é responsável por conectar uma rede a outra
  • O TCP é o mecanismo que permite transmitir essas informações.
  • Imagine que tem o terminal A, que você quer mandar para B. O TCP quebra esse arquivo em vários fragmentos. O TCP vai organizar esses fragmentos no ponto B.
  • IP conecta os pontos na rede, o TCP é a camada de dados.
  • O principal objetivo dessas mudanças, era para ter conexões persistentes e reutilizáveis, mecanismo de cache e outros pontos importantes.
  • Um site comum hoje possui tranquilamente mais de 90 dependências.
  • Nesse caso, a performance vira um gargalo gigante.
  • Keep Alive reutiliza uma única conexão TCP para enviar e receber múltiplos requests.
  • No HTTP1 nos permite apenas 6 a 8 conexões por origem.
  • Criar novos hosts names com o objetivo de aumentar essa quantidade de conexões. Domain Sharding.
  • Com essa técnica podemos habilitar até 100 conexões simultâneas.
  • Fora as técnicas de performance de front-end: Concatenar arquivos, usar sprites, inline de recursos, compressão de imagens.
  • Essas técnicas ajudam, mas não são perfeitas.
  • PageSpeed Module que é um módulo para servidor, do Google, que permite implementar essas regrinhas básicas de front-end.
  • Além disso reduz o lookup de dns, comprime com gzip arquivos de texto e etc.
  • Dá para usar o pagespeed insides, que mede a performance do seu site, pontuando e dando dicas de práticas que você deixou de fazer.
  • O SPDY é uma iniciativa do Google, de 2009, para tentar inovar em termos de performance atacando o nível de protocolo de uma aplicação.
  • Ele inicia o conceito de assuntos como Multiplexing, server push, compressão de dados
  • A ideia foi introduzida em 2012 como uma extensão do SPDY/3
  • o HTTP2 então foi como um fork do SPDY
  • Multiplexing são Múltiplos requests rodando em paralelo em uma única conexão TCP assíncrona.
  • Binary Framing é o que torna tudo isso possível. Os headers deixam de seguir o formato de texto e passam a ser dados binários.
  • Streams
  • Sugira arquivos para o browser carregar antecipadamente com o atributo rel=“prefetch”.
  • A spec do HTTP/2 diz que arquivos com extensões desconhecidas devem ser ignoradas
  • Use extensões através do campo type
  • Load balancers como Varnish e Squid podem se conectar diretamente ao protocolo
  • Quando falamos sobre extensões ou plugins, direto no fluxo de network, conseguimos manipular qualquer coisa com acesso direto e rápido.
  • Um dos problemas de mudar o protocolo, é que a adoção e a evolução são coisas indefinidas, demoram, não há respostas corretas.
  • Como o controle de tráfego de redes é modificado, há um grande espaço para erros.
  • Entre o server e o client, há uma série de Middle Boxes, que são os fireworks e uma série de outras coisas que ficam por debaixo dos panos
  • O que o HTTP/2 muda na sua vida?
    • Continue minificando JS, CSS;
- Continue comprimindo imagens;
- Esquece GZIP, o servidor faz automatico
- Mate bundles
    • ES6 Modulos + HTTP/2 é amor
- Server push substitui inline de recursos sem gambiarra;
- Sem necessidade de múltiplos hostnames;
- Cookies em servidores estáticos não são mais problema;
  • HTTP/2 é retrocompatível, Compressão, Multiplexing, Binary framing, Streams, Priorização, Extensões.
@marcofrasson
Copy link

Demais isso cara! E já tem previsão de usarmos isso?

@cirocosta
Copy link

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment