CSS Sprites - способ ускорить загрузку страницы

На веб-сайтах вы часто видите, сколько страниц было сгенерировано. Обычно значения колеблются около десятков или сотен секунд. Однако самой странице требуется гораздо больше времени для отображения в браузере. Причина довольно проста.

вход

На веб-сайтах вы часто видите, сколько страниц было сгенерировано. Обычно значения колеблются около десятков или сотен секунд. Однако самой странице требуется гораздо больше времени для отображения в браузере. Причина довольно проста. Счетчик генерации показывает только, сколько времени понадобилось серверу, чтобы завершить страницу и вернуть ее в браузер человеку, посещающему адрес. Браузер получает содержимое страницы и затем загружает все элементы, размещенные на нем (обычно в том порядке, в котором они появляются в коде). На время загрузки отдельных элементов влияет интернет-соединение, скорость ответа от DNS-сервера, подключение к целевому серверу (при отключенной поддержке связи этот этап повторяется для каждого изображения / файла js / и т. Д.) И длина очереди. Чем больше элементов для загрузки (первая запись в кеше браузера пуста), тем больше времени требуется для завершения всей страницы, и, следовательно, посетитель должен дождаться отображения всего контента. Пациенты, которые менее терпеливы, могут сдаться после дюжины секунд ожидания, что в случае, когда стороны зарабатывают на себе, переводится в прибыль владельца. Стоит потратить немного времени, чтобы получить страницу немного быстрее, а в некоторых случаях и намного лучше.

Теоретический пример

В реальном мире элементы, встроенные в страницу, загружаются каждый раз с разным временем. Однажды странице может потребоваться 10 секунд, в других случаях она может продолжаться до 30 секунд. Поэтому пример будет чисто теоретическим. Благодаря этому вам будет легче показать некоторую зависимость.

Представьте себе ситуацию, в которой:

- браузер должен загрузить 10 элементов

- элементы загружаются последовательно (т.е. после завершения первой загрузки браузер начинает загрузку второй и т. д.)

- каждый элемент имеет одинаковый вес и требует одну единицу времени

Легко сосчитать 10 последовательных элементов, для этого потребуется 10 единиц времени.

Вторая ситуация выглядит следующим образом:

- элементы были склеены два

- графическая программа сжала кусочки так, что им нужно 1,75 единицы времени

Мы получаем 8,75 единиц времени, что означает, что страница отображается на 12,5% быстрее, чем в первом случае. Ситуация лучше всего представлена ​​на графике.

приложение

Ели чаще всего используются там, где элементы взаимодействуют с курсором мыши и где макет должен работать при разных разрешениях экрана. Рекомендуется помещать цвет фона в данные фрагментов страницы ( background-color ), которые будут видны до загрузки графического элемента. В случае хаоса на картинке лучше всего выбрать доминирующий или промежуточный цвет.

Типичная «подсветка меню» выглядит следующим образом: курсор находится над элементом меню, запускается режим onmouseover, и изображение заменяется другим. После появления события onmouseout предыдущее изображение восстанавливается. Этот метод имеет два недостатка: он не будет работать с отключенным javascript и требует дополнительного предварительного загрузчика (при смене изображений вы увидите характерное «моргание». Существует также более продвинутая версия с использованием css: элемент меню получает свое изображение в качестве фона. Дополнительное определение из : hover изменяет целевое изображение Javascript больше не отображается в пунктах меню, но все еще мигает. Кроме того, количество элементов меню преобразуется в число изображений, загруженных с сервера. С помощью css-sprites вы можете получить эффект выделения и уменьшить количество графических элементов. он будет делать фон для пунктов меню, ширина этого изображения может быть такой же, как в графическом дизайне, высота будет вдвое больше (в 2 раза) высоты меню, к верхней половине вы добавите обычное меню, выделенное в нижнем меню. menu.jpg. Мы создаем CSS (пример JED Это иллюстрирует идею и не обязательно соответствует определенному меню):

#menu {background-image: url (address / menu.jpg); } # m1 {width: ... px; } # m1: hover {background-position: Xpx Ypx; }

Мы делаем это для каждого элемента меню.

С помощью background-position мы указываем, насколько фон должен быть смещен относительно элемента, в котором он должен отображаться. Следующий рисунок должен объяснить эту проблему:

Следующий рисунок должен объяснить эту проблему:

В качестве фона использовалось изображение размером 100 × 80, показывающее облако. Черный прямоугольник представляет элемент <div>. Этот элемент остается постоянным по отношению к фону. Он был смещен на нужное количество пикселей вверх и в сторону.

Люди, которые разрабатывают внешний вид веб-сайта, часто обращаются к различным причудливым (с точки зрения человека, который впоследствии должен подготовить html и css) решениям. Такими решениями являются полупрозрачные ящики, украшенные углы ящиков, ящики, различающиеся только по ширине и т. Д. Вместо того, чтобы разрезать все на куски и отделить их от каждого элемента страницы, вы можете выбрать те, которые не могут быть получены с помощью, например, рамки и сложить большие куски, который позже будет использован для сборки отдельных фрагментов шаблона.

Заключительные замечания

Техника css-sprites позволяет ускорить страницу, если она умело используется. Склеивание больших фрагментов может привести к тому, что сама загрузка займет много времени. Перед загрузкой такого изображения посетитель увидит цвет фона (если он не был установлен в CSS, это будет цвет по умолчанию, установленный создателями браузера, или фон фона родительского элемента).

Вес изображения, состоящего из нескольких склеенных частей, может превышать вес отдельных фрагментов. Все зависит от формата рисунка, от того, как элементы установлены относительно друг друга, и от того, есть ли свободное место (оно появляется, когда размеры отдельных частей отличаются друг от друга).

Браузеры разные. В случае IE6 псевдокласс: hover ассоциируется только со ссылками. Однако вы можете использовать дополнительный javascript (адрес, указанный в ссылках), который устранит это неудобство. Однако вы должны помнить, что для других браузеров это дополнение не требуется. Чтобы применить его для IE6 и более старых версий, вы можете использовать запись:

<span> <! - [if lte IE 6]> здесь script / style </ span> <span> <! [endif] ->


Эта запись интерпретируется только браузером Microsoft.

При использовании css-спрайтов чаще всего используются следующие теги:

  • background-image - определяет изображение, которое будет использоваться в качестве фона
  • background-color - определяет цвет фона
  • background-position - определяет положение изображения, используемого в качестве фона
  • background-repeat - определяет, следует ли повторять фон
  • background - содержит все вышеперечисленные маркеры
  • ширина + высота - указать размеры элемента

связи

http://www.xs4all.nl/~peterned/csshover.html http://www.alistapart.com/articles/sprites