Что надо знать о http/2 frontend разработчику
TRANSCRIPT
![Page 1: Что надо знать о HTTP/2 Frontend разработчику](https://reader038.vdocuments.pub/reader038/viewer/2022102821/5876aad91a28abd6508b772f/html5/thumbnails/1.jpg)
1
HTTP/2Что нужно знать фронтендеру
Moscow JS Conf
![Page 2: Что надо знать о HTTP/2 Frontend разработчику](https://reader038.vdocuments.pub/reader038/viewer/2022102821/5876aad91a28abd6508b772f/html5/thumbnails/2.jpg)
2
Александр Майоров
twitter, github: @frontdevops [email protected]
Developer advocate & technical evangelist in Tutu.ru
![Page 3: Что надо знать о HTTP/2 Frontend разработчику](https://reader038.vdocuments.pub/reader038/viewer/2022102821/5876aad91a28abd6508b772f/html5/thumbnails/3.jpg)
3
267 сотрудников
600 тыс. посетителей в день
2003 г.год основания
Мы продаем туры, ж/д и авиабилеты, билеты на автобусы, бронируем отели, рассказываем о расписании.
11 млнпосетителей в месяц
Самый посещаемый сервис туристических услуг в России (по результатам исследования comScore).
![Page 4: Что надо знать о HTTP/2 Frontend разработчику](https://reader038.vdocuments.pub/reader038/viewer/2022102821/5876aad91a28abd6508b772f/html5/thumbnails/4.jpg)
4
HTTP/2
![Page 5: Что надо знать о HTTP/2 Frontend разработчику](https://reader038.vdocuments.pub/reader038/viewer/2022102821/5876aad91a28abd6508b772f/html5/thumbnails/5.jpg)
5
Факты про HTTP/2
Основан на базе Google SPDY
Стандартизован в мае 2015 (RFC 7540, 7541)
Может работать поверх TCP (h2c), но браузеры умеют только поверх TLS (h2 with ALPN)
Больше не будет минорных версий
![Page 6: Что надо знать о HTTP/2 Frontend разработчику](https://reader038.vdocuments.pub/reader038/viewer/2022102821/5876aad91a28abd6508b772f/html5/thumbnails/6.jpg)
6
TLS или SSL ?
TLS - transport layer security, основан на протоколе SSL (Secure Sockets Layer).
На данный момент последняя версия – TLS 1.2, выпущена в августе 2008 года.
Простым языком: TLS это другая версия SSL и он лучше :)
![Page 7: Что надо знать о HTTP/2 Frontend разработчику](https://reader038.vdocuments.pub/reader038/viewer/2022102821/5876aad91a28abd6508b772f/html5/thumbnails/7.jpg)
7
Ключевые особенности HTTP/2
Транспортная надстройка над HTTP/1.x Сжатие заголовков Бинарный формат Мультиплексирование Приоритезация
![Page 8: Что надо знать о HTTP/2 Frontend разработчику](https://reader038.vdocuments.pub/reader038/viewer/2022102821/5876aad91a28abd6508b772f/html5/thumbnails/8.jpg)
8
Надстройка над HTTP/1.x
![Page 9: Что надо знать о HTTP/2 Frontend разработчику](https://reader038.vdocuments.pub/reader038/viewer/2022102821/5876aad91a28abd6508b772f/html5/thumbnails/9.jpg)
9
Бинарный формат
HTTP/2
![Page 10: Что надо знать о HTTP/2 Frontend разработчику](https://reader038.vdocuments.pub/reader038/viewer/2022102821/5876aad91a28abd6508b772f/html5/thumbnails/10.jpg)
10
Мультиплексирование
![Page 11: Что надо знать о HTTP/2 Frontend разработчику](https://reader038.vdocuments.pub/reader038/viewer/2022102821/5876aad91a28abd6508b772f/html5/thumbnails/11.jpg)
11
Мультиплексирование
![Page 12: Что надо знать о HTTP/2 Frontend разработчику](https://reader038.vdocuments.pub/reader038/viewer/2022102821/5876aad91a28abd6508b772f/html5/thumbnails/12.jpg)
12
Приоритезация
![Page 13: Что надо знать о HTTP/2 Frontend разработчику](https://reader038.vdocuments.pub/reader038/viewer/2022102821/5876aad91a28abd6508b772f/html5/thumbnails/13.jpg)
13
SUPPORTЧто с поддержкой?
![Page 14: Что надо знать о HTTP/2 Frontend разработчику](https://reader038.vdocuments.pub/reader038/viewer/2022102821/5876aad91a28abd6508b772f/html5/thumbnails/14.jpg)
14
Поддержка браузерами
![Page 15: Что надо знать о HTTP/2 Frontend разработчику](https://reader038.vdocuments.pub/reader038/viewer/2022102821/5876aad91a28abd6508b772f/html5/thumbnails/15.jpg)
15
Поддержка на бекенде
Nginx (1.9.5+) Apache (2.4.17+) with
mod_http2 Nodejs with http2 module Nghttpx H2O
![Page 16: Что надо знать о HTTP/2 Frontend разработчику](https://reader038.vdocuments.pub/reader038/viewer/2022102821/5876aad91a28abd6508b772f/html5/thumbnails/16.jpg)
16
СЕРТИФИКАТЫ
HTTPS://
![Page 17: Что надо знать о HTTP/2 Frontend разработчику](https://reader038.vdocuments.pub/reader038/viewer/2022102821/5876aad91a28abd6508b772f/html5/thumbnails/17.jpg)
17
Где брать сертификаты ?
Купить... Получить бесплатно у
Let's encrypt StartSSL
Создать самому и подписать (self-signed)
![Page 18: Что надо знать о HTTP/2 Frontend разработчику](https://reader038.vdocuments.pub/reader038/viewer/2022102821/5876aad91a28abd6508b772f/html5/thumbnails/18.jpg)
18
Self-signed сертификаты
Работает, но Chrome запускать с флагом: chrome --ignore-certificate-errors
![Page 19: Что надо знать о HTTP/2 Frontend разработчику](https://reader038.vdocuments.pub/reader038/viewer/2022102821/5876aad91a28abd6508b772f/html5/thumbnails/19.jpg)
19
SERVER HINTSRESOURCE HINTSSERVER
![Page 20: Что надо знать о HTTP/2 Frontend разработчику](https://reader038.vdocuments.pub/reader038/viewer/2022102821/5876aad91a28abd6508b772f/html5/thumbnails/20.jpg)
20
Что это?
<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">
![Page 21: Что надо знать о HTTP/2 Frontend разработчику](https://reader038.vdocuments.pub/reader038/viewer/2022102821/5876aad91a28abd6508b772f/html5/thumbnails/21.jpg)
21
Resource hints
<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">
![Page 22: Что надо знать о HTTP/2 Frontend разработчику](https://reader038.vdocuments.pub/reader038/viewer/2022102821/5876aad91a28abd6508b772f/html5/thumbnails/22.jpg)
22
Server hints
GET HTTP/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;…
![Page 23: Что надо знать о HTTP/2 Frontend разработчику](https://reader038.vdocuments.pub/reader038/viewer/2022102821/5876aad91a28abd6508b772f/html5/thumbnails/23.jpg)
23
Preload
![Page 24: Что надо знать о HTTP/2 Frontend разработчику](https://reader038.vdocuments.pub/reader038/viewer/2022102821/5876aad91a28abd6508b772f/html5/thumbnails/24.jpg)
24
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">
![Page 25: Что надо знать о HTTP/2 Frontend разработчику](https://reader038.vdocuments.pub/reader038/viewer/2022102821/5876aad91a28abd6508b772f/html5/thumbnails/25.jpg)
25
Preload
GET HTTP/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;…
![Page 26: Что надо знать о HTTP/2 Frontend разработчику](https://reader038.vdocuments.pub/reader038/viewer/2022102821/5876aad91a28abd6508b772f/html5/thumbnails/26.jpg)
26
Server push use preload
GET HTTP/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
Работает в прокси Nghttpx
![Page 27: Что надо знать о HTTP/2 Frontend разработчику](https://reader038.vdocuments.pub/reader038/viewer/2022102821/5876aad91a28abd6508b772f/html5/thumbnails/27.jpg)
27
HTTP/2 Server push
![Page 28: Что надо знать о HTTP/2 Frontend разработчику](https://reader038.vdocuments.pub/reader038/viewer/2022102821/5876aad91a28abd6508b772f/html5/thumbnails/28.jpg)
28
HTTP/2 vs HTTP/1
![Page 29: Что надо знать о HTTP/2 Frontend разработчику](https://reader038.vdocuments.pub/reader038/viewer/2022102821/5876aad91a28abd6508b772f/html5/thumbnails/29.jpg)
29
Server Push in Application
const 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(…);
![Page 30: Что надо знать о HTTP/2 Frontend разработчику](https://reader038.vdocuments.pub/reader038/viewer/2022102821/5876aad91a28abd6508b772f/html5/thumbnails/30.jpg)
30
HTTP/1.1 Secure
![Page 31: Что надо знать о HTTP/2 Frontend разработчику](https://reader038.vdocuments.pub/reader038/viewer/2022102821/5876aad91a28abd6508b772f/html5/thumbnails/31.jpg)
31
Без Server push
![Page 32: Что надо знать о HTTP/2 Frontend разработчику](https://reader038.vdocuments.pub/reader038/viewer/2022102821/5876aad91a28abd6508b772f/html5/thumbnails/32.jpg)
32
Server push в действии
![Page 33: Что надо знать о HTTP/2 Frontend разработчику](https://reader038.vdocuments.pub/reader038/viewer/2022102821/5876aad91a28abd6508b772f/html5/thumbnails/33.jpg)
33
ОТЛАДКАИнструменты отладки HTTP/2
![Page 34: Что надо знать о HTTP/2 Frontend разработчику](https://reader038.vdocuments.pub/reader038/viewer/2022102821/5876aad91a28abd6508b772f/html5/thumbnails/34.jpg)
34
Инструменты отладки HTTP/2
• nghttp• curl• openssl• h2c• h2i
![Page 35: Что надо знать о HTTP/2 Frontend разработчику](https://reader038.vdocuments.pub/reader038/viewer/2022102821/5876aad91a28abd6508b772f/html5/thumbnails/35.jpg)
35
Инструменты отладки OpenSSLopenssl s_client -connect sapsan.tutu.ru:443 -nextprotoneg ''
CONNECTED(00000003)Protocols advertised by server: h2, http/1.1[...]
![Page 36: Что надо знать о HTTP/2 Frontend разработчику](https://reader038.vdocuments.pub/reader038/viewer/2022102821/5876aad91a28abd6508b772f/html5/thumbnails/36.jpg)
36
Инструменты отладки CURL
curl -vso /dev/null --http2 https://sapsan.tutu.ru
[...]* Using HTTP2, server supports multi-use* Connection state changed (HTTP/2 confirmed)* TCP_NODELAY set* Copying HTTP/2 data in stream …[...]
![Page 37: Что надо знать о HTTP/2 Frontend разработчику](https://reader038.vdocuments.pub/reader038/viewer/2022102821/5876aad91a28abd6508b772f/html5/thumbnails/37.jpg)
37
Инструменты отладки h2c
• h2c start --dump• h2c connect sapsan.tutu.ru• h2 get /• h2 diconnect
![Page 38: Что надо знать о HTTP/2 Frontend разработчику](https://reader038.vdocuments.pub/reader038/viewer/2022102821/5876aad91a28abd6508b772f/html5/thumbnails/38.jpg)
38
Вывод информации в h2c
![Page 39: Что надо знать о HTTP/2 Frontend разработчику](https://reader038.vdocuments.pub/reader038/viewer/2022102821/5876aad91a28abd6508b772f/html5/thumbnails/39.jpg)
39
nghttp2
nghttp -nv https://sapsan.tutu.ru
![Page 40: Что надо знать о HTTP/2 Frontend разработчику](https://reader038.vdocuments.pub/reader038/viewer/2022102821/5876aad91a28abd6508b772f/html5/thumbnails/40.jpg)
40
HTTP/2Нужен ли?
новый модный трололол
![Page 41: Что надо знать о HTTP/2 Frontend разработчику](https://reader038.vdocuments.pub/reader038/viewer/2022102821/5876aad91a28abd6508b772f/html5/thumbnails/41.jpg)
41
Трудности перехода на HTTP/2
Высокий порог входа по сравнению с HTTP/1.x Необходимость сертификатов Затраты на шифрование Текущие оптимизации становятся Bad practice Не все браузеры поддерживают Не всё серверное ПО реализовало весь стандарт целиком Server Push – пуля, которая может убить ваш сервис
![Page 42: Что надо знать о HTTP/2 Frontend разработчику](https://reader038.vdocuments.pub/reader038/viewer/2022102821/5876aad91a28abd6508b772f/html5/thumbnails/42.jpg)
42
Нужен ли HTTP/2 ?
Нужен HTTPSБизнес ответит:
![Page 43: Что надо знать о HTTP/2 Frontend разработчику](https://reader038.vdocuments.pub/reader038/viewer/2022102821/5876aad91a28abd6508b772f/html5/thumbnails/43.jpg)
43
Зачем переходить на HTTPS
Новые браузерные фичи (Service Workers) SEO Аналитика Повышение конверсии Что-то еще, что я забыл или сам еще не знаю...
![Page 44: Что надо знать о HTTP/2 Frontend разработчику](https://reader038.vdocuments.pub/reader038/viewer/2022102821/5876aad91a28abd6508b772f/html5/thumbnails/44.jpg)
44
Зачем переходить на HTTPS
Новые браузерные фичи (Service Workers) SEO Аналитика Повышение конверсии Что-то еще, что я забыл или сам еще не знаю...
А HTTP/2 нужен?
![Page 45: Что надо знать о HTTP/2 Frontend разработчику](https://reader038.vdocuments.pub/reader038/viewer/2022102821/5876aad91a28abd6508b772f/html5/thumbnails/45.jpg)
45
HTTP/2 нужен
Снижает оверхед от использования шифрования Ниже загрузка ЦПУ и расход памяти Можно использовать конвейерную обработку запросов и ответов Снижает вероятность перегрузки сети (меньше TCP соединений) Уменьшает лаги для последующих запросов (не нужно заново
устанавливать TCP соединение). Отпадает необходимость в доменном шардировании Ускорение загрузки страниц
![Page 46: Что надо знать о HTTP/2 Frontend разработчику](https://reader038.vdocuments.pub/reader038/viewer/2022102821/5876aad91a28abd6508b772f/html5/thumbnails/46.jpg)
46
Спасибо!Вопросы?
![Page 48: Что надо знать о HTTP/2 Frontend разработчику](https://reader038.vdocuments.pub/reader038/viewer/2022102821/5876aad91a28abd6508b772f/html5/thumbnails/48.jpg)
48
Александр Майоров
twitter, github: @frontdevops [email protected]
Developer advocate & technical evangelist in Tutu.ru
![Page 49: Что надо знать о HTTP/2 Frontend разработчику](https://reader038.vdocuments.pub/reader038/viewer/2022102821/5876aad91a28abd6508b772f/html5/thumbnails/49.jpg)
49
Секретные слайды
![Page 50: Что надо знать о HTTP/2 Frontend разработчику](https://reader038.vdocuments.pub/reader038/viewer/2022102821/5876aad91a28abd6508b772f/html5/thumbnails/50.jpg)
50
HTTP/1.1
VS
HTTP/2