Разгони свой сайт Лекция 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