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

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

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

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

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

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

• Для ресурсоемких приложений реального времени веб-сокеты работают быстрее, чем HTTP-запросы. К сожалению, эта функция не поддерживается старыми родными браузерами Android. Если невозможно использовать веб-сокеты, следует свести к минимуму 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 показывает некоторые вещи, описанные в этом ответе, и дает примерный fps против эталона. Отредактируйте эту скрипку самостоятельно и проверьте ее.

В зависимости от того, что вы рисуете, наиболее распространенная стратегия повышения производительности с помощью холста 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);