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