Разгони свой сайт Лекция 5: Параллельные загрузки webo.in Мациевский Николай

Разгони свой сайт
Лекция 5: Параллельные загрузки
Мациевский Николай
webo.in
1 / 27
Содержание
•
•
•
•
•
•
Ограничение браузеров
CDN и DNS
Балансировка на стороне клиента
Редиректы, 404-ошибки и повторы
Асинхронные HTTP-запросы
Уплотнение потока загрузки
webo.in
2 / 27
Ограничение браузеров на
число соединений
webo.in
3 / 27
Издержки на доставку данных
• Только 2 соединения к серверу
– Только для IE7- (70% пользователей)
• Если объектов больше 20, то 50-80%
уходит на сетевые задержки
• Keep-alive уменьшает издержки
• Нужно добавлять хосты для выдачи
объектов
webo.in
4 / 27
Дополнительные хосты
• Отдавать с нескольких серверов
• Нужно несколько IP-адресов
• Позволяет разграничить нагрузку
• Отдавать с нескольких хостов
• Можно использовать тот же сервер
• Нельзя подключить отдельно
«легкие» HTTP-сервера
webo.in
5 / 27
Наращиваем число хостов
• Только при числе объектов > 10
– Издержки на DNS lookup и установление
нового соединения достаточно велики
• Число хостов ~= число объектов / 20
– Но не более 4 хостов
• Выигрыш будет заметен для небольших
файлов
webo.in
6 / 27
CDN и DNS
webo.in
7 / 27
Content Delivery Network
• Географически распределенная
система серверов
• Малое время отклика на запрос
• Быстрое обслуживание статических
файлов
• Защищенное соединение
• Стоит достаточно дорого
• Требует изменения серверной логики
webo.in
8 / 27
Domain Name System
• DNS хранит IP-адреса имен сайтов
• DNS lookup занимает 20-200 мс
• Большое число хостов замедляет
загрузку
• За счет дополнительных DNS lookup
• За счет установления нового
соединения
webo.in
9 / 27
Балансировка на стороне
клиента
webo.in
10 / 27
Циклический DNS
• Равномерно распределяет
пользователей между 2 серверами
• Балансирует нагрузку при помощи
аппаратных средств
• Не гарантирует ответа в случае отказа
одного сервера
webo.in
11 / 27
Балансировка на клиенте
webo.in
12 / 27
Схема использования
• Сеть серверов (CDN)
• Конфигурационный файл на каждом
сервере с параметрами сети
• Клиентское (JavaScript / Flash)
приложение для выбора сервера
• «Прозрачный» выбор и смена сервера
webo.in
13 / 27
Запросы между доменами
• XSS для Flash
• crossdomain.xml
• XSS для AJAX
• document.domain
• XSS для cookie
• P3P-заголовок
webo.in
14 / 27
Редиректы, повторы и
404-ошибки
webo.in
15 / 27
404-ошибки
• 404: File Not Found
• Отнимают соединения к серверу
• Ответ обычно больше ожидаемого
– Не картинка в 1Кб, а 404-страница в 10Кб
webo.in
17 / 27
Редиректы (перенаправления)
• Каждый редирект занимает одно
соединение с сервером
• Если это другой домен, то будет DNS
lookup и соединение с другим серверов
• Браузеры плохо кэшируют редиректы
– Такая же задержка будет и при следующем
посещении
webo.in
16 / 27
Повторяющиеся файлы
• Повторяющиеся картинки
– Некоторые браузеры запросят многократно
– При отсутствии также кэширования будут
запрошены
– Распорки – прошлый век!
– Выносим в стилевые правила
• Повторяющиеся скрипты
– Будут запрошены и выполнены каждый раз
webo.in
18 / 27
Асинхронные HTTP-запросы
webo.in
19 / 27
HTTP-конвейер
• Не то же самое, что keep-alive
• Позволяет запрашивать файлы, не
дожидаясь ответа
• Поддерживается малым числом
браузеров
– Opera 9, Firefox 3, Safari 3
webo.in
20 / 27
Параллельные запросы
• Размер заголовков очень сильно влияет
– Замедляет исходящий запрос
• Объекты не должен быть меньше 2,5 Кб
– Иначе пользователи с ассиметричным
соединением будут ждать дольше
• Потери пакетов усугубляют ситуацию
webo.in
21 / 27
Уплотнение потока загрузки
webo.in
22 / 27
Предпосылки
• Страница грузится ступенчато
– Все объекты в определенном порядке
• Много «пустого» места
– На диаграмме загрузки
• Можно «уплотнить поток»
webo.in
23 / 27
Предварительные действия
• Gzip и минимизация
– Сжимают процесс загрузки по горизонтали
• Уменьшение изображений
– Сжимают процесс загрузки по горизонтали
• Объединение файлов
– Сдвигают стадии загрузки на время
установления новых соединений
webo.in
24 / 27
Оптимальное число потоков
• Зависит от браузера
– 4-6 для IE и 10-20 для остальных
• Должно быть «естественным»
– Динамическая загрузка дорого обходится
• Может быть один-единственный поток
– Для экстремальной оптимизации
webo.in
25 / 27
Алгоритмическое кэширование
• Размер внешних объектов
– Равен числу постоянных пользователей
• Для «одноразовых» страниц
– Минимальное число объектов
• Для постоянных пользователей
– Число кэшируемых объектов не более 10
• Балансируем стадии загрузки
webo.in
26 / 27
В следующей лекции
CSS-оптимизация
•
•
•
•
Оптимизируем CSS expressions
id или class
Семантика и DOM-дерево
Reflow в документе
webo.in
27 / 27