Проблемы с производительностью с холстом HTML5 в некоторых мобильных браузерах.

Ответ 1

Я провел много экспериментов с холстом во многих браузерах. Некоторые проблемы с производительностью, которые я заметил:

Во-первых, о ваших предположениях:

• Когда requestAnimationFrame поддерживается браузером, материал чертежа и само приложение более отзывчивы. Используйте setTimeout или setInterval, так как резерв всегда возможен, но вам нужно быть осторожным в отношении времени. Этот надежный polyfill может помочь немного, но ничего не по сравнению с native requestAnimationFrame.

• Если console.log вызывается каждый кадр (или почти), да, производительность снижается. Поскольку собственный Android-браузер не имеет консольного объекта, каждый раз, когда он вызывается, генерируется ошибка, которая также способствует замедлению вашего приложения. Вы можете сделать это:

  if(typeof console === "undefined"){ console = {}; }

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

Примечание. Chrome для поддержки Android большинство функций HTML5, перечисленных здесь, включая requestAnimationFrame и websockets.

Дополнительная информация:

• Рисование текста с использованием контекста 2d fillText слишком дорого, но в некоторых браузерах это еще хуже. Предварительно создайте свои тексты на другом холсте или используйте растровые шрифты. (В родном Android-браузере, после замены рисунка fillText для предварительного рендеринга, производительность выросла с 10-15 FPS до 30-45 FPS в некоторых играх, которые я сделал).

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

• Вам нужно минимизировать рисование в реальном времени. Предоставляйте свои вещи, когда сможете. Переделайте только те материалы, которые изменились и их необходимо обновить.

• Попробуйте написать эффективную память и код для коллекционера мусора.

Есть намного больше дел. Я просто привел несколько.

СОВЕТ: сделайте несколько стресс-тестов для функций, которые вы не уверены, являются ли они убийцами производительности и фиксируют результаты тестов.

В мобильных приложениях, особенно в приложениях реального времени, все оптимизаторы приветствуются без матер, если это просто оптимизация или бит памяти.

Для получения дополнительной информации перейдите по ссылкам ниже:

• http://www.html5rocks.com/en/tutorials/canvas/performance/ (этот обязательно нужно посетить)
• http://www.html5rocks.com/en/features/performance

Также найдите производительность в Сообщениях и учебниках.

ИЗМЕНИТЬ
Этот фрагмент кода jsfiddle показывает некоторые вещи, которые рассматриваются в этом ответе, и предоставляет приблизительный счетчик кадров в секунду для сравнения. Отредактируйте эту скрипку самостоятельно и проверьте ее.

Ответ 2

В зависимости от того, что вы рисуете, наиболее распространенной стратегией улучшения производительности с холстом Html5 является использование слоев (т.е. нескольких холстов) и обновление только слоев, которые нужно перерисовать, а не перерисовывать всю вещь на каждом кадре анимации. Вы можете перевернуть что-то подобное себе, или вы можете использовать что-то вроде http://www.concretejs.com/, которое представляет собой легкую структуру холста Html5, которая позволяет использовать такие периферийные объекты, как обнаружение попадания, слоирование, кеширование, поддержка соотношения пикселей, загрузки и т.д. Вы бы сделали примерно следующее:

var wrapper = new Concrete.Wrapper({
  width: 500,
  height: 300,
  container: el
});

var layer1 = new Concrete.Layer();
var layer2 = new Concrete.Layer();

wrapper.add(layer1).add(layer2);

// something happens which requires you to redraw layer2, but not layer1...
layer2.sceneCanvas.context.fillStyle = 'red';
layer2.sceneCanvas.context.fillRect(0, 0, 200, 100);