Wprowadzenie do HTTP/2

Wprowadzenie do HTTP/2Gabor Wnuk, Software Architect / Team

Leader

OptymalizacjaHTTP/1.1HTTP/2Co dalej?

Mobile vs desktopWhat’s all the fuss about?

- pageviews desktop (lipiec 2015) – 3,5 mld- screenviews mobile (lipiec 2015) – 832 mln (24%) - pageviews desktop (maj 2015) – 3,7 mld- screenviews mobile (maj 2015) – 694 mln (18%)

Wzrost o 17% w dwa miesiące.

Źródło: Megapanel PBI/Gemius, maj 2015 i lipiec 2015

Optymalizacja aplikacjiI moment, w którym uderzamy w sufit


OPTYMALIZACJA DEPLOY

CACHECzy tak naprawdę potrzebujemy?

Apache, nginx, ???Keep Alive?

ZAKOŃCZENIE

generated 12344 bytes in 5 msecs,

YAY!

BAZA DANYCHMamy indeksy? :) Potrzebujemy SQL?

CACHE CONTROLE-Tag + If-None-Match,

Cache-Control

STRESSTESTfunkload, locust, ab

Użytkownika to średnio interesuje.

OptymalizacjaHTTP/1.1HTTP/2Co dalej? (o ile zrobiłaś / zrobiłeś to w miarę dobrze)


HTTP/1.1 (bez Keep Alive)Typowy timeline requestu

DNS(cache’owane)

CONNECTING(3-Way handshake, TLS

handshake)

SENDING(request: nagłowki, ciastka,zależne od ilości danych)

WAITING(zależy od szybkości endpointu)

RECEIVING(pobieramy dane z serwera,

zależne od ilości danych)

130 ms 127 ms 298 ms 5 ms 250 ms

Total: 885 ms3G, Orange, zasięg 4/5.

Connection: close


HTTP/1.1 (bez Keep Alive)Typowy timeline requestu

Connection: closeConnection: close

Connection: close

3 assety, total: ~3150 ms3G, Orange, zasięg 4/5.


HTTP/1.1 (Keep Alive)Jedno połączenie, oszczędzamy czas na nawiązaniu

kolejnych

…



HTTP/1.1 (Keep Alive)Timeline dla kilku requestów (~5 połączeń per domena)

CZEKAMY


HTTP/1.1 (Keep Alive)CNAME (p1.pudelek.pl, p2.pudelek.pl, p3.pudelek.pl …)

Gabor Wnuk

Aby zredukować próbujemy:Łączyć CSS w jeden plik i JS w jeden plik.Base64, inlineTworzymy sprite’y

HTTP/1.1 ma prawie 20 lat.OptymalizacjaHTTP/1.1HTTP/2Co dalej? (i nie starzeje się z godnością)

Gabor Wnuk

Chrome: początek 2016 - SPDY deprecated


Wirtualna Polska kiedyśGrudzień 1998

Gabor Wnuk

40 requestów, 120 kbDzisiaj: 205 requestów zanim zaczniemy scrollować (lazy load), 4,8 MB


Mobile kiedyśGrudzień 1998


Mobile kiedyśGrudzień 1998

Gabor Wnuk

Nokia 7110, pierwszy WAPWAP HTTP - 2001 rok.

HTTP/2 to the rescue!OptymalizacjaHTTP/1.1HTTP/2Co dalej? (SPDY)


GoodiesHTTP/2

- 1:1 zgodność z HTTP/1.1 - (te same metody, kody statusów, semantyka)


GoodiesHTTP/2

- 1:1 zgodność z HTTP/1.1 - (te same metody, kody statusów, semantyka)- protokół binarny - (łatwiejszy do zinterpretowania przez serwer)


GoodiesHTTP/2

- 1:1 zgodność z HTTP/1.1 - (te same metody, kody statusów, semantyka)- protokół binarny - (łatwiejszy do zinterpretowania przez serwer)- kompresja nagłówków (HPACK)


Kompresja nagłówków (HPACK)HTTP/2

:authority:

gabo.re

:method GET:path /test/test.html:scheme

https

accept text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8

user-agent

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.85 Safari/537.36

REQUEST

1 :authority:

gabo.re

2 :method GET… … …25

:path /test/test.html

… … …67

:scheme

https

… … …88

accept text/html,application/xhtml…

89

user-agent

Mozilla/5.0 (Macintosh; Intel…

12…25

:path /test/bla.html

…67…88

89

ENCODED HEADERS


GoodiesHTTP/2

- 1:1 zgodność z HTTP/1.1 - (te same metody, kody statusów, semantyka)- protokół binarny - (łatwiejszy do zinterpretowania przez serwer)- kompresja nagłówków (HPACK)- multiplexing - (flow control, priorytety)


MultiplexingHTTP/2


…

KOMPRESJA NAGŁOWKÓW

KOMPRESJA NAGŁOWKÓW


Demo


Kompresja nagłówków (HPACK)HTTP/2


GoodiesHTTP/2

- 1:1 zgodność z HTTP/1.1 - (te same metody, kody statusów, semantyka)- protokół binarny - (łatwiejszy do zinterpretowania przez serwer)- kompresja nagłówków (HPACK)- multiplexing - (flow control, priorytety)- server push - (WIP)


Server pushHTTP/2

GET /index.html

/index.html

/script.js

/styles.css


GoodiesHTTP/2

- 1:1 zgodność z HTTP/1.1 - (te same metody, kody statusów, semantyka)- protokół binarny - (łatwiejszy do zinterpretowania przez serwer)- kompresja nagłówków (HPACK)- multiplexing - (flow control, priorytety)- server push - (WIP)- stream termination


Early AdoptersHTTP/2

- facebook.com – spdy/3.1- google.com – QUIC + spdy/3.0- yahoo.com – spdy/3.1- twitter.com – http/2


Early AdoptersHTTP/2

- facebook.com – spdy/3.1- google.com – QUIC + spdy/3.0- yahoo.com – spdy/3.1- twitter.com – http/2

- Wirtualna Polska (API native mobile + Image Resizer) - spdy/3.1 + http/2


PrzeglądarkiHTTP/2 - wsparcie

- Chrome + Chrome Android + Chrome dla iOS- Firefox >= 36- Internet Explorer 11- Microsoft Edge- Opera >= 29- Safari >= 9


Native MobileHTTP/2 - wsparcie

- iOS8 - SPDY, iOS9 - globalnie HTTP2 (NSURLSession)- Android 2.3 - HTTP2 + SPDY (OkHttp)- Windows Phone 8.1 - SPDY, Windows 10 - HTTP/2


i co dalej?Jak zacząć?

- Python - hyper - https://github.com/lukasa/hyper- Go - http2 - https://github.com/bradfitz/http2- Server, client + narzędzia - https://nghttp2.org- nginx (super alpha, non production) - http://nginx.org/patches/http2/

+ ~40 implementacji (Java, Ruby, Swift, etc.) - https://http2.github.io

https://http2.github.io/

Gabor Wnuk

lukasa - Cory Benfield

Dziękuję!Bye, bye.

Jest coś co przykuło Twoją uwagę w tej prezentacji? Porozmawiajmy!


Gabor WnukSoftware Architect / Team LeaderZespół Aplikacji Mobilnych

[email protected]

mailto:[email protected]

Wprowadzenie do HTTP/2

Technology

Transcript of Wprowadzenie do HTTP/2