Являются ли svg-изображения более сложными для браузера, чем растровые изображения?

Question

Итак, я делаю этот горизонтальный сайт прокрутки, у которого есть тонна изображений. Я планировал использовать svg для всего сайта, но только с 20-30 svg-изображениями средней и высокой сложности, используемыми на странице, и хром уже, кажется, показывает som jank и высокое время рисования для прокрутки (а firefox еще хуже, хотя сафари, кажется, намного лучше).

Прокрутка график

View the site (прокрутка работает на макинтош только окна пользователи могут использовать клавиши со стрелками)

Мой вопрос, если я должен был использовать PNGs вместо SVGs, уменьшится ли время красок и, следовательно, джокер? Почему браузер борется только с 20 нечетными изображениями svg?

Answer 1

У меня когда-то была подобная вещь. SVG был в 10 или более раз шире, чем показанный выше, он содержал элементы ~ 20k и имел размер около 3 МБ. Единственное, что принесло производительность (так как это был прыжок и запуск игры), было алгоритмом, который смог найти все элементы, чей ограничивающий прямоугольник перекрывал область просмотра. С этим я мог бы использовать display: none;, чтобы скрыть все, что невидимо.

Это уменьшило количество видимых элементов до ~ 150 за кадр, и игра бегала бегло.

Я использовал сбалансированное двоичное дерево (avl tree) и одномерный запрос диапазона, так как высота окна просмотра всегда была такой же, как и изображение.

Удачи вам!

[EDIT]

Забыла оставить что-то вроде Anwer. Из моего опыта большие/огромные графики SVG являются узким местом в рендеринге, особенно если происходит много сценариев. Если вам не нужна интерактивность с элементами из графика, так что ничего, кроме большого фонового изображения, я бы рекомендовал использовать карту Tile, основанную на изображениях PNG, что является стандартным способом в играх Jump'n'Run с объятиями »миры« так что вы можете получить Perfomance в двух точках:

1. рендеринга быстрее,
2. вы можете»ленивая Аякс нагрузка«плитка, в зависимости от видимости, чтобы запретить пользователь загружать»весь мир« в запускать.

В дополнение, вы можете использовать что-то вроде PIXI.js для рендеринга с помощью WebGL, что резко повлияет на производительность, а с ее помощью будет поддерживаться Tilemaps и Spritesheets.

Если вы настаиваете на преимуществах Vector Grafics (Scaling, Interactivity), вам нужно найти способ скрыть как можно больше элементов, чтобы поддерживать высокую частоту кадров.

Answer 2

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

Проблема

Мой длинный участок горизонтальной прокрутки был достаточно широк (30,000px).У меня было свойство background-color, примененное к одному из нижних z-index 'ed div для представления неба по всему сайту прокрутки. Я не хочу, чтобы небо растянуть весь 30,000px, так как он по существу не изменилась, и, следовательно, дал ему видовых ширину и высоту, с:

position:fixed; 

Не очень умный ход. Оказывается, это свойство заставляло слой моего документа перерисовываться на каждом кадре. Первоначально я, хотя это было нормально для браузеров, чтобы сделать это на прокрутке, так как сайт Robby Leonardi's, который я использовал в качестве ссылки , также перекрашивал каждый кадр.

Решение

Благодаря this article по одному из разработчиков хрома Dev инструментов, я откладывал общепринятые, и сделать слой неба

position:absolute; 

и вытянул его на всю ширину сайта, и бум! Прямоугольники краски исчезли. И производительность прокрутки была более плавной, чем масло.

Другие решения я попытался

• скрытие элементов не возле окна просмотра, чтобы сделать картины легче, как это было предложено @philipp, но не получали методом какой-либо заметной разницы. Кроме того, он чувствовал себя супер-хаки, и он не нацеливался на основную причину проблемы.

• Я пробовал модулировать мой сайт в сценах и с помощью translateZ(0) взломать на каждой сцене, чтобы вместо того, чтобы документировать, перерисовывались только более мелкие сцены. Это действительно помогло совсем немного, и свиток был приличным. Затем, Я дал всем изображениям svg свой собственный слой, используя translateZ(0). Я начал получать FPS около 60 сейчас, но опять же, это был неправильный способ делать что-то.