Tomasz Kajtoch: Dokładnie 2 lata temu została opublikowana specyfikacja protokołu HTTP w wersji drugiej. Mimo wielu zalet, tylko niewielki procent usług w internecie zdecydował się na jego wdrożenie. Moja prelekcja poświęcona będzie praktycznym przykładom i zaletom płynącym z jego użycia pod kątem frontendu oraz porówna go z dotychczas stosowanymi rozwiązaniami.

1. HTTP/2:
PRAKTYCZNE KORZYŚCI
W REALNYM ŚWIECIE
Tomasz Kajtoch

2. O MNIE
1/11 Tomków w TSH
Frontend Developer
I BACKENDOWIEC PO GODZINACH
mój koteł

3. CZYM JEST HTTP/2?

4. "TO RACZEJ SPRAWA
BACKENDOWCÓW..."

5. NASZ CEL:
NISKI CZAS ŁADOWANIA
STRONY

6. PROBLEM:
OH MY ASSETS
"Dorzućmy tu jeszcze kilka grafik"

7. BUDOWA PROTOKOŁU HTTP

8. HTTP/1.1: TEKSTOWY
HTTP/1.1 200 OK
Content-Type: text/plain
Content-Length: 17
Wow, Uszanowanko!

9. HTTP/2: STRUMIENIE BINARNE
DATA
RST_STREAM
PRIORITY
HEADERS
SETTINGS
PUSH_PROMISE
PING
GOAWAY
WINDOW_UPDATE
CONTINUATION

10. TROCHĘ HISTORII

11. HTTP/1.X
JEST STARY

12. RFC-2616
Maks. liczba połączeń na host
Maks. liczba połączeń globalnie
2
—
Firefox
Maks. liczba połączeń na host
Maks. liczba połączeń globalnie
6
900
Google Chrome
Maks. liczba połączeń na host
Maks. liczba połączeń globalnie
6
256
Internet Explorer
Maks. liczba połączeń na host
Maks. liczba połączeń globalnie
8
30

13. PROBLEM:
HEAD-OF-LINE BLOCKING
Każde żądanie po wysłaniu zapytania czeka
i blokuje połączenie w oczekiwaniu na
dostarczenie całej odpowiedzi serwera.

14. PROBLEM:
KONIECZNOŚĆ
CONCATENACJI

15. PROBLEM:
SPRITES

16. PROBLEM:
DOMAIN SHARDING

17. WSZYSTKIE TE PROBLEMY
ROZWIĄZUJE HTTP/2

18. JEDNO MULTIPLEKSOWANE
POŁĄCZENIE NA HOST

19. PODZIAŁ NA:
H2 (HTTP2 OVER TLS)
H2C (HTTP2 OVER TCP)

20. WISIENKA NA TORCIE:
SERVER PUSH

21. KOMPATYBILNOŚĆ HTTP/2
A WPŁYW NA
FRONTEND / APLIKACJE

22. BEFORE & AFTER
Sprawdzamy rezultaty
na praktycznym przykładzie

23. PRZYKŁAD:
KOLEJKOWANIE
WCZYTYWANIA ZASOBÓW

24. HTTP/1.1 HTTP/2

25. LIVE DEMO
HTTPS://HTTP2.KAJTO.CH

26. JAK MOGĘ TEGO UŻYĆ?

27. WSPARCIE PRZEGLĄDAREK
DESKTOPOWYCH:
Google Chrome 41+
05 Marca 2015
Firefox 36+
24 Lutego 2015
Opera
10 Marca 2015
Safari 9+
01 Października 2015
IE 11+ & EDGE
29 Lipiec 2015

28. WSPARCIE PRZEGLĄDAREK
MOBILNYCH:
iOS Safari
Chrome
for iOS & for Android
Opera Mobile Android WebView
Firefox for Android

29. IMPLEMENTACJA
SERVER-SIDE

30. NGINX >= 1.9.5
server {
listen 443 ssl http2;
ssl_certificate server.crt;
ssl_certificate_key server.key;
}
--with-http_v2_module

31. APACHE MOD_HTTP2 >= 2.4.17
LoadModule http2_module modules/mod_http2.so
--enable-http2
<VirtualHost>
ServerName example.com
Protocols h2 http/1.1
</VirtualHost>

32. PODSUMOWANIE

33. Pytania?

34. DZIĘKUJĘ!