Марина Широчкина: Верстка. Вид снизу
DESCRIPTION
TRANSCRIPT
![Page 1: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/1.jpg)
![Page 2: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/2.jpg)
Верстка. Вид снизу.
![Page 3: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/3.jpg)
Для начала
![Page 4: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/4.jpg)
4
Качество сети
• Delay (+ jitter)
![Page 5: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/5.jpg)
5
Качество сети
• Delay (+ jitter)
• Bandwidth
![Page 6: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/6.jpg)
6
Качество сети
• Delay (+ jitter)
• Bandwidth
• Packet loss
![Page 7: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/7.jpg)
7
Они сильно влияют на скорость
![Page 8: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/8.jpg)
8
Например
«Драматическая история одной маленькой промостраницы», Олег Мохов
![Page 9: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/9.jpg)
Загрузка одного файла
![Page 10: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/10.jpg)
10
Скриншот из wireshark-а
![Page 11: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/11.jpg)
11
1. DNS lookup
![Page 12: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/12.jpg)
12
Время DNS lookup
• есть в кеше клиента (0 мс)
![Page 13: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/13.jpg)
13
Время DNS lookup
• есть в кеше клиента • есть в кеше DNS-сервера провайдера
(единицы мс)
![Page 14: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/14.jpg)
14
Время DNS lookup
• есть в кеше клиента • есть в кеше DNS-сервера провайдера • DNS-сервер знает про зону (+RTT от провайдера до NS)
![Page 15: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/15.jpg)
15
Время DNS lookup
• есть в кеше клиента • есть в кеше DNS-сервера провайдера • DNS-сервер знает про зону • DNS-сервер вообще ничего не знает (+RTT до root server, +RTT до NS)
![Page 16: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/16.jpg)
16
![Page 17: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/17.jpg)
17
2. Установка соединения
![Page 18: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/18.jpg)
18
Установка соединения
![Page 19: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/19.jpg)
19
Установка соединения
= минимум 1 RTT до фронтенда Примеры: • RTT из питерского офиса Яндекса до e1.ru ≈ 60мс
• RTT из Екатеринбурга до московских серверов Яндекса ≈ 30мс
![Page 20: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/20.jpg)
20
3. Отправка запроса и начало получения данных
![Page 21: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/21.jpg)
21
Отправка запроса и начало получения данных
= 1 RTT до фронтенда + время обработки на сервере
![Page 22: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/22.jpg)
22
4. Передача данных
![Page 23: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/23.jpg)
23
Возьмем пример
Сырой HTML (до сжатия) www.e1.ru: 109699 байт. (+ ≈ 200 байт заголовков).
![Page 24: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/24.jpg)
24
MSS
MSS – maximum segment size (максимальный размер сегмента). Определяется при установке соединения
![Page 25: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/25.jpg)
25
MSS
![Page 26: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/26.jpg)
26
Почему 1460?
MTU (maximum transmission unit) – максимальный размер блока данных одного пакета, который может быть передан без фрагментации. Ограничен снизу допустимой длиной кадра.
![Page 27: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/27.jpg)
27
Возьмем пример
Сырой HTML (до сжатия) www.e1.ru: 109699 байт (+ ≈ 200 байт заголовков). Это 76 пакетов по 1460 байт.
![Page 28: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/28.jpg)
28
Драматический момент
Если бы мы отправляли по пакету за раз, это заняло бы 76 RTT или 4560 мс
![Page 29: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/29.jpg)
29
TCP Receive Window
Количество данных, которые машина готова принять за раз.
![Page 30: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/30.jpg)
30
Congestion Window
Определяет количество байт, которые могут быть посланы за раз.
![Page 31: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/31.jpg)
31
Вернемся к примеру
Размер окна: 15744 байт В него влезет 10 целых сегментов.
![Page 32: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/32.jpg)
32
Вернемся к примеру
≈ 110Кб HTML ≈ 76 пакетов ≈ 8 RTT ≈ 480 мс (если размер окна не будет меняться)
![Page 33: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/33.jpg)
33
Потеря пакетов
• пакет придется перепослать • размер congestion окна будет уменьшен
P.S. 15 - 20 % потерь – практически неработающий интернет
![Page 34: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/34.jpg)
34
Итого загрузка файла:
dns lookup + соединение + запрос + ответ = = 0 мс + 1 RTT + 8 RTT = = 0 + 60 + 480 = 540 мс
![Page 35: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/35.jpg)
Теперь про оптимизации
![Page 36: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/36.jpg)
36
1. gzip
Для нашего примера: ≈ 110Кб -> ≈ 20.5Кб или ≈ 76 сегментов -> ≈ 15 сегментов или ≈ 8 RTT -> 2 RTT или ≈ 480 мс -> 120 мс
![Page 37: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/37.jpg)
37
2. Минификация и обфускация
style_new.css:
• сырой (до gzip): 17703 байт • минифицированный: 9350 байт • после gzip: 1830 байт • минифицированный + gzip: 1713 байт
![Page 38: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/38.jpg)
38
100 байт разницы
![Page 39: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/39.jpg)
39
100 байт разницы – много или мало?
• лишние байты каждый раз • могут добавить +1 сегмент и +1 RTT
![Page 40: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/40.jpg)
40
3. Сжатие картинок
Пример (самый простой): http://www.e1.ru/news/images/398/325/398325/70x46_1.jpg • jpeg: 51Кб, при размере 70x46 • jpeg без профиля, EXIF и т д: 4,4 Кб
![Page 41: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/41.jpg)
41
3. Сжатие картинок
51 Кб ≈ 35 сегментов ≈ 4 RTT ≈ 240 мс 4,4 Кб ≈ 3 сегмента ≈ 1 RTT ≈ 60 мс
![Page 42: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/42.jpg)
42
4. Cookies для статики
• 205 байт (лишних) для каждого запроса • 50-60 запросов за статикой
![Page 43: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/43.jpg)
43
5. География и CDN-ы
Чем ближе к пользователю – тем меньше RTT, а значит, тем быстрее будет грузиться контент.
![Page 44: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/44.jpg)
44
5. География и CDN-ы
CDN - Content Delivery Network или Content Distribution Network (собственные или коммерческие)
![Page 45: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/45.jpg)
Загрузка нескольких файлов
![Page 46: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/46.jpg)
46
1. Одновременные загрузки
http://www.browserscope.org/?category=network
![Page 47: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/47.jpg)
47
Одновременные загрузки
www.e1.ru: 85 запросов Из них к одному хосту: 66 запросов
![Page 48: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/48.jpg)
48
![Page 49: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/49.jpg)
49
Раздавать статику с нескольких доменов
![Page 50: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/50.jpg)
50
2. Склейка файлов
• объединять стили и скрипты
![Page 51: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/51.jpg)
51
2. Склейка файлов
• объединять стили и скрипты
• склеивать картинки в спрайты
![Page 52: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/52.jpg)
52
3. Keep Alive
![Page 53: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/53.jpg)
53
Keep Alive
В указанном примере: 13 запросов за одно соединение. Экономим на 12 соединениях, т. е. на 12 RTT
![Page 54: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/54.jpg)
54
4. Инлайн
• увеличивает вес основной страницы • уменьшает количество запросов
![Page 55: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/55.jpg)
55
5. Кеширование статики
Профит от кеширования очевиден.
![Page 56: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/56.jpg)
Некоторое резюме
![Page 57: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/57.jpg)
57
Сеть - это очень дорого
![Page 58: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/58.jpg)
58
Сеть - это очень дорого
![Page 59: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/59.jpg)
59
Сеть - это очень дорого
Понимание того, что происходит в сети, очень важно
![Page 60: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/60.jpg)
60
Рекомендуется к прочтению
http://chimera.labs.oreilly.com/books/1230000000545 Ilya Grigorik, “High Performance Browser Networking”
![Page 61: Марина Широчкина: Верстка. Вид снизу](https://reader033.vdocuments.mx/reader033/viewer/2022042623/54988ba5b47959e96b8b45ec/html5/thumbnails/61.jpg)