Изображения в производительности браузеров для фона-повтора CSS

Кто-нибудь знает, что будет лучше для времени загрузки браузера между этими двумя параметрами:

background-image:url('1by1px.png');

или

background-image:url('10by10px.png');

A 1px на 1px полупрозрачный png, повторяющийся для div. Или более крупный говорит 10px на 10px.

Должна быть какая-то петля, которая должна быть сделана для отображения повторного изображения в браузере, и поэтому я задавался вопросом, вызывает ли изображение 1px by 1px много циклов, чтобы получить изображение, отображаемое на самом деле быть менее быстрым, чем изображение большего размера с меньшим количеством циклов?

Конечно, аргумент счетчика - размер изображения меньше для 1by1 по сравнению с 10by10, но не означает, что его лучше быть меньше, потому что цикл много раз может не масштабироваться так же хорошо, как чередование большого размера изображения немного реже.

Знает ли кто-нибудь больше о том, что будет лучше, и как браузеры обрабатывают такие ситуации?

Ответ 1

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

Изображение в файле сжато в формате PNG, но после загрузки браузером оно находится в формате растрового изображения RGBA (4 байта для пикселя). При повторении фона (скажем, на Intel x86) собственный код браузера будет использовать REP MOVSD, чтобы переместить растровые данные из ОЗУ в видеопамять (это стандартная последовательность, может отличаться на разных реализации графического драйвера или конкретного графического процессора).

Предположим, что размеры HTML DIV, который содержит фон, будут 100x100.

Для изображения только с одним пикселем: программа браузера должна выполнить команды 10 тысяч "REP MOVSD" .

Для изображения 10x10: при каждом повторном изображении программа браузера должна выполнить "REP MOVSD" только 10 раз (1 раз вызов "REP MOVSD" может отображать 1 пиксельную строку (пиксельную строку) изображения). Таким образом, в этом случае количество выполненных команд REPEUS будет только 10x100 раз (10 раз в 1 изображении, 100 повторных изображений). Это занимает полностью 1 тысяча 'REP MOVSD'.

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

Другие примечания: Вышеупомянутое объяснение не означает, что производительность в 10 раз лучше для изображения 10x10. Например, "REP MOVSD" (с CX = 9999) - это всего лишь одна команда CPU, но для передачи данных по шине данных требуется 9999x4 байтов. Если использовать 9999 простых "MOV", большая часть данных по-прежнему должна проходить через "шину данных", CPU должен выполнить еще 9998 инструкций. Более умный браузер создаст предварительно рендеринговое растровое изображение для фона с реплицированными изображениями; поэтому каждый раз, когда ему нужно перевести на видеопамять, ему нужно всего лишь 100 "REP MOVSD" (100 - это количество строк пикселов на последнем фоне, предположительно выше) вместо 10 тысяч или 1 тысячи.

Ответ 2

Я согласен с ответом Павла. Недавно я сделал небольшое исследование с помощью инструмента разработчика Google Chrome. Я использовал разный размер полупрозрачных изображений PNG поверх фонового изображения и использовал время рисования страницы, чтобы посмотреть, сколько времени потребуется, чтобы обновить экран.

Вот результат:

Время обновления без взлома -webkit-transform (закругленное):

2x2 изображение: 65-160 мс

Изображение 10x10: 60-150 мс

Изображение 100x100: 55-135мс

1000x1000 изображений: 55-130 мс

Время обновления с помощью -webkit-transform hack (rounded):

2x2 изображение: 40-120мс

Изображение 10x10: 30-90 мс

Изображение 100x100: 30-90 мс

1000x1000 изображений: 30-90 мс

Как и то, что сказал Пол, более крупное изображение занимает меньше времени для загрузки (обновления), чем меньшее изображение. Но, похоже, он становится менее эффективным после того, как изображение становится больше 10 пикселей. Я не вижу большой разницы между 100x100 и 1000x1000.

По моему мнению, огромное изображение не даст вам заметного результата, и это может увеличить время загрузки. Итак, я думаю, что любой размер около 10 - 100 достаточно хорош для производительности и времени загрузки.

Но, тем не менее, у другого изображения может быть другой результат, я думаю, вы должны проверить свой сайт с помощью инструмента рисования страницы в инструменте разработчика Google Chrome для получения точного результата.