Теперь давайте поговорим о мобильных устройствах и оптимизации. Не существует мобильной версии Canvas, есть просто Canvas. Один и тот же API для десктопных и мобильных устройств. Мобильным устройствам иногда не хватает возможностей и они, как правило, медленнее; но то же самое можно сказать и про старые компьютеры и браузеры. Поэтому, когда вы делаете приложение на Canvas, важно учесть производительность и различные способы оптимизации кода.
Рисуйте меньше
Основная мантра для производительности — рисуйте меньше.
Не рисуйте скрытые штуки. Если у вас есть четыре экраны информации, но только один виден за раз, то не рисуйте остальные.
Используйте изображения вместо фигур. Если у вас есть графика, которая никогда не будет изменяться или масштабироваться, то рассмотрите перевод рисования в изображение, используя нечто вроде Фотошопа. В целом изображения рисуются гораздо быстрее на экране, чем векторная графика. Это особенно заметно, если у вас есть графика, которая перерисовывается несколько раз, вроде спрайта в игре.
Кэшируйте с помощью холста за экраном. Во время работы вы можете создать новый экземпляр холста, который не виден на экране, и его можно использовать в качестве кэша. Когда ваше приложение начинает рисовать графику в закадровый холст, то просто скопируйте её и нарисуйте снова. Это даст вам такую же скорость, что и использование изображений вместо фигур, но вы создаёте эти изображения в процессе и можете потенциально изменить их при необходимости.
Растягивайте изображения. Поскольку мы уже используем изображения для множества вещей, примите во внимание эффект их растягивания. В Canvas реализован хорошо оптимизированный код для масштабирования и кадрирования изображений, так что это должно происходить довольно быстро. Есть также несколько версий drawImage, которые позволяют рисовать фрагменты изображения. С помощью этих API вы можете делать умные штуки, такие как кэширование кучи спрайтов в одном изображении или дикое растягивание изображений для старомодных эффектов.
Перерисовывайте часть экрана только когда вам нужно. В зависимости от вашего приложения возможно перерисовать только часть экрана. К примеру, у меня есть прыгающий мяч. Мне не нужно стирать и перерисовать весь фон. Вместо этого я просто перерисую там, где мяч сейчас и где он был на предыдущем кадре. Для некоторых приложений это может дать огромное ускорение.
Рисуйте меньше кадров. Теперь, когда вы рисуете меньше, попытайтесь делать меньше кадров. Чтобы получить плавную анимацию вы, возможно, захотите задействовать 100 кадров в сек., но у большинства компьютеров максимальная скорость обновления экрана составляет 60 кадров в сек. Так что нет смысла рисовать больше кадров, потому что пользователь никогда их не увидит. Как вы синхронизируетесь с обновлением экрана? Mozilla и WebKit содержат экспериментальные API, которые отправляют запрос браузеру вызвать код при следующем обновлении экрана. Это заменит ваш вызов setInterval или setTimeout. Теперь браузер отвечает за имеющуюся частоту кадров и он гарантирует, что вы не перейдёте 60 кадров в сек. Браузер также может делать умные вещи, вроде снижения частоты кадров, если пользователь переходит на другую вкладку. Мобильные браузеры начинают воплощать это, так что фоновые приложения экономят срок службы батареи.
Лучший способ рисовать меньше — это не рисовать всё подряд. Если у вас есть статичный фон, который затем перемещается за пределы холста и рисуется заново — используйте изображение в браузере. Вы можете сделать фон холста прозрачным, чтобы через него всё было видно. Если у вас есть большие изображения, вы можете заставить их двигаться быстрее и плавнее с помощью переходов CSS, а не делать это в холсте через JavaScript. В целом переходы CSS будут быстрее, потому что они реализованы на Си, а не JavaScript, но ваш опыт может быть другим, так что тестировать и тестировать. Chrome и Mozilla содержат великолепные инструменты, которые помогут вам с отладкой и тестированием кода JavaScript.
Выравнивайте рисунки в спрайтах. Последний совет — с некоторыми изображениями и фигурами рисование происходит быстрее, если они выровнены по границе пикселей. Некоторые тесты показывают двух и трёхкратное ускорение на холсте в iPad, если рисунки в ваших спрайтах выровнены.