Что надо знать о http/2

HTTP/2Что нужно знать фронтендеру

Moscow JS Conf

1

Александр Майоров

§ twitter, github: @frontdevops§ alexander@majorov.su

Developer advocate & technical evangelist inTutu.ru

2

267сотрудников

600 тыс.посетителей в день

2003 г.год основания

Мы продаем туры, ж/д и авиабилеты, билеты на автобусы, бронируем отели, рассказываем о расписании.

11 млнпосетителей в месяц

Самый посещаемый сервис туристических услуг в России(по результатам исследования comScore).

3

HTTP/2

4

Факты про HTTP/2

§ Основан на базе Google SPDY

§ Стандартизован в мае 2015 (RFC 7540, 7541)

§ Может работать поверх TCP (h2c), но браузеры умеют только поверх TLS (h2 with ALPN)

§ Больше не будет минорных версий

5

TLS или SSL ?

TLS - transport layer security, основан на протоколе SSL (Secure Sockets Layer).

На данный момент последняя версия –TLS 1.2, выпущена в августе 2008 года.

Простым языком: TLS это другая версия SSL и он лучше :)

6

Ключевые особенности HTTP/2

§ ТранспортнаянадстройканадHTTP/1.x§ Сжатиезаголовков§ Бинарныйформат§ Мультиплексирование§ Приоритезация

7

Надстройка над HTTP/1.x

8

Бинарный формат

HTTP/2

9

Мультиплексирование

10

Мультиплексирование

11

Приоритезация

12

SUPPORTЧтосподдержкой?

13

Поддержка браузерами

14

Поддержка на бекенде

§ Nginx(1.9.5+)§ Apache(2.4.17+)withmod_http2

§ Nodejs withhttp2module§ Nghttpx§ H2O

15

СЕРТИФИКАТЫHTTPS://

16

Где брать сертификаты ?

§ Купить...§ Получитьбесплатноу

§ Let's encrypt§ StartSSL

§ Создатьсамомуиподписать(self-signed)

17

Self-signed сертификаты

Ø Работает,но Chrome запускать с флагом:chrome--ignore-certificate-errors

18

SERVER HINTSRESOURCE HINTSSERVER

19

Что это?

<link rel="dns-prefetch" href="//example.com"><link rel="preconnect" href="//example.com"><link rel="prefetch" href="/next-page.html" as="html"><link rel="prefetch" href="/library.js" as="script"><link rel="prefetch" href="/theme.css" as="style"><link rel="subresource" href="/page.css">

20

Resource hints

21

<link rel="dns-prefetch" href="//example.com"><link rel="preconnect" href="//example.com"><link rel="prefetch" href="/next-page.html" as="html"><link rel="prefetch" href="/library.js" as="script"><link rel="prefetch" href="/theme.css" as="style"><link rel="subresource" href="/page.css">

Server hints

GETHTTP/1.1…Link:<https://example.com>;rel=dns-prefetchLink:<https://example.com>;rel=preconnectLink:<https://example.com/next-page.html>;rel=prerender;Link:<https://example.com/logo.jpg>;rel=prefetch;as=image;…

22

Preload

23

Preload

<link rel="preload" href="/next-page.html" as="html"><link rel="preload" href="/library.js" as="script"><link rel="preload" href="/theme.css" as="style"><link rel="preload" href="/page.css” as="style">

24

Preload

GETHTTP/1.1…Link:</next-page.html>;rel=preload;as=html;Link:</logo.jpg>;rel=preload;as=image;Link:</app/script.js>;rel=preload;as=script;Link:</app/style.css>;rel=preload;as=style;…

25

Server push use preload

GETHTTP/1.1…Link:</next-page.html>;rel=preload;as=html;Link:</logo.jpg>;rel=preload;as=image;Link:</app/script.js>;rel=preload;as=script;Link:</app/style.css>;rel=preload;as=style;nopush…

RFC5988

РаботаетвпроксиNghttpx26

HTTP/2 Server push

27

HTTP/2 vs HTTP/1

28

Server Push in Applicationconst fs = require('fs'),

http = require('http2');

var server = http.createServer(options, (request, response)=>{let push = response.push('/push.css`,

{'content-type': 'text/css'});

fs.createReadStream(`style.css`).pipe(push);// илиpush.end(fs.readFileSync(`style.css`));

}

server.listen(…);

29

HTTP/1.1 Secure

30

Без Server push

31

Server push в действии

32

ОТЛАДКАИнструментыотладкиHTTP/2

33

Инструменты отладки HTTP/2

• nghttp• curl• openssl• h2c• h2i

34

Инструменты отладки OpenSSLopenssl s_client -connectsapsan.tutu.ru:443-nextprotoneg ''

CONNECTED(00000003)Protocols advertised by server: h2, http/1.1[...]

35

Инструменты отладки CURLcurl -vso /dev/null--http2https://sapsan.tutu.ru

[...]* Using HTTP2, server supports multi-use* Connection state changed (HTTP/2 confirmed)* TCP_NODELAY set* Copying HTTP/2 data in stream …[...]

36

Инструменты отладки h2c

• h2cstart--dump• h2cconnectsapsan.tutu.ru• h2get/• h2diconnect

37

Вывод информации в h2c

38

nghttp2

nghttp -nv https://sapsan.tutu.ru

39

HTTP/2Нуженли?

новыймодныйтролололJ

40

Трудности перехода на HTTP/2

§ ВысокийпорогвходапосравнениюсHTTP/1.x§ Необходимостьсертификатов§ Затратынашифрование§ ТекущиеоптимизациистановятсяBadpractice§ Невсебраузерыподдерживают§ НевсёсерверноеПОреализоваловесьстандартцеликом§ ServerPush– пуля,котораяможетубитьвашсервис

41

Нужен ли HTTP/2 ?

НуженHTTPSБизнесответит:

42

Зачем переходить на HTTPS

§ Новыебраузерные фичи (ServiceWorkers)§ SEO§ Аналитика§ Повышениеконверсии§ Что-тоеще,чтоязабылилисамещенезнаю...

43

Зачем переходить на HTTPS

§ Новыебраузерные фичи (ServiceWorkers)§ SEO§ Аналитика§ Повышениеконверсии§ Что-тоеще,чтоязабылилисамещенезнаю...

АHTTP/2 нужен?

44

HTTP/2 нужен

§ Снижаетоверхед отиспользованияшифрования§ Нижезагрузка ЦПУ ирасходпамяти§ Можноиспользовать конвейернуюобработку запросовиответов§ Снижаетвероятностьперегрузкисети(меньше TCP соединений)§ Уменьшает лаги дляпоследующихзапросов(ненужнозановоустанавливатьTCPсоединение).

§ Отпадаетнеобходимостьв доменномшардировании§ Ускорениезагрузкистраниц

45

Спасибо!Вопросы?

46

Ссылки по теме и на слайдыhttps://goo.gl/uqdQeC

47

Александр Майоров

§ twitter, github: @frontdevops§ alexander@majorov.su

Developer advocate & technical evangelist inTutu.ru

48

Секретные слайды

49

50

HTTP/1.1

VS

HTTP/2