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