View
10
Download
0
Category
Preview:
Citation preview
HTTPpassado, presente e futuro.
Luiz FernandoRodrigues (ou Fernahh)blog.fernahh.com.br
github.com/fernahh
twitter.com/fernahh
speakerdeck.com/fernahh
www.organicadigital.com
HTT... o que?
HTT... o que?HyperText Transfer ProtocolDesenvolvido para distribuir conteúdo de hypertexto.
Iniciauma conexão
GET /foo.html
PROCESSAFecha a
conexão.
http://bit.ly/19uEIk0
uma request! só 2KB!
HTTP/1.1
GET: requisita um objeto ao servidor.
POST: escreve um objeto no servidor.
PUT: escreve um objeto no servidor respeitando a idempotência.
DELETE: remove um objeto no servidor.
Iniciauma conexão
GET /foo.html
Fecha aconexão.
HTTP/1.1 > Keep Alive
GET /bar.css
HTTP/1.1 > Multiplos hosts
Com HTTP1.1 podemos abrir de 4 a 8 conexões por origem (depende do browser).
HTTP/1.1 > Multiplos hosts
podemos criar até 100 conexões simultâneas...
A web nasceu descentralizada
O HTTP é Stateless
HTTP WEB
HTTP WEBmas essa linda história de amor mudou...
um pouco de história...
1990
HTML
1990
HTML Elemento <img>
1993
1990
HTML Elemento <img>
1993 1994
CSS
1990
HTML Elemento <img>
1993 1994
CSS
1995
JavaScript
1990
HTML Elemento <img>
1993 1994
CSS
1995
JavaScript
no caso mais simples, já temos 4 requisições e4 processamentos do servidor.ou seja,
a web começou a evoluir!
Mas e o HTTP? Não evoluiu nesses 5 anos?
Mas e o HTTP? Não evoluiu nesses 5 anos?
Não.
1991
HTTP
1999
HTTP/1.1
1991
HTTP
1999
HTTP/1.1
SÓ 8 (O-I-T-O) ANOS DEPOIS GANHAMOS O MÉTODO POST!
A versão 1.1 do protocolo HTTP é o que
usamos até hoje.
HTTP WEB
em linhas curtas...
Leiam, sério: http://tableless.com.br/o-grande-desencontro-http-com-o-html/
Mas o homem sempre evolui em situações difíceis...
Concatenamos assets(imagens, css e js)
Compactamos assets (gzip, minificação, etc)
Usamos múltiplos hostnames
Mas o homem sempre evolui em situações difíceis...
Concatenamos assets(imagens, css e js)
Compactamos assets (gzip, minificação, etc)
Usamos múltiplos hostnames
Otimização de requisições
Diminuição de tráfego
Paralelização de requisições
chegamos a 2015 com evoluções incríveis!
e a web também...
SPDY
uma das mais importantes evoluções para o nosso protocolo...
SPDY
HTTPSPDYSSLTCP
Apenas um
a
camada a mais!
SPDY
HTTPSPDYSSLTCP
Fallback HTTPS, ou seja:SEGURANÇA!
SPDY
O tempo de carregamento de sua página pode cair mais de 40%, dependendo da situação.
HTTP/2
e depois de 16 anos...
Compressão automática
Compressão automática > o que muda
- GZIP é padrão obrigatório;
- Headers são binários e comprimidos.
Compressão automática > exemplo de header HTTP/1.1
HTTP/1.1 200 OKContent-Type: text/html; charset=utf-8Transfer-Encoding: chunkedConnection: keep-aliveStatus: 200 OK
X-UA-Compatible: IE=Edge,chrome=1ETag: "4618f5c69dfa0ee8cb492830482c0bbe"Cache-Control: max-age=0, private, must-revalidate
Set-Cookie: _organicadigital_session=BAh7B0kiD3Nlc3Npb25f….Date: Sat, 21 Mar 2015 19:23:51 GMTServer: nginx/1.6.0 + Phusion Passenger 4.0.42
<!DOCTYPE html>...
Compressão automática > exemplo de header HTTP/2
0010101010101010101
01010101010101010100010101010101010101101010101010
?T?%.?JI?;1?R,1?T?.?[mŚ???,1? Q?_?*f0?{{?un?T?%.?JI?;1?R,1?T?.?[mŚ???,1? Q?_?*f0?{{?un,1?T?.?[mŚ?T?%??????????0
Compressão automática > exemplo de header HTTP/2
0010101010101010101
01010101010101010100010101010101010101101010101010
?T?%.?JI?;1?R,1?T?.?[mŚ???,1? Q?_?*f0?{{?un?T?%.?JI?;1?R,1?T?.?[mŚ???,1? Q?_?*f0?{{?un,1?T?.?[mŚ?T?%??????????0
Binário
GZIP
Compressão automática > exemplo de header HTTP/2
?T?%.?JI?;1?R,1?T
JI?;1?R,1?T?,%JI?;1?R,1?T1?R,1?T???m,;T?un,1?TU?R,1??R,1?m1R
?T?%.?JI?;1?R,1?T?.?[mŚ???,1? Q?_?*f0?{{?un?T?%.?JI?;1?R,1?T?.?[mŚ???,1? Q?_?*f0?{{?un,1?T?.?[mŚ?T?%??????????0
HPACK
GZIP
Compressão automática > exemplo de header HTTP/2
?????????????????
????????????????????????????????????????????????????????????
???????????????????????????????????????????????????????????????????????????????????????????????????????????????????
Ah sim,temos HTTPS!
X
Free, automatizado e aberto!
0010101010101010101
01010101010101010100010101010101010101101010101010
?T?%.?JI?;1?R,1?T?.?[mŚ???,1? Q?_?*f0?{{?un?T?%.?JI?;1?R,1?T?.?[mŚ???,1? Q?_?*f0?{{?un,1?T?.?[mŚ?T?%??????????0
HTTP/1.1 200 OKContent-Type: text/html; charset=utf-8Transfer-Encoding: chunkedConnection: keep-aliveStatus: 200 OK
X-UA-Compatible: IE=Edge,chrome=1ETag: "4618f5c69dfa0ee8cb492830482c0bbe"Cache-Control: max-age=0, private, must-revalidate
Set-Cookie: _organicadigital_session=BAh7B0kiD3Nlc3Npb25f….
Date: Sat, 21 Mar 2015 19:23:51 GMTServer: nginx/1.6.0 + Phusion Passenger 4.0.42
<!DOCTYPE html>...
Multiplexing
Multiplexing > o que muda
- Requisições e respostas são paralelas;
- Ou seja, mais de uma requisição por conexão.
Multiplexing > exemplo
Iniciauma conexão
Fecha aconexão.
Multiplexing é amor!
Concatenamos assets(imagens, css e js)
Compactamos assets (gzip, minificação, etc)
Usamos múltiplos hostnames
Otimização de requisições
Diminuição de tráfego
Paralelização de requisições
Priorização de requisições
Priorização de requisições > o que muda
- Poderemos priorizar recursos;
- Escolhemos o que o usuário verá por primeiro.
Priorização de requisições > o que muda
1ºGET /index.html
3ºGET /main.js
2ºGET /main.css
A priorida
de do
CSS é maior!
Concatenamos assets(imagens, css e js)
Compactamos assets (gzip, minificação, etc)
Usamos múltiplos hostnames
Otimização de requisições
Diminuição de tráfego
Paralelização de requisições
Server Push
Server Push > o que muda
- O servidor poderá enviar recursos para o cliente;
- Adeus gambiarras.
Server Push > o que muda
1ºGET /index.html
main.js
main.css
index.html
Concatenamos assets(imagens, css e js)
Compactamos assets (gzip, minificação, etc)
Usamos múltiplos hostnames
Otimização de requisições
Diminuição de tráfego
Paralelização de requisições
“As boas práticas de hoje vão ser futuros problemas no HTTP/2”
Rodrigo Willrich
HTTP/2 > Padrões atuais == Gambiarras
Sprite
Concatenação de arquivos
Servir assets de domínios diferentes
HTTP/2 > Padrões atuais == Gambiarras
Sprite
Concatenação de arquivos
Servir assets de domínios diferentes
HTTP/2 > Padrões atuais == Gambiarras
Sprite
Concatenação de arquivos
Servir assets de domínios diferentes
HTTP/2 > Padrões atuais == Gambiarras
Sprite
Concatenação de arquivos
Servir assets de domínios diferentes
...mas o mundo será bem melhor...
eu acho.
HTTP/2 > No front-end
11+ 43+ 39+ 30+ 9+
HTTP/2 > No back-end
Módulos para Apache
Módulos para ngnix
Jetty e Netty (Java)
Servidores http/2 para NodeJS, Ruby, ...
Implementações: https://github.com/http2/http2-spec/wiki/Implementations
Obrigado!
Luiz Fernando Rodrigueshttp://blog.fernahh.com.br
Referências:
- http://blog.caelum.com.br/as-fantasticas-novidades-do-http-2-0-e-do-
spdy/
- http://pt.slideshare.net/caelumdev/http2-spdy-e-otimizaes-web-front-in-
macei-2014-srgio-lopes7
- https://mattwilcox.net/web-development/http2-for-front-end-web-
developers
- https://http2.github.io/
Recommended