HTML5-производительность холста для маленьких и больших файлов

Question

Я, похоже, испытываю переменную производительность при использовании холста HTML5 в зависимости от объема памяти страницы ... возможно, количества загруженных изображений (закадровых полотен) Как мне найти источник проблемы с производительностью? Или кто-нибудь знает, действительно ли существует проблема с производительностью, когда загружается много данных, даже если они не используются одновременно?

Вот пример хорошей производительности. У меня относительно простая карта. Это между 700 и 800 КБ. Вы можете перемещаться по этой карте относительно плавно.

Есть еще один файл (который вы, возможно, не хотите просматривать из-за его большого размера).

Это около 16 МБ и содержит десятки, может быть, порядка ста изображений / полотен. Он рисует меньший вид, поэтому он должен идти быстрее. Но это не так. Многие карты сильно отстают по сравнению с более простой демонстрацией.

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

Answer 1

Я работал над некоторыми сложными вещами Canvas, где производительность рендеринга меняланикогда не превышать 65536 пикселей.

Я еще не пришел к выводу о том, почему это так, но, вероятно, необходимо изменить структуру данных или тип данных при работе с большим источником холсты.

putImageData показал аналогичные результаты.
Размер целевого холста не имел значения.

Вот несколько тестов, которые я написал для изучения этого ограничения производительности: http://jsperf.com/magic-canvas/2 http://jsperf.com/pixel-count-matters/2

Answer 2

В Google Chrome и Chromium вы можете открыть инструменты разработчика (tools-> tools) и затем нажать «Профили». Нажмите на круг внизу, дайте холсту перерисоваться, а затем снова нажмите на круг Это дает вам профиль, который показывает, сколько времени было потрачено где.