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

Так, изобра-

жение с фиксированной высотой, повторяющееся на странице по горизонта-

ли (например, градиентная заливка фона), может находиться в группе анало-

гичных изображений, выше или ниже их, но никак не слева и не справа.

Если изображение всегда фиксированного размера и не повторяется

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

вого файла.

Если же изображение, к примеру, использовано в списках, в роли

маркера, находящегося в фоне элементов списка, необходимо обеспечить

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

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

ся другая часть спрайта.

Анимированные изображения лучше объединять отдельно, в зависи-

мости от их размера и палитры.

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

ко автоматизация процесса создания спрайтов позволяет устранить этот

минус; подробнее об этом написано в четвертой главе. Плюсом же явля-

ется уменьшение как числа запросов к серверу, так и непосредственно

размера страницы в ряде случаев более чем на 40%.

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

да несколько расположенных рядом изображений объединяются в одно и

при помощи тега

взаимодействия области.

———————— Page 35————————

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

1.4.3. COU?‡E‚‡IEA ‚IA?IE? O·?AIUO‚ ‚ IO‰ ‚A·-OU?‡IE??

Встраивание объектов CSS и JS

В ряде случаев фрагменты CSS- и JS-кода, а также изображения мож-

но подставлять напрямую в HTML-документ.

Плюсы такой подстановки очевидны: количество запросов внешних

объектов при загрузке страницы уменьшается до минимального количест-

ва. Минусом при использовании такого подхода на всех страницах сайта

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

объекты, вновь и вновь будет загружать их при просмотре страниц сайта.

Из этого очевидно, что подстановку внешних объектов в HTML-доку-

мент следует производить в следующих случаях:

? когда требуется исключительная клиентская производительность

страницы, например, на главной странице сайта или других стра-

ницах с наивысшей посещаемостью;

? когда суммарная скорость загрузки всех внешних объектов мень-

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

прос каждого из этих объектов по отдельности, т.е. в ситуациях,

когда не возникнет уменьшения скорости загрузки страницы из-за

невозможности кэширования внешних объектов;

? когда требуется полная автономность веб-приложения.

Встраивать код CSS следует внутрь тега