Разгони свой сайт

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

Методы клиентской оптимизации веб-страниц

Введение

Об этой книге и проекте webo.in
Web Optimizator
Благодарности

Глава 1. Что такое клиентская оптимизация?

1.1. Цели и задачи оптимизации
Основные задачи оптимизации
Краткий обзор технологий
1.2. Психологические аспекты производительности
Терпимое время ожидания
Эффекты медленной скорости загрузки
Как время ответа сайта влияет на пользовательскую психологию
1.3. Стадии загрузки страницы
Расставляем приоритеты
Узкие места
1.4. Клиентская и серверная оптимизация: сходство и различия
Кэширование во главу угла
Меньше запросов — легче серверу
Архивировать и кэшировать на сервере
Кто у кого на службе?
1.5. Применение в разработке приложений
Этап 1: Доставка информации и оформления
Этап 2: Кэширование файлов оформления и параллельные запросы
Этап 3: Жизнь после загрузки страницы
Этап 4: Предупреждаем действия пользователя

Глава 2. Уменьшение размера

2.1. Насколько ресурсоемко архивирование HTML
Издержки на использование mod_gzip
Формализация модели
Набор тестов
Результаты тестирования
Пара слов о файловой системе
Что быстрее: gzip или канал?
Исследование степени gzip-сжатия и загрузки процессора
Окончательные выводы
Конфигурируем Apache 1.3
Конфигурируем Apache 2
2.2. CSS и JavaScript в виде архивов
Статическое архивирование в действии
Проблемы для Safari
Конфигурируем Apache
Маленькие «но»
Два слова о nginx
2.3. Все о сжатии CSS
Инструменты
Графические результаты
Выводы
Практический пример
2.4. JavaScript: жать или не жать?
Инструменты и методика
Графические результаты
Промежуточные выводы
Есть ли жизнь после сжатия?
Скорость загрузки JavaScript-библиотек
Методы упаковки JavaScript
Вариант
Среднее время
Уменьшенный
519.7214
Упакованный
591.6636
Нормальный
645.4818
Производительность загрузки JavaScript-библиотек
Инструментарий
Среднее время
jquery-1.2.1
732.1935
dojo-1.0.1
911.3255
prototype-1.6.0
923.7074
yahoo-utilities-2.4.0
927.4604
protoculous-1.0.2
1136.5497
Инструментарий
Среднее время
yahoo-utilities-2.4.0
122.7867
Jquery-1.2.1
131.1841
prototype-1.6.0
142.7332
dojo-1.0.1
171.2600
protoculous-1.0.2
276.1929
2.5. PNG против GIF
Алгоритмы сжатия
Возможности PNG
Поддержка PNG в браузерах
PNG и проблема соответствия для фоновых CSS-изображений
Анимированные PNG: MNG против "PNG+"
Двигаемся к маленьким PNG
Полезные советы
2.6. Разгоняем favicon.ico — это как?
Краткое описание формата
Боевое крещение
Оптимальные размеры
Палитра
Размер (в байтах)
2 бита
198
4 бита
318
8 бит
1406
24 бита
894
32 бита
1150
PNG — быть или не быть?
А если еще и сжать?
data:URI нас спасет?
Заключение
2.7. Режем cookie
Оптимизируем размер, зону и время действия
Хостинг для компонентов без cookie

Глава 3. Кэширование

3.1. Expires, Cache-Control и сброс кэша
Настройка заголовка HTTP Expires
Спецификация кэширования
Практическое запрещение кэширования
Разрешение кэширования
Форсированный сброс кэша
3.2. Кэширование в IE: pre-check, post-check
Спецификация
Рассматриваем подробнее
Пример использования
3.3. Last-Modified и ETag
Last-Modified
ETag
Синхронизация ETag и Last-Modified
3.4. Кэширование в iPhone
Попадание в кэш
Сжатые компоненты
После перезагрузки
Заключение

Глава 4. Уменьшение числа запросов

4.1. Объединение HTML- и CSS-файлов
CSS-файлы в начале страницы
Объединение CSS-файлов
Практическое решение
Два слова об условных комментариях
4.2. Объединение JavaScript-файлов
Конструктивные предложения
В теории
На практике
К чему мы пришли?
Немного из теории HTTP-запросов
Суровая реальность
Возможное решение
Реализация на PHP
PHP Speedy
4.3. Техника CSS Sprites
Простой rollover-эффект
Сложный rollover-эффект
Проблемные места в IE
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?
Методика. Размер файлов
Время открытия страницы
Результаты
Firefox 2
Opera 9.5
Safari 3
IE 7
IE 6
IE 5.5
p.class
.class
p#id
#id
div>p.class
div>.class
div>p#id
div>#id
div p.class
div .class
div p#id
div #id
div.div p.class
div.div .class
div.div p#id
div.div #id
Выводы
6.3. Влияние семантики и DOM-дерева
Графики влияния DOM-дерева
Выводы по DOM-дереву
Семантическое DOM-дерево
Что быстрее?
Методика для DOCTYPE
Результаты оптимизации
Size (b)
Gzip (b)
IE6
IE7
IE8b
Firefox 2
Firefox 3
Opera 9.5
Safari 3.1
1
26275
8845
56
80
76
130
127
142
33
2
27173
8993
60
75
320
127
118
148
27
3
26260
8949
61
75
320
131
116
141
23
4
26153
8862
55
73
306
94
102
178
28
«Экономия на спичках»?
6.4. Ни в коем случае не reflow!
offsetHeight и style.display
IE sp62
IE8b
Firefox 2.0.0.12
Opera 9.22
Safari 3.04b
clean
128
153
15
15
16
offsetHeight
23500
10624
4453
4453
5140
style.display
171
209
56
56
34
height vs. style
140 раз
50 раз
80 раз
80 раз
150 раз
Немного теории
Использование Computed Style
IE sp62
Firefox 2.0.0.12
Opera 9.22
Safari 3.04b
offsetHeight
23500
4453
4453
5140
style.display
171
56
56
34
getStyle
5219
5318
Оптимизация: определение класса hide
IE sp62
Firefox 2.0.0.12
Opera 9.22
Safari 3.04b
offsetHeight
23500
10624
4453
5140
isHidden
231
351
70
71
isHidden2
370
792
212
118
offsetHeight vs. isHidden
102 раза
30 раз
73 раза
92 раза
Заключение
В качестве послесловия: стили или классы?
Метод
IE 6
IE 7
Firefox 1.5
Firefox 2.0
Opera 9
element.className
512
187
291
203
47
element.style.color
1709
422
725
547
282
Перерисовка страницы
Групповое изменение стилей
Два слова о таблицах

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

7.1. Кроссбраузерный window.onload
Firefox впереди планеты всей
А Internet Explorer?
Условные комментарии
Все так просто?
Двойное выполнение
Избавляемся от внешнего файла
Полное решение
Неблокирующая загрузка JavaScript
Число загрузок с одного хоста
Неблокирующие скрипты
Зависимости
А если по-другому?
Метод
Недостатки
В будущем
7.2. Основы «ненавязчивого» JavaScript
Javascript: храним отдельно
Javascript — это расширение
Доверять, но проверять
Доступ к элементам
Полезные советы
Добавляем обработчики событий
Ускоряем обработку событий
Немного усложним
Боремся с Internet Explorer
Пойдем дальше
Обработка событий в браузерах
Работаем с событиями
Давайте рассмотрим, что мы можем извлечь из события после перехвата его с помощью соответствующего обработчика:
7.3. Применение «ненавязчивого» JavaScript
В предыдущих разделах были представлены некоторые теоретические аспекты построения клиентской логики, ориентированной на максимальное быстродействие и адекватную ему замену в проблемных случаях. Ниже приведены практические решения по облегчению наиболее характерных сторон клиентского взаимодействия любого сайта: это счетчики посещений и размещение рекламы. Ведь они встречаются сейчас практически на любом веб-проекте.
Принципы «ненавязчивой» рекламы
document.write против innerHTML
Контекстная реклама
TopLine, Pop-Up, Pop-Under и RichMedia
Внутренние рекламные сети
Идеальная архитектура рекламной сети
Разгоняем счетчики: от мифов к реальности
Разбираем по косточкам
А если сложнее?
Делаем статистику динамической
7.4. Замыкания и утечки памяти
Шаблоны утечек
Циклические ссылки
Более сложный случай
Замыкания
Постраничные утечки
Псевдо-утечки
Проектируем утечки
7.5. Оптимизируем «тяжелые» JavaScript-вычисления
Оптимизируем вычисления
Улучшаем шаблон
Советы и замечания
Заключение
7.6. Быстрый DOM
DOM DocumentFragment: быстрее быстрого
Нормальное добавление
Добавление при помощи DocumentFragment
Браузер
Нормальный
Fragment
Firefox 3.0.1
90
47
Safari 3.1.2
156
44
Opera 9.51
208
95
IE 6
401
140
IE 7
230
61
IE 8b1
120
40
А если еще быстрее?
innerHTML нам поможет
7.7. Кэширование в JavaScript
Итерации и локальное кэширование
Кэширование ресурсоемких вызовов
Кэшируем цепочки вызовов
7.8. Быстрые итераторы, регулярные выражения и другие вкусности
Итераторы
Браузер
Обычный
С кэшем
for-in
Обратный
do-while
Обратный while
Firefox 3.0.3
714
657
835
280
297
217
Safari 3.1.2
141
140
157
125
125
93
Opera 9.61
188
125
765
94
94
78
IE 6
1281
1219
1094
468
500
360
IE 7
1391
1297
1250
515
532
406
IE 8b2
954
906
922
406
422
328
Chrome 0.2
288
246
332
117
114
95
Регулярные выражения
Браузер
search
match
«На лету»
Локальный
exec
test
Firefox 3.0.3
2120
2041
1295
1273
1225
1348
Safari 3.1.2
453
469
344
359
360
359
Opera 9.61
2141
2063
406
344
312
313
IE 6
2594
2516
1875
1859
1953
1906
IE 7
2562
2469
1859
1844
2000
1860
IE 8b2
2140
2032
1453
1453
1547
1469
Chrome 0.2
856
870
416
397
385
392

Глава 8. Приложение

8.1. Обзор аналитических инструментов
Измеряем эффективную ширину канала пользователей
Apache Benchmark и JMeter
Кэширование на сервере
Web Developer Toolbar для Firefox
Firebug NET Panel для Firefox
Yslow для Firebug для Firefox
Web Inspector для Safari
HttpWatch
Fiddler
Live HTTP Headers
Прокси-эмулятор каналов Sloppy
Analyze.WebSiteOptimization.com
Octagate.com/service/SiteTimer/
Tools.Pingdom.com
AlertSite.com
Site-Perf.com
GetRPO.com
Webo.in
Профилирование JavaScript
8.2. Несколько советов для браузеров
Ускоряем загрузку страниц в Firefox 3
Как это работает?
Ускоряем загрузку страниц в Opera 9
Interner Explorer
8.3. Оптимизированные конфигурации
Конфигурация Apache 1.3
Конфигурация Apache 2
Конфигурация nginx 0.7+
Настройка IIS
8.4. Разбор полетов
vkontakte.ru
odnoklassniki.ru
yandex.ru
rambler.ru
mail.ru
rbc.ru
lenta.ru
kommersant.ru
marketgid.ru
habrahabr.ru

Заключение

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

Альтернативная медицина
Астрономия и Космос
Биология
Биофизика
Ботаника
Ветеринария
Военная история
Геология и география
Государство и право
Деловая литература
Домашние животные
Домоводство
Здоровье
Зоология
История
Компьютеры и Интернет
Кулинария
Культурология
Литературоведение
Математика
Медицина
Металлургия
Научная литература - прочее
Обществознание
Педагогика
Политика
Психология
Радиоэлектроника
Религиоведение
Сад и огород
Самосовершенствование
Сделай сам
Спорт
Строительство и сопромат
Технические науки
Транспорт и авиация
Учебники
Физика
Физическая химия
Философия
Химия
Хиромантия
Хобби и ремесла
Шпаргалки
Эзотерика
Экология
Юриспруденция
Языкознание

Главная | Контакты | Нашёл ошибку | Прислать материал | Добавить в избранное

Все материалы представлены для ознакомления и принадлежат их авторам.