Что надо знать о http/2
TRANSCRIPT
HTTP/2Что нужно знать фронтендеру
Moscow JS Conf
1
Александр Майоров
§ twitter, github: @frontdevops§ [email protected]
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§ [email protected]
Developer advocate & technical evangelist inTutu.ru
48
Секретные слайды
49
50
HTTP/1.1
VS
HTTP/2