Читать «Разгони свой сайт» онлайн - страница 2

Николай Мациевский

CSS Image map

Статичные картинки

Онлайн-генераторы

Полезные советы

4.4. Картинки в теле страницы с помощью data:URI

Поддержка браузерами

Схема data:URI

CSS и встроенные изображения

Проблемы data:URI

Работа в Internet Explorer

Преимущества и недостатки data:URI

Дополнительные соображения по оптимизации

Кроссбраузерное использование data:URI

О, этот странный Microsoft!

Объединяем несовместимое

Панацея или ящик Пандоры?

Валидность

Некоторые итоги

Включение музыки (base64)

4.5. CSS Sprites и data:URI

Проблемы при верстке

Проблемы при загрузке

Проблемы при использовании

Шаг за шагом

Выносим CSS-файлы в пост-загрузку

Теоретическое решение

На практике

А доступность?

Делаем решение кроссбраузерным

Выигрыш

4.6. Методы экстремальной оптимизации

Объединение JavaScript и CSS в одном файле

Рассмотрим на примере

Объединение HTML, CSS и JavaScript в одном файле

Глава 5. Параллельные соединения

5.1. Обходим ограничения браузера на число соединений

Издержки на доставку объектов

Ограничения спецификации HTTP/1.1

Времена меняются

«Режем» соединения

Реальный выигрыш

Подводим итоги

5.2. Content Delivery Network и Domain Name System

Подключаем CDN

Yahoo! и Google

Количество DNS-запросов

5.3. Балансировка на стороне клиента

Round-Robin DNS

Балансировка на сервере

Балансировка на стороне клиента

Осуществляем кросс-доменные запросы

А если все же AJAX?

Преимущества балансировки на стороне клиента

Используем Cloud Computing для балансировки на стороне клиента

Пример приложения

Логика для скрипта, запускающегося по расписанию

5.4. Редиректы, 404-ошибки и повторяющиеся файлы

Редиректы

404-ошибки

5.5. Асинхронные HTTP-запросы

Моделируем параллельные запросы

Предварительные выводы

Влияние заголовков

5.6. Уплотняем поток загрузки

Реальная ситуация

Шаг первый: простая страница

Шаг второй: уменьшаем изображения

Шаг третий: все-в-одном

Шаг четвертый: нарезаем поток

Шаг пятой: алгоритмическое кэширование

Итоговая таблица

Шаг шестой: балансируем стадии загрузки

Шаг седьмой: балансируем кэширование

Заключение

Глава 6. CSS оптимизация

6.1. Оптимизируем CSS expressions

CSS-выражения

Динамические выражения

Вычисление постоянных

Использование

Реализация

Все так просто? Нет, еще проще

6.2. Что лучше, id или class?

Методика. Размер файлов

Время открытия страницы

Результаты

Выводы

6.3. Влияние семантики и DOM-дерева

Графики влияния DOM-дерева

Выводы по DOM-дереву

Семантическое DOM-дерево

Что быстрее?

Методика для DOCTYPE

Результаты оптимизации

«Экономия на спичках»?

6.4. Ни в коем случае не reflow!

offsetHeight и style.display

Немного теории

Использование Computed Style

Оптимизация: определение класса hide

Заключение

В качестве послесловия: стили или классы?

Перерисовка страницы

Групповое изменение стилей

Два слова о таблицах

Глава 7. Оптимизация JavaScript

7.1. Кроссбраузерный window.onload

Firefox впереди планеты всей

А Internet Explorer?

Условные комментарии

Все так просто?

Двойное выполнение

Избавляемся от внешнего файла

Полное решение

Неблокирующая загрузка JavaScript

Число загрузок с одного хоста

Неблокирующие скрипты

Зависимости

А если по-другому?

В будущем

7.2. Основы «ненавязчивого» JavaScript