Dissecando o protocolo HTTP/2.0

Slide 1

Slide 1 text

Dissecando o protocolo HTTP/2 Rafael Rinaldi

Slide 2

Slide 2 text

http://rinaldi.io

Slide 3

Slide 3 text

http://netshoes.com.br

Slide 4

Slide 4 text

http://sp.femug.com

Slide 5

Slide 5 text

http://zofe.com.br

Slide 6

Slide 6 text

Hypertext Transfer Protocol (HTTP)

Slide 7

Slide 7 text

Base da comunicação de dados na World Wide Web

Slide 8

Slide 8 text

Comunicação entre o servidor e o client com o intuito de transferir arquivos

Slide 9

Slide 9 text

Primeiro draft disponibilizado em 1991

Slide 10

Slide 10 text

1. Client se conecta ao host; 2. Servidor aceita a conexão; 3. Client faz requisição de um arquivo; 4. Servidor envia uma resposta.

Slide 11

Slide 11 text

λ http -v server.com GET / HTTP/1.1 Accept: */* Accept-Encoding: gzip, deflate Connection: keep-alive Host: server.com User-Agent: HTTPie/0.9.2

Slide 12

Slide 12 text

λ http server.com HTTP/1.1 301 Moved Permanently Accept-Ranges: bytes Age: 887 Connection: keep-alive Content-Encoding: gzip Content-Length: 298 Content-Type: text/html; charset=iso-8859-1 Date: Thu, 05 Mar 2015 03:24:18 GMT Location: http://www.server.com Server: Apache/2.2.22 (Debian) PHP/5.3.3-7+squeeze25 with OpenSSL/0.9.8o Usou: Cache Vary: Accept-Encoding Via: 1.1 varnish X-Varnish: 180850535 180830146 …

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

TCP/IP

Slide 15

Slide 15 text

TCP/IP Internet Protocol

Slide 16

Slide 16 text

TCP/IP Responsável por conectar uma rede a outra

Slide 17

Slide 17 text

TCP/IP Transmission Control Protocol

Slide 18

Slide 18 text

TCP/IP Mecanismo que nos permite transferir dados

Slide 19

Slide 19 text

A B TCP

Slide 20

Slide 20 text

A B TCP

Slide 21

Slide 21 text

A B TCP

Slide 22

Slide 22 text

A B TCP

Slide 23

Slide 23 text

A B TCP

Slide 24

Slide 24 text

IP → TCP → HTTP

Slide 25

Slide 25 text

HTTP/1.x

Slide 26

Slide 26 text

Introduzido em 1999 com diversas mudanças drásticas ao primeiro draft

Slide 27

Slide 27 text

›❯ Conexões persistentes e reutilizáveis; ›❯ Transferência de dados em blocos; ›❯ Processamento paralelo de requests; ›❯ Mecanismos de cache mais inteligentes.

Slide 28

Slide 28 text

›❯ Muitas features implementadas, poucas de fato utilizadas; ›❯ Integração inadequada com o protocolo TCP. ¯\_(ツ)_/¯

Slide 29

Slide 29 text

A web evoluiu muito e de forma rápida

Slide 30

Slide 30 text

Um website comum hoje possui tranquilamente mais de 90 dependências

Slide 31

Slide 31 text

77 725K 1900K 100 Fonte: httparchive.org Últimos 4 anos

Slide 32

Slide 32 text

Performance se torna o grande gargalo

Slide 33

Slide 33 text

Otimização

Slide 34

Slide 34 text

Keep alive

Slide 35

Slide 35 text

Reutilizar uma única conexão TCP para enviar e receber múltiplos requests (ao invés de abrir uma nova conexão para cada request)

Slide 36

Slide 36 text

λ http PUT server.com foo=bar HTTP/1.1 200 OK Connection: keep-alive Content-Length: 332 Content-Type: application/json Date: Thu, 05 Mar 2015 03:24:18 GMT Location: http://www.server.com Server: Apache/2.2.22 (Debian) PHP/5.3.3-7+squeeze25 with OpenSSL/0.9.8o { isSuccess: true }

Slide 37

Slide 37 text

›❯ Diminuição do uso de memória e CPU; ›❯ Reduz congestionamento na rede; ›❯ Reduz latência dos requests posteriores.

Slide 38

Slide 38 text

No HTTP/1.1 todas as conexões são persistentes (possibilidade de opt-out)

Slide 39

Slide 39 text

A grande maioria dos browsers modernos implementam esse recurso por padrão

Slide 40

Slide 40 text

HTTP Pipelining

Slide 41

Slide 41 text

Client Servidor

Slide 42

Slide 42 text

Uma forma de enviar um request enquanto se aguarda a resposta do anterior (processo síncrono)

Slide 43

Slide 43 text

Client Servidor

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

Head-of-line Blocking (HOL Blocking)

Slide 46

Slide 46 text

Client Servidor Fila de responses ¯\_(ツ)_/¯

Slide 47

Slide 47 text

HTTP Pipelining não funciona na prática

Slide 48

Slide 48 text

Até hoje navegadores desktop vem com essa feature desabilitada por padrão

Slide 49

Slide 49 text

Domain sharding

Slide 50

Slide 50 text

O HTTP/1.1 nos permite apenas abrir de 6 a 8 conexões por origem (a primeira spec tinha uma limitação de apenas 2)

Slide 51

Slide 51 text

Criar novos host names com o objetivo de aumentar o número de conexões (diminuindo tempo de carregamento)

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

Utilizando essa técnica, alguns sites conseguem habilitar até 100 conexões simultâneas

Slide 54

Slide 54 text

Otimização no front-end

Slide 55

Slide 55 text

›❯ Concatenação e miniﬁcação de arquivos; ›❯ Utilização de sprites para imagens; ›❯ Inline de recursos; ›❯ Compressão de imagens.

Slide 56

Slide 56 text

PageSpeed Module (modpagespeed)

Slide 57

Slide 57 text

Implementa boas práticas de otimização de performance automaticamente

Slide 58

Slide 58 text

Disponível para Apache e Nginx

Slide 59

Slide 59 text

›❯ Reduzir lookup de DNS; ›❯ Reduzir número de requests; ›❯ Servir recursos através de uma CDN; ›❯ Adicionar “Expires header”; ›❯ Compressão GZIP em arquivos baseados em texto; ›❯ Evitar redirecionamento de URL.

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

Surgiu então a necessidade de se pensar em otimização na camada de protocolo

Slide 62

Slide 62 text

Construir algo em cima do HTTP era a única solução viável

Slide 63

Slide 63 text

SPDY

Slide 64

Slide 64 text

Introduzido em 2009

Slide 65

Slide 65 text

Prova de conceito do Google de que a otimização na camada de protocolo era algo positivo e factível

Slide 66

Slide 66 text

Reduzir latência e melhorar a segurança no tráfego de dados

Slide 67

Slide 67 text

›❯ Compressão de header via zlib; ›❯ Depende de conexão segura para funcionar (HTTPS); ›❯ Adotado pela grande maioria dos navegadores modernos; ›❯ Suporte via módulos para web servers populares; ›❯ Introduziu muitos conceitos de melhoria de performance.

Slide 68

Slide 68 text

HTTP/2

Slide 69

Slide 69 text

HTTP/2

Slide 70

Slide 70 text

Introduzido em 2012 como uma extensão do SPDY/3

Slide 71

Slide 71 text

Retrocompatível com a arquitetura do HTTP

Slide 72

Slide 72 text

Multiplexing

Slide 73

Slide 73 text

Múltiplos requests rodando em paralelo

Slide 74

Slide 74 text

Uma única conexão TCP assíncrona

Slide 75

Slide 75 text

Client Servidor

Slide 76

Slide 76 text

Binary framing

Slide 77

Slide 77 text

Headers seguem formato binário

Slide 78

Slide 78 text

Apenas informações do header que mudam entre requisições são enviadas (User-Agent, por exemplo, só é enviado uma única vez)

Slide 79

Slide 79 text

Parsing simples e eﬁciente

Slide 80

Slide 80 text

Client e servidor conversam através de frames

Slide 81

Slide 81 text

No content

Slide 82

Slide 82 text

Streams

Slide 83

Slide 83 text

Todo frame negociado via HTTP/2 é associado a um stream

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

Player toca o que já foi carregado (Buffer) O resto é carregado em paralelo

Slide 86

Slide 86 text

No HTTP/2 podemos ter centenas de streams simultâneos pois seu custo é muito baixo

Slide 87

Slide 87 text

Compressão

Slide 88

Slide 88 text

Arquivos textuais são comprimidos com GZIP por padrão

Slide 89

Slide 89 text

Compressão de headers por padrão

Slide 90

Slide 90 text

Testes com compressão dos headers via GZIP mostraram vulnerabilidades (BREACH e CRIME)

Slide 91

Slide 91 text

Um novo formato de compressão foi criado, o HPACK

Slide 92

Slide 92 text

Priorização

Slide 93

Slide 93 text

Graças a análise detalhada de dados via streams, conseguimos priorizar o carregamento de recursos

Slide 94

Slide 94 text

Browser tem a capacidade de manipular a prioridade de carregamento com o intuito de otimizar a renderização da página

Slide 95

Slide 95 text

Server Push

Slide 96

Slide 96 text

Habilidade de sugerir arquivos a serem carregados

Slide 97

Slide 97 text

Client Servidor index.html index.html style.css app.js logo.svg

Slide 98

Slide 98 text

.inline-css { // ... } function inlineScript() { // ... }

Slide 99

Slide 99 text

Inline de recursos, sem gambiarra e com suporte a cache!

Slide 100

Slide 100 text

Slide 101

Slide 101 text

No content

Slide 102

Slide 102 text

Extensões

Slide 103

Slide 103 text

A spec do HTTP/2 diz que frames com tipos desconhecidos devem ser ignorados

Slide 104

Slide 104 text

Temos nisso a oportunidade de se pensar em plugins e extensões que podem implementar tipos próprios

Slide 105

Slide 105 text

Load balancers como Varnish e Squid podem se conectar diretamente ao protocolo

Slide 106

Slide 106 text

Deploy

Slide 107

Slide 107 text

Um dos problemas de se fazer mudanças no protocolo principal da web é de como será a adoção e a evolução disso

Slide 108

Slide 108 text

Muito da forma como o controle de tráfego de rede funciona foi alterada e isso tem potencial para causar problemas

Slide 109

Slide 109 text

No content

Slide 110

Slide 110 text

Server

Slide 111

Slide 111 text

Server Client

Slide 112

Slide 112 text

Server Client }Middle boxes

Slide 113

Slide 113 text

A necessidade de se usar SSL com HTTP/2 é uma forma de contornar isso. (Criptograﬁa vem de brinde)

Slide 114

Slide 114 text

Tirar proveito das melhorias sem quebrar compatibilidade com a estrutura atual da web.

Slide 115

Slide 115 text

Com o TLS/SSL o servidor consegue negociar o uso do novo protocolo sem quebrar middle boxes

Slide 116

Slide 116 text

TLS + ALPN =

Slide 117

Slide 117 text

Mudanças de workﬂow

Slide 118

Slide 118 text

›❯ Continue miniﬁcando JS, CSS; ›❯ Continue comprimindo imagens; ›❯ GZIP automático; ›❯ Mate bundles de arquivos; ›❯ ES6 modules + HTTP/2 = ❤; ›❯ 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.

Slide 119

Slide 119 text

TL;DR

Slide 120

Slide 120 text

›❯ Retrocompatível; ›❯ Compressão; ›❯ Multiplexing; ›❯ Binary framing; ›❯ Streams; ›❯ Priorização; ›❯ Extensões.

Slide 121

Slide 121 text

Cenário atual

Slide 122

Slide 122 text

›❯ Não use componentes de carrossel; ›❯ É bolacha, não biscoito! ›❯ HTTP/2 é bacon/donut (e não é do Google); ›❯ Brinks com seu servidor HTTP/2 (Node.js, Go, Ruby); ›❯ Servidores mais inteligentes; ›❯ Módulos experimentais para Apache e Nginx; ›❯ Utilize SPDY/HTTP/2 hoje! Pela ciência! ›❯ Acompanhar progresso do QUIC.