будет ли проблема с производительностью, если я использую фоновые изображения

Question

Я узнал, что если мы не будем указывать ширину и высоту.в теге image будет указана производительность.У меня есть элемент div, для которого я устанавливаю ширину и высоту в процентах.Также у того же div есть фоновое изображение фиксированного размера, скажем 140px * 140px.Здесь будет ли выпуск исполнений?.

Пример разметки:

<div style="width:50%;background:url('imgofsize140*140') no-repeat">&nbsp;</div>

Спасибо

Answer 1

Это не универсальный случай - Поэтому мы должны рассмотреть его для каждого случая .

Необходимо учитывать множество переменных: скорость интернет-соединения пользователя, размер изображения, возможности компьютера и т. Д.

Я нашел несколько вопросов по SO, которые имеют некоторое отношение к этому вопросу. Я включу их, так как считаю это полезным. Я НЕ , утверждающий, что он абсолютно прав.

---

BGIMG против IMG

Производительность Аргумент

AFAIK, браузеры кэшируют изображения одинаково, находятся ли они в DIV или IMG. В любом случае, я думаю, что это один из тех случаев, когда конкретные производительность определяется как деталь реализации, внутренняя для каждого движок рендеринга (и, возможно, браузеры, построенные вокруг них). Как таким образом, это вне нашего контроля как дизайнеров / разработчиков и субъектов переключаться с браузера на браузер и версию на версию. В других словами, я бы не стал тратить на это много времени.

Контекст

Технические различия да, в первую очередь вы можете установить ширину / высоту тега IMG, и он растянет изображение, что может быть полезно в некоторые ситуации.

Главное, что вы должны иметь в виду, это контекст изображение в документе HTML. Если изображение является содержимым, скажем, изображение в галерее я бы использовал тэг IMG. Если это только часть интерфейса, я вместо этого может использовать div. - Пол

И ответ на это так же важен.

Тем не менее, вы подняли замечательный вопрос о семантической Разница: IMG обычно лучший выбор, когда изображение материальная часть содержимого страницы, в то время как метод CSS обычно предпочтительнее, когда изображение просто декоративное или для форматирования.

Это напрямую не связано с производительностью. Подробнее о семантике и доступности. By - Mr. W.

---

Тогда еще один для Performance OFF of SO, который, я чувствую, напрямую связан с вашим вопросом.

Тест загрузки страницы

Версия с фоновыми изображениями фактически дала мне «Документ Выполнить »через 0,025 секунды - при полной загрузке страницы. было примерно так же, как встроенная версия изображения. Могли бы использовать все фоновые изображения ускоряют запуск $ .document (готово)? Оказывается background-images загружаются только после элемента (содержащего div, span и т. д.) Это предотвращает блокирование со всех сторон поездки, необходимые для получения изображений.

результаты: тестовая страница встроенного изображения

результаты: тестовая страница фонового изображения

Answer 2

Я бы не думал, что возникнет проблема с производительностью так же, как и без указания высоты и ширины в теге img, поскольку это заставляет браузер перерисовывать всю страницу целиком, и в этом проблема производительности.

http://code.google.com/speed/page-speed/docs/rendering.html#SpecifyImageDimensions

Answer 3

tl; dr

Вы не получите штраф за производительность (который действительно очень мал в другом случае).

Некоторые дополнительные сведения:

Вы не должныне заботьтесь (если вы не работаете в Google) о "штрафе" за производительность, который вы получите, не указав ширину и высоту, а больше о мерцании макета, которое вы можете получить.

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

Для фонового изображения перекомпоновка не требуется.

Answer 4

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

Answer 5

Зависит от браузера. Сегодня я узнал, что Chrome перерисовывает холст, когда вы прокручиваете изображение с абсолютной позицией bg. Firefox прекрасно с этим справляется. Это должно быть исправлено в будущем выпуске Chrome.

Answer 6

Фоновое изображение будет отображаться как 140x140, если ширина div не имеет размер меньше, чем 140px.

Вы также можете проверить результат в старых браузерах, таких как InternetExplorer 6-7-8, просто чтобы убедиться, чтоесть другие проблемы с производительностью.

Answer 7

Я не думаю, что это повлияет на производительность.

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

Answer 8

Если ваше изображение уже имеет заданный размер, вам не нужно указывать в атрибутах высоту и ширину. Также не будет проблем с производительностью при использовании фонового изображения.