Реактивные веб-сайты

В таких ситуациях часто прибегают к использованию услов-

ных комментариев. Лучшим примером их применения является следую-

щая конструкция, когда любой браузер запросит лишь один файл, пред-

назначенный для него:

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

Как и в рассмотренной выше ситуации с файлами CSS, на странице

часто подключается несколько файлов JavaScript. Уменьшив их количе-

ство, можно значительно увеличить итоговую скорость загрузки стра-

ницы.

Весь код JS можно объединить в одном файле, загружаемом и кэши-

руемом единожды. Это лучшее решение в том случае, когда кода

JavaScript на сайте относительно немного (порядка 50-100 килобайт в

сжатом виде).

В ситуации, когда сайт представляет собой сложное веб-приложение

и объем кода превышает 100-150 килобайт в сжатом виде, у объединения

———————— Page 32————————

1

Обзор методов клиентской оптимизации 3

всего кода в одном файле имеется отрицательная сторона: при запросе

первой страницы пользователь неизбежно будет загружать часть кода, ко-

торую мог бы не загружать вовсе. Кроме того, в крупных веб-приложени-

ях бывает не просто уследить за зависимостями модулей, — часто нуж-

ный код повторяется и, разумеется, загружается пользователем несколь-

ко раз.

Допустим, на сайте существует определенная последовательность

страниц, посещаемых каждым новым пользователем, причем для каждой

отдельной страницы требуются разные модули JS. Для страницы P1 — мо-

дули F , F и F , для страницы P — модули F , F и F , а для страницы P —

1 2 3 2 1 3 4 3

модули F , F , F и F . Возможны три ситуации.

1 3 5 6

1. Объекты не объединены в один файл. При загрузке страницы P1

тратится время на загрузку объектов F , F и F , при загрузке P —

1 2 3 2

только объекта F4 (F1 и F3 кэшируются после первой загрузки), а

при загрузке P — F и F .

3 5 6

2. Все объекты объединены в один файл. При загрузке страницы P1

тратится время на загрузку объектов F -F , но при загрузке всех

1 6

остальных страниц внешние объекты не запрашиваются.

3. Объединены только модули, необходимые для текущей страни-

цы. Для страницы P загружаются объекты F , F и F , для P —

1 1 2 3 2

F , F и F , для P — F , F , F и R . В этом случае каждая отдель-

1 3 4 3 1 3 5 6

но взятая страница при пустом кэше будет загружаться быстрее,

однако все три страницы подряд будут загружены медленнее,

чем в двух описанных выше случаях, т. к. объекты F1 и F3 дваж-

ды повторно загрузятся вместе с другими объединенными объ-

ектами.

Выходом из положения может стать продуманное объединение моду-

лей и выделение их ядра, т. е. набора модулей, используемых на большин-

стве часто загружаемых пользователями страниц. В приведенном приме-

ре таким ядром будут объекты F и F .

1 3

В сложных ситуациях задача разбиения может быть легко формали-

зована и решена, однако на практике это почти никогда не требуется и для

нахождения лучшего варианта объединения достаточно рассмотреть опи-

санные выше варианты.

Более подробно о методах автоматического объединения текстовых

файлов рассказано в четвертой главе.

1.4.2. e·?A‰EIAIEA EAO·?‡EAIEE

Технология объединения изображений для уменьшения числа запро-

сов к серверу достаточно проста. Файл с несколькими объединенными в

———————— Page 33————————

32 РЕАКТИВНЫЕ ВЕБ-САЙТЫ

Рис. 1.11. Примеры объединения изображений в одном файле

определенном порядке изображениями (спрайт) загружается единожды,

после чего в разных частях страницы отображаются те или иные его обла-

сти. Возможно даже создание эффектов анимации при помощи объеди-

ненных изображений.

Хорошим примером может послужить метод использования единст-

венного изображения для анимированной двухпозиционной кнопки.

Верстка такой кнопки представляет собой обыкновенную ссылку с тек-

стом:

Текст кнопки

В стилях же, при помощи свойства background и псевдокласса :hover,

задано положение фона для различных состояний кнопки:

———————— Page 34————————

3

Обзор методов клиентской оптимизации 3

a.button {

background: url(/img/button.png) 0 0 no-repeat;

display: inline-block;

width: 100px;

height: 20px;

}

a.button:hover {

background-position: -100px 0;

}

Перед объединением изображений следует разбить их на следующие

группы:

? изображения, повторяющиеся по всем направлениям (repeat);

? изображения, повторяющиеся по горизонтали (repeat-x);

? изображения, повторяющиеся по вертикали (repeat-y);

? изображения, не повторяющиеся по вертикали и горизонтали (no-

repeat).

Эти группы нужны для того, чтобы исключить возможность появления ос-

тальных изображений из группы в области другого изображения.