В последнее время мне везет натыкаться на интересные статьи для перевода. На этот раз – статья на HTML5Rocks о производительности HTML5 canvas. Автор пишет о некоей стене, в которую упираются разработчики при создании приложений. Какое-то время назад в нее уперся и я при портировании старой-доброй игры на canvas.
К сожалению, графики в оригинале вставлены через iframe. Я мог бы сделать снимки и разместить их изображения, но сам автор позиционирует графики актуальными и такими, которые будут обновляться, потому я просто разместил на них ссылки. Приятного чтения!
- Вступление
- Тестирование производительности
- Предварительно отрисовывайте в виртуальный canvas
- Группируйте вызовы
- Избегайте ненужных изменений состояния
- Отрисовывайте только разницу, а не весь холст
- Используйте многослойных canvas для сложных сцен
- Избегайте shadowBlur
- Различные способы очистить экран
- Избегайте нецелых координат
- Оптимизируйте анимации с помощью 'requestAnimationFrame'
- Большинство мобильных реализаций canvas – медленные
- Заключение
- Ссылки
Вступление
HTML5 canvas, который начинался, как эксперимент компании Apple, – наиболее широко распространенный стандарт для 2D режима непосредственной графики в интернет. Многие разработчики использую его в широком круге мультимедиа проектов, визуализаций и игр. Как бы то ни было, с ростом сложности приложений, разработчики нечаянно натыкаются на стену производительности.
Читать дальше →
