Как CSS-спрайты ускоряют работу веб-сайта?
Я пытаюсь понять, как CSS-спрайты улучшают производительность на сайте?
Почему загрузка нескольких небольших изображений медленнее, чем загрузка одного изображения, содержащего меньшие изображения, если общий размер одного изображения является суммой меньших изображений?
5 ответов
важно понять, почему накладные расходы HTTP-запроса оказывают такое влияние.
в простейшей форме HTTP-запрос состоит из Открытия сокета, отправки запроса на открытый сокет и чтения ответа.
чтобы открыть сокет, стек TCP/IP клиента отправляет пакет TCP SYN на сервер. Сервер отвечает SYN-ACK, и клиент отвечает на это ACK.
Итак, перед отправкой одного байта данных приложения, вам придется ждать целых полтора тура туда и обратно до сервера, по крайней мере.
затем клиент должен отправить запрос, дождаться, пока сервер проанализирует запрос, найдет запрошенные данные, отправит его обратно - это еще одна поездка туда и обратно плюс некоторые накладные расходы на стороне сервера (надеюсь, небольшие накладные расходы, хотя я видел некоторые медленные серверы) плюс время для передачи фактических данных, и это лучший случай, предполагая, что нет перегрузки сети, которая приведет к удалению пакетов и ретранслированной.
каждый шанс у вас есть, чтобы избежать этого, вы должны.
современные браузеры будут выдавать несколько запросов параллельно в попытке сократить некоторые накладные расходы. HTTP-запросы теоретически могут выполняться в одном и том же сокете, что делает вещи немного лучше. Но в целом сетевые поездки туда и обратно плохи для производительности, и их следует избегать.
меньше обращений к серверу. Вместо 6 (скажем) запросов на 6 разных изображений вы получаете один запрос и 6 применений одного и того же изображения. Если сервер собирается ответить" он не изменился с момента последнего запроса " большую часть времени, это может быть значительным сокращением объема сетевого трафика.
потому что для нескольких изображений требуется несколько http-запросов. См. правило производительности Yahoo #1: минимизировать HTTP-запросы.
в дополнение к минимизации количества запросов, в зависимости от изображений, вы также можете обнаружить, что размер файла меньше, чем если бы они были разделены (из-за, Я думаю, уменьшенного количества метаданных, среди прочего). Еще одним дополнительным преимуществом использования спрайтов является отсутствие эффекта мерцания при первом наведении на элемент с состоянием наведения, что может улучшить восприятие пользователем производительности страницы. Интересный ресурс по изображению оптимизация, которую вы можете прочитать, это серия сообщений в блоге на пользователей Yahoo в блоге интерфейс. Перечитывая рекомендации Yahoo по производительности, я был удивлен, увидев, что они также предложил это расположение изображений по горизонтали, а не по вертикали также может уменьшить размер файла.
помимо причин выше, я считаю, что с ними легче работать. У вас есть только один файл, который нужно изменить и загрузить, и один URL-адрес для изменения кода, если вы обновите изображение.