Как CSS-спрайты ускоряют работу сайта? - PullRequest
12 голосов
/ 25 марта 2009

Я пытаюсь понять, как CSS-спрайты улучшают производительность сайта?

Почему загрузка нескольких небольших изображений медленнее, чем загрузка одного изображения, содержащего меньшие изображения, если общий размер одного изображения является суммой меньших изображений?

Ответы [ 5 ]

20 голосов
/ 25 марта 2009

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

В простейшей форме HTTP-запрос состоит из открытия сокета, отправки запроса на открытый сокет и чтения ответа.

Чтобы открыть сокет, стек TCP / IP клиента отправляет пакет TCP SYN на сервер. Сервер отвечает с помощью SYN-ACK, а клиент отвечает на это с помощью ACK.

Итак, прежде чем отправлять один байт данных приложения, вам нужно подождать как минимум полных полных раунда на сервер.

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

Каждый шанс, что вы должны избежать этого, вы должны.

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

15 голосов
/ 25 марта 2009

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

14 голосов
/ 25 марта 2009

Поскольку для нескольких изображений требуется несколько http-запросов. См. Правило производительности Yahoo № 1: Минимизируйте HTTP-запросы .

3 голосов
/ 25 марта 2009

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

1 голос
/ 26 марта 2009

Помимо приведенных выше причин, мне легче с ними работать. У вас есть только один файл, который нужно изменить и загрузить, и один URL-адрес, который нужно изменить в коде, если вы обновите изображение.

...