Насколько размер изображения влияет на производительность рендеринга / рисования CSS? - PullRequest
0 голосов
/ 26 ноября 2018

Я работаю над JS / HTML-игрой, где все объекты являются элементами HTML (в основном <img>).Их top и left CSS-атрибуты (иногда вместе с другими, такими как поля, преобразования и т. Д.) динамически модифицируются кодом JS (30-80 раз в секунду).Я заметил огромное улучшение производительности, когда я переключился с использования файлов .png на .gif (22 кадра в секунду -> 35 кадров в секунду), но все же:

Может еще больше уменьшить размер файлов (на 10-30%) действительно заметно улучшить производительность CSS-преобразования? Я бы просто протестировал это, но я говорю о ~ 250 gif-файлах;и я не хочу терять слишком много качества.

Ответы [ 2 ]

0 голосов
/ 30 ноября 2018

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

Об уменьшении размера файла GIF:

  • Положительным фактором здесь является то, что при сокращении ширины и высоты изображения вдвое фактический размер файла может быть уменьшен примерно на 75%.
  • При использовании изображений GIF сокращается количество различныхцвета, используемые в GIF-изображении, также уменьшат его размер.Часто вы можете выбрать количество цветов при экспорте картинок из инструментов редактора изображений.В Photoshop у вас есть опция «Экспорт для Интернета», которая пытается установить оптимальные настройки для использования на веб-страницах.

Относительно производительности игры и изображений:

  • Если вы уже знаете, как вы будете изменять размеры изображений (фиксированные размеры, такие как + 50% и + 100%), использование CSS Image Sprites с предварительно измененными размерами изображений может дать хорошее улучшение, так как вам не придется это делать.измените размер изображения, но просто используйте существующую часть листа спрайта.Это уменьшит объем обработки для манипулирования изображениями и, следовательно, увеличит производительность.
  • Если вам нужны все сразу, производительность, качество и небольшой размер файла, лучший способ - заменить как можно больше растровой графикивекторная графика, насколько это возможно.Большинство современных 2D игр используют много векторной графики.
  • Размер векторной графики легче изменить, так как необходимо пересчитать и заполнить только сплайны, изменение размера растровой графики приводит к расчету для каждого нового пикселя.
  • Все распространенные современные браузеры поддерживают формат svg и могутизмеряться через css.Если вы хотите попробовать, бесплатный инструмент с открытым исходным кодом для создания векторной графики - InkScape.

Надеюсь, это поможет.

0 голосов
/ 26 ноября 2018

Почему вы не используете JPEG?Это компактно.Да, размеры изображений влияют на производительность.

Кроме того, установите флажок « Спрайты изображений CSS ». Вы можете иметь одно изображение со всеми возможными значками / изображениями и обрабатывать вид с помощью CSS.Вы получите более высокую производительность при загрузке одного изображения.

Below graph may help you to decide.

...