2

Не знаю откуда пошли sprite sheet, но впервые о них услышал когда увлекся играми. В играх с ними все просто, есть большая картинка спрайт-лист, есть маленькая картинка, которую создаешь в ручную и копируешь в неё нужную часть из большой.
Но если верить информации из полученной из гугла, то будь у меня спрайт-лист с тысячью кадрами, то отобразив их при помощи background-image + background-position я создам исходное изображение (спрайт лист) тысячу раз.

Прав я?

14
  • Так загрузится оно один раз, потом из кеша будет браться. 30 мая 2016 в 8:35
  • ru_volt: но если спрайт состоит из 100 кадров и весит 1МБ, то памяти он отожрет 100МБ... Это же безумие. Получается что использование спрайтов в вэбе схоже с тем жалким зрелищем когда маленькая девочка криво красит губы маминой помадой и одевает её туфли на три ноги больше её...
    – vas
    30 мая 2016 в 8:56
  • 1
    Но если верить информации из полученной из гугла -- приложите ссылочку на найденное, тут регулярно случаи, когда находки неверно истолковываются.
    – user181100
    30 мая 2016 в 10:06
  • 3
    @vas если их много, приложить любой из примеров не составит проблемы, а сейчас вы являетесь самостоятельным распространителем сомнительных слухов без указания их первоисточника.
    – user181100
    30 мая 2016 в 10:11
  • 1
    Не понял про увеличение и изменение цвета. Где оно и при чём тут вообще спрайт?
    – Qwertiy
    30 мая 2016 в 10:19

1 ответ 1

7

Вы исходите из предположения, что использование спрайта где-то на странице действительно требует копии куска спрайта в памяти. Это не совсем так.

Как работает отрисовка (по крайней мере в Windows, на пальцах):

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

Как при этом браузер обходится со спрайтами:

Если в момент перерисовки элемент, использующий спрайт, попал в перерисовываемую область - нужный кусок спрайта копируется в тот самый прямоугольник в видеопамяти. При отрисовке он поворачивается/масштабируется/обрезается под размер перерисовываемого элемента.

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

14
  • Я могу сказать следующее - Вы сейчас описали работу с gpu, но css это cpu. По этому я не могу с Вами поспорить.. Исходя из Ваших слов все расчеты ведутся в gpu и все является растром. Но блин, а что если спрайт векторный - svg? Вектор в видеокарте это же неправда..?
    – vas
    30 мая 2016 в 10:26
  • 6
    @vas я описал механизм отрисовки. не вижу, в каком месте я упомянул, что он должен происходить именно на уровне GPU. Или что "все является растром". Я написал что все превращается в растр в процессе отрисовки. Если спрайт - векторный svg - то при отрисовке он все равно станет куском растровой картинки в видеопамяти. Тектовый HTML - и тот превращается в растр видеопамяти - причем с применением того же самого механизма отрисовки. По той простой причине, что превратить что-то в растр в видеопамяти - это единственный способ показать что-то на экране.
    – user177221
    30 мая 2016 в 10:32
  • @vas конкретно по вашему примеру с "повернуть и отрисовать" - в GDI это делается вызовами TranslateTransform + RotateTransform + DrawImage. При этом отрисовывается сразу повернутая и смещенная картинка, а оригинал - остается без изменений.
    – user177221
    30 мая 2016 в 10:40
  • 1
    @vas, но ведь канвас - это не фон.
    – Qwertiy
    30 мая 2016 в 10:49
  • 2
    @vas естественно, не копирует. div это просто кусок DOM. Канвас позволяет рисовать на себе, и память он ест именно под хранение нарисованного. Т.е. в момент рендеринга содержимое канваса - картинка - копируется в видеопамять. А div на себе рисовать не позволяет. В момент рендеринга он просто отрисовывает свое содержимое (текст, вложенные элементы, рамочки) прямо в видеобуффер. Т.е. может браузер и кэширует результат прошлой отрисовки div, на случай если тот не поменялся (точнее, 100% кэширует), но он делает это только для отображаемых элементов. А не вообще для всех элементов в дереве.
    – user177221
    30 мая 2016 в 11:13

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.