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

Содержание Ограничение браузеров CDN и DNS Балансировка на стороне клиента Редиректы, 404-ошибки и повторы Асинхронные HTTP-запросы Уплотнение потока загрузки 2 / 27 webo.in

Ограничение браузеров на число соединений webo.in 3 / 27

Издержки на доставку данных Только 2 соединения к серверу –Только для IE7- (70% пользователей) Если объектов больше 20, то 50-80% уходит на сетевые задержки Keep-alive уменьшает издержки Нужно добавлять хосты для выдачи объектов 4 / 27 webo.in

Дополнительные хосты 5 / 27 webo.in Отдавать с нескольких серверов Нужно несколько IP-адресов Позволяет разграничить нагрузку Отдавать с нескольких хостов Можно использовать тот же сервер Нельзя подключить отдельно «легкие» HTTP-сервера

Наращиваем число хостов 6 / 27 webo.in Только при числе объектов > 10 –Издержки на DNS lookup и установление нового соединения достаточно велики Число хостов ~= число объектов / 20 –Но не более 4 хостов Выигрыш будет заметен для небольших файлов

CDN и DNS webo.in 7 / 27

Content Delivery Network 8 / 27 webo.in Географически распределенная система серверов Малое время отклика на запрос Быстрое обслуживание статических файлов Защищенное соединение Стоит достаточно дорого Требует изменения серверной логики

Domain Name System 9 / 27 webo.in DNS хранит IP-адреса имен сайтов DNS lookup занимает мс Большое число хостов замедляет загрузку За счет дополнительных DNS lookup За счет установления нового соединения

Балансировка на стороне клиента webo.in 10 / 27

Циклический DNS Равномерно распределяет пользователей между 2 серверами Балансирует нагрузку при помощи аппаратных средств Не гарантирует ответа в случае отказа одного сервера 11 / 27 webo.in

Балансировка на клиенте 12 / 27 webo.in

Схема использования 13 / 27 webo.in Сеть серверов (CDN) Конфигурационный файл на каждом сервере с параметрами сети Клиентское (JavaScript / Flash) приложение для выбора сервера «Прозрачный» выбор и смена сервера

Запросы между доменами 14 / 27 webo.in XSS для Flash crossdomain.xml XSS для AJAX document.domain XSS для cookie P3P-заголовок

Редиректы, повторы и 404-ошибки webo.in 15 / 27

404-ошибки 404: File Not Found Отнимают соединения к серверу Ответ обычно больше ожидаемого –Не картинка в 1Кб, а 404-страница в 10Кб 17 / 27 webo.in

Редиректы (перенаправления) Каждый редирект занимает одно соединение с сервером Если это другой домен, то будет DNS lookup и соединение с другим серверов Браузеры плохо кэшируют редиректы –Такая же задержка будет и при следующем посещении 16 / 27 webo.in

Повторяющиеся файлы Повторяющиеся картинки –Некоторые браузеры запросят многократно –При отсутствии также кэширования будут запрошены –Распорки – прошлый век! –Выносим в стилевые правила Повторяющиеся скрипты –Будут запрошены и выполнены каждый раз 18 / 27 webo.in

Асинхронные HTTP-запросы webo.in 19 / 27

HTTP-конвейер Не то же самое, что keep-alive Позволяет запрашивать файлы, не дожидаясь ответа Поддерживается малым числом браузеров –Opera 9, Firefox 3, Safari 3 20 / 27 webo.in

Параллельные запросы Размер заголовков очень сильно влияет –Замедляет исходящий запрос Объекты не должен быть меньше 2,5 Кб –Иначе пользователи с ассиметричным соединением будут ждать дольше Потери пакетов усугубляют ситуацию 21 / 27 webo.in

Уплотнение потока загрузки webo.in 22 / 27

Предпосылки Страница грузится ступенчато –Все объекты в определенном порядке Много «пустого» места –На диаграмме загрузки Можно «уплотнить поток» 23 / 27 webo.in

Предварительные действия Gzip и минимизация –Сжимают процесс загрузки по горизонтали Уменьшение изображений –Сжимают процесс загрузки по горизонтали Объединение файлов –Сдвигают стадии загрузки на время установления новых соединений 24 / 27 webo.in

Оптимальное число потоков Зависит от браузера –4-6 для IE и для остальных Должно быть «естественным» –Динамическая загрузка дорого обходится Может быть один-единственный поток –Для экстремальной оптимизации 25 / 27 webo.in

Алгоритмическое кэширование Размер внешних объектов –Равен числу постоянных пользователей Для «одноразовых» страниц –Минимальное число объектов Для постоянных пользователей –Число кэшируемых объектов не более 10 Балансируем стадии загрузки 26 / 27 webo.in

В следующей лекции CSS-оптимизация Оптимизируем CSS expressions id или class Семантика и DOM-дерево Reflow в документе 27 / 27 webo.in