![Page 1: «Сетевые протоколы для веб разработчика — выжимаем максимум»](https://reader033.vdocuments.site/reader033/viewer/2022051016/557f52c2d8b42a822f8b48a0/html5/thumbnails/1.jpg)
Сетевые протоколы для веб-разработчика - выжимаем максимум
Александр Сербул
руководитель направленияконтроля качества интеграции и внедрений 1С-Битрикс
![Page 2: «Сетевые протоколы для веб разработчика — выжимаем максимум»](https://reader033.vdocuments.site/reader033/viewer/2022051016/557f52c2d8b42a822f8b48a0/html5/thumbnails/2.jpg)
Автомат Калашникова
• Понятный
• Надежный
• Стреляет пулями
• Всегда с тобой
![Page 3: «Сетевые протоколы для веб разработчика — выжимаем максимум»](https://reader033.vdocuments.site/reader033/viewer/2022051016/557f52c2d8b42a822f8b48a0/html5/thumbnails/3.jpg)
Цена абстракции
![Page 4: «Сетевые протоколы для веб разработчика — выжимаем максимум»](https://reader033.vdocuments.site/reader033/viewer/2022051016/557f52c2d8b42a822f8b48a0/html5/thumbnails/4.jpg)
Цена абстракции
![Page 5: «Сетевые протоколы для веб разработчика — выжимаем максимум»](https://reader033.vdocuments.site/reader033/viewer/2022051016/557f52c2d8b42a822f8b48a0/html5/thumbnails/5.jpg)
Генеалогия...
![Page 6: «Сетевые протоколы для веб разработчика — выжимаем максимум»](https://reader033.vdocuments.site/reader033/viewer/2022051016/557f52c2d8b42a822f8b48a0/html5/thumbnails/6.jpg)
Реинкарнации богов...
Ken Thompson (sitting) and
Dennis Ritchie at PDP-11
![Page 7: «Сетевые протоколы для веб разработчика — выжимаем максимум»](https://reader033.vdocuments.site/reader033/viewer/2022051016/557f52c2d8b42a822f8b48a0/html5/thumbnails/7.jpg)
СтандартыRFC (Request for Comments) - «рабочее
предложение», «тема для обсуждения»
Internet Society (ISOC) — общество Интернета
Internet Engineering Task Force (IETF) —
Инженерный совет Интернета
World Wide Web Consortium (W3C) —
Консорциум Всемирной Паутины
![Page 8: «Сетевые протоколы для веб разработчика — выжимаем максимум»](https://reader033.vdocuments.site/reader033/viewer/2022051016/557f52c2d8b42a822f8b48a0/html5/thumbnails/8.jpg)
TCP/IP, SCTP ...
![Page 9: «Сетевые протоколы для веб разработчика — выжимаем максимум»](https://reader033.vdocuments.site/reader033/viewer/2022051016/557f52c2d8b42a822f8b48a0/html5/thumbnails/9.jpg)
Структура пакетов, tcpdump
![Page 10: «Сетевые протоколы для веб разработчика — выжимаем максимум»](https://reader033.vdocuments.site/reader033/viewer/2022051016/557f52c2d8b42a822f8b48a0/html5/thumbnails/10.jpg)
Системные API
![Page 11: «Сетевые протоколы для веб разработчика — выжимаем максимум»](https://reader033.vdocuments.site/reader033/viewer/2022051016/557f52c2d8b42a822f8b48a0/html5/thumbnails/11.jpg)
«Занимательные» стеки
![Page 12: «Сетевые протоколы для веб разработчика — выжимаем максимум»](https://reader033.vdocuments.site/reader033/viewer/2022051016/557f52c2d8b42a822f8b48a0/html5/thumbnails/12.jpg)
Полезные книжечки, боевые проекты
![Page 13: «Сетевые протоколы для веб разработчика — выжимаем максимум»](https://reader033.vdocuments.site/reader033/viewer/2022051016/557f52c2d8b42a822f8b48a0/html5/thumbnails/13.jpg)
![Page 14: «Сетевые протоколы для веб разработчика — выжимаем максимум»](https://reader033.vdocuments.site/reader033/viewer/2022051016/557f52c2d8b42a822f8b48a0/html5/thumbnails/14.jpg)
![Page 15: «Сетевые протоколы для веб разработчика — выжимаем максимум»](https://reader033.vdocuments.site/reader033/viewer/2022051016/557f52c2d8b42a822f8b48a0/html5/thumbnails/15.jpg)
Должно быть просто и удобно! :-)
![Page 16: «Сетевые протоколы для веб разработчика — выжимаем максимум»](https://reader033.vdocuments.site/reader033/viewer/2022051016/557f52c2d8b42a822f8b48a0/html5/thumbnails/16.jpg)
Скорость света =
• ~300 000 км/сек в вакууме
• IP пакетам нужно время
Справа – Альберт Энштейн в детстве
![Page 17: «Сетевые протоколы для веб разработчика — выжимаем максимум»](https://reader033.vdocuments.site/reader033/viewer/2022051016/557f52c2d8b42a822f8b48a0/html5/thumbnails/17.jpg)
Средняя скорость соединения
• Akamai, 2013 Q4
![Page 18: «Сетевые протоколы для веб разработчика — выжимаем максимум»](https://reader033.vdocuments.site/reader033/viewer/2022051016/557f52c2d8b42a822f8b48a0/html5/thumbnails/18.jpg)
Последняя миля … портит всё
• Сосед играет в WOT
• Масштабные скачивания
• Wi-Fi
• 3-4G
Нередко +сотни миллисекунд.
Мониторинг: js->php->pinba->графики, тесты
![Page 19: «Сетевые протоколы для веб разработчика — выжимаем максимум»](https://reader033.vdocuments.site/reader033/viewer/2022051016/557f52c2d8b42a822f8b48a0/html5/thumbnails/19.jpg)
3. W3C Navigation Timing API
![Page 20: «Сетевые протоколы для веб разработчика — выжимаем максимум»](https://reader033.vdocuments.site/reader033/viewer/2022051016/557f52c2d8b42a822f8b48a0/html5/thumbnails/20.jpg)
TCP
• Соединение – 1 RTT
• Новые ядра
• Congestion window size (cwnd):
Linux 2.6.39+
ip route change … initcwnd 10 (4->10)
sysctl -w net.ipv4.tcp_slow_start_after_idle=0
![Page 21: «Сетевые протоколы для веб разработчика — выжимаем максимум»](https://reader033.vdocuments.site/reader033/viewer/2022051016/557f52c2d8b42a822f8b48a0/html5/thumbnails/21.jpg)
TCP – «раскачка»
![Page 22: «Сетевые протоколы для веб разработчика — выжимаем максимум»](https://reader033.vdocuments.site/reader033/viewer/2022051016/557f52c2d8b42a822f8b48a0/html5/thumbnails/22.jpg)
TCP – bandwidth-delay product, HOL
• «Простаиваемые мощности»
![Page 23: «Сетевые протоколы для веб разработчика — выжимаем максимум»](https://reader033.vdocuments.site/reader033/viewer/2022051016/557f52c2d8b42a822f8b48a0/html5/thumbnails/23.jpg)
TCP – head of line blocking (HOL)
• Паровозик, ждем первый вагон
![Page 24: «Сетевые протоколы для веб разработчика — выжимаем максимум»](https://reader033.vdocuments.site/reader033/viewer/2022051016/557f52c2d8b42a822f8b48a0/html5/thumbnails/24.jpg)
А тут на тебе: QUIC
• Quick UDP Internet Connections, Google
• Multiplexing/UDP
• Нет 3-way TCP handshake
Страшно ☺
Firewalls, NATS…
![Page 25: «Сетевые протоколы для веб разработчика — выжимаем максимум»](https://reader033.vdocuments.site/reader033/viewer/2022051016/557f52c2d8b42a822f8b48a0/html5/thumbnails/25.jpg)
Может лучше SCTP?
• Stream Control Transmission Protocol
• Multihoming, message oriented,
multiplexing
• Уже задействован в WebRTC
DataChannel->SCTP/DTLS/UDP
• Текущая инфраструктура…
![Page 26: «Сетевые протоколы для веб разработчика — выжимаем максимум»](https://reader033.vdocuments.site/reader033/viewer/2022051016/557f52c2d8b42a822f8b48a0/html5/thumbnails/26.jpg)
HTTP
• 1.1 – постоянные tcp
соединения!
• Сжатие трафика – nginx/
apache
• Проблемы TCP
• Пулы соединений браузеров
![Page 27: «Сетевые протоколы для веб разработчика — выжимаем максимум»](https://reader033.vdocuments.site/reader033/viewer/2022051016/557f52c2d8b42a822f8b48a0/html5/thumbnails/27.jpg)
HTTP 2.0, SPDY
• Оптимизация передачи
заголовков
• Мультиплексирование
• Server Push
• TLS всех спасет ☺
![Page 28: «Сетевые протоколы для веб разработчика — выжимаем максимум»](https://reader033.vdocuments.site/reader033/viewer/2022051016/557f52c2d8b42a822f8b48a0/html5/thumbnails/28.jpg)
TLS
• Transport Layer Security
• Очень «умные» прокси
• Туннель для SPDY/HTTP 2.0
• Туннель для WebSockets
• Ах да, безопасность
![Page 29: «Сетевые протоколы для веб разработчика — выжимаем максимум»](https://reader033.vdocuments.site/reader033/viewer/2022051016/557f52c2d8b42a822f8b48a0/html5/thumbnails/29.jpg)
TLS - оптимизация
• nginx – TLS-сессии по-
умолчанию отключены
• Цепочки сертификатов,
валидация
• Динамический прокси,
ранняя терминация
• WireShark, tcpdump
![Page 30: «Сетевые протоколы для веб разработчика — выжимаем максимум»](https://reader033.vdocuments.site/reader033/viewer/2022051016/557f52c2d8b42a822f8b48a0/html5/thumbnails/30.jpg)
Чеклист
• Помним о скорости света и latency
• Помним о высокой стоимости tcp, tls соединений
• HTTP 1.1 keepalive
• Стоим ближе к клиенту
• CDN
• «Обратный» CDN – POST, PUT, HTTP 1.1 keepalive …
• Религия = опиум для народа. Все проверяем:
WireShark, tcpdump
![Page 31: «Сетевые протоколы для веб разработчика — выжимаем максимум»](https://reader033.vdocuments.site/reader033/viewer/2022051016/557f52c2d8b42a822f8b48a0/html5/thumbnails/31.jpg)
Программирование - ошибки
• HTTP 1.0 – открытие соединения каждый раз
• Последовательный перебор соединений в
цикле
• select/pool – почти || работа с сетью
• Изучайте протоколы, в конце концов!
• Аудит кода
![Page 32: «Сетевые протоколы для веб разработчика — выжимаем максимум»](https://reader033.vdocuments.site/reader033/viewer/2022051016/557f52c2d8b42a822f8b48a0/html5/thumbnails/32.jpg)
На закуску• XHR
• Long Polling
• SSE
• Web Sockets
• Web RTC
• Беспроводные сети
![Page 33: «Сетевые протоколы для веб разработчика — выжимаем максимум»](https://reader033.vdocuments.site/reader033/viewer/2022051016/557f52c2d8b42a822f8b48a0/html5/thumbnails/33.jpg)
Сначала думаем, потом кодим…
![Page 34: «Сетевые протоколы для веб разработчика — выжимаем максимум»](https://reader033.vdocuments.site/reader033/viewer/2022051016/557f52c2d8b42a822f8b48a0/html5/thumbnails/34.jpg)
XHR, aka AJAX• XML HTTP Request, “Asynchronous Javascript and XML”
• А при чем тут XML? ;-)
• Высокоуровневое API
• CORS (Cross-Origin Resource Sharing)
• + сжатие, авторизация, кэширование
• - streaming
• - multiplexing
• - в одну сторону
• Long-Polling – просто, надежно, … дорого
![Page 35: «Сетевые протоколы для веб разработчика — выжимаем максимум»](https://reader033.vdocuments.site/reader033/viewer/2022051016/557f52c2d8b42a822f8b48a0/html5/thumbnails/35.jpg)
SSE
• Server-Sent Events
• Простой протокол
• UTF-8, Base64 (+33% size)
• +streaming
• +compression
• -в одну сторону
• -Internet Explorer
• -firewals, прокси…
![Page 36: «Сетевые протоколы для веб разработчика — выжимаем максимум»](https://reader033.vdocuments.site/reader033/viewer/2022051016/557f52c2d8b42a822f8b48a0/html5/thumbnails/36.jpg)
WebSockets
• duplex, сервер может сам инициировать запрос
• message oriented
• text UTF-8, binary
• - держит 1 TCP соединение
• - нет сжатия, делать самим
• - HOL (head of line blocking)
• - multiplexing
• - не понимают прокси (TLS поможет)
![Page 37: «Сетевые протоколы для веб разработчика — выжимаем максимум»](https://reader033.vdocuments.site/reader033/viewer/2022051016/557f52c2d8b42a822f8b48a0/html5/thumbnails/37.jpg)
Сравним
![Page 38: «Сетевые протоколы для веб разработчика — выжимаем максимум»](https://reader033.vdocuments.site/reader033/viewer/2022051016/557f52c2d8b42a822f8b48a0/html5/thumbnails/38.jpg)
Должно быть просто и удобно! :-)
![Page 39: «Сетевые протоколы для веб разработчика — выжимаем максимум»](https://reader033.vdocuments.site/reader033/viewer/2022051016/557f52c2d8b42a822f8b48a0/html5/thumbnails/39.jpg)
WebRTC
• Real-time Communication Between Browsers
• WebRTC – это «ад», но он отлично работает!
![Page 40: «Сетевые протоколы для веб разработчика — выжимаем максимум»](https://reader033.vdocuments.site/reader033/viewer/2022051016/557f52c2d8b42a822f8b48a0/html5/thumbnails/40.jpg)
WebRTC - возможности
• Audio/Video связь между браузерами
• Групповые конференции (небольшие)
• Передача данных - Data Channel
• Multiplexing
• Новейшие кодеки, отличное качество
• Безопасность
![Page 41: «Сетевые протоколы для веб разработчика — выжимаем максимум»](https://reader033.vdocuments.site/reader033/viewer/2022051016/557f52c2d8b42a822f8b48a0/html5/thumbnails/41.jpg)
WebRTC - особенности
• Инфраструктура:
- STUN сервер
- TURN сервер
• Proxy, firewalls – UDP
• Relays ~10%
• ~ 1-2 Mbps на канал (HD)
• Тестирование соединения
• UDP/DTLS/SCTP
![Page 42: «Сетевые протоколы для веб разработчика — выжимаем максимум»](https://reader033.vdocuments.site/reader033/viewer/2022051016/557f52c2d8b42a822f8b48a0/html5/thumbnails/42.jpg)
Беспроводные сети – технологии
![Page 43: «Сетевые протоколы для веб разработчика — выжимаем максимум»](https://reader033.vdocuments.site/reader033/viewer/2022051016/557f52c2d8b42a822f8b48a0/html5/thumbnails/43.jpg)
Беспроводные сети – скорости
![Page 44: «Сетевые протоколы для веб разработчика — выжимаем максимум»](https://reader033.vdocuments.site/reader033/viewer/2022051016/557f52c2d8b42a822f8b48a0/html5/thumbnails/44.jpg)
Беспроводные сети - особенности
• Аккумулятор разряжается!
• RRC (Radio Resource Controller)
WiFi: 30-200 mW
3G/4G: 15 mW, 1000 – 3500 mW!
• «Ходим» в сеть – по крайней необходимости
![Page 45: «Сетевые протоколы для веб разработчика — выжимаем максимум»](https://reader033.vdocuments.site/reader033/viewer/2022051016/557f52c2d8b42a822f8b48a0/html5/thumbnails/45.jpg)
Чеклист
• Знайте особенности сетевых протоколов
• Постоянно учитесь и тренируйте мозги себе
• … и разработчикам
• Исследуйте потоки данных, полюбите
точность и математику
• Измеряйте (tcpdump, WireShark)
• Питайтесь правильно ☺