HTML5 Canvas Optimization: практический пример

Мы возьмем его с собой в путешествие, изучим различные новые советы и приемы по оптимизации холста и применим их к исходному коду JavaScript виджета. Цель состоит в том, чтобы повысить скорость выполнения виджета и получить более плавный, более плавный анимационный виджет, основанный на более тонком и эффективном JavaScript.

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

Давайте сделаем первый шаг.

Шаг 1: Воспроизведение трейлера

Приведенный выше виджет основан на трейлере фильма для Sintel , 3D-анимации от Blender Foundation . Он построен с использованием двух самых популярных дополнений HTML5: элементов <canvas> и <video> .

<video> загружает и воспроизводит видеофайл Sintel, а <canvas> генерирует собственную последовательность анимации, делая снимки воспроизводимого видео и смешивая его с текстом и другой графикой. Когда вы нажимаете для воспроизведения видео, холст оживает на темном фоне, который является увеличенной черно-белой копией воспроизводимого видео. Меньшие цветные скриншоты видео копируются на сцену и скользят по ней как часть иллюстрации к фильму.

В верхнем левом углу у нас есть заголовок и несколько строк описательного текста, которые постепенно исчезают при воспроизведении анимации. Скорость выполнения сценария и связанные с ним показатели включены в анимацию в небольшой черный квадрат в левом нижнем углу с графиком и ярким текстом. Мы рассмотрим этот конкретный пункт более подробно позже.

Наконец, есть большой вращающийся клинок, который летит по сцене в начале анимации, чья графика загружается из внешнего файла изображения PNG.

Шаг 2: Просмотр источника

Исходный код содержит обычную смесь HTML, CSS и Javascript. HTML-код разрежен: только теги <canvas> и <video> , заключенные в контейнер <div> :

Контейнеру <div> присваивается идентификатор ( animationWidget ), который действует как ловушка для всех применяемых к нему правил CSS и его содержимого (ниже).

В то время как HTML и CSS — это маринованные специи и приправы, именно JavaScript является основой виджета.

• Вверху у нас есть основные объекты, которые будут часто использоваться в скрипте, включая ссылки на элемент canvas и его 2D-контекст.
• Функция init() вызывается всякий раз, когда начинается воспроизведение видео, и устанавливает все объекты, используемые в скрипте.
• Функция sampleVideo() захватывает текущий кадр воспроизводимого видео, а setBlade() загружает внешнее изображение, необходимое для анимации.
• Темп и содержание анимации холста контролируются функцией main() , которая похожа на биение скрипта. Запускается с регулярными интервалами, как только начинается воспроизведение видео, оно рисует каждый кадр анимации, сначала очистив холст, а затем вызвав каждую из пяти функций рисования сценария:
  • drawBackground()
  • drawFilm()
  • drawTitle()
  • drawDescription()
  • drawStats()

Как следует из названий, каждая функция рисования отвечает за рисование элемента в анимационной сцене. Такое структурирование кода повышает гибкость и облегчает дальнейшее обслуживание.

Полный скрипт показан ниже. Найдите минутку, чтобы оценить его, и посмотрите, сможете ли вы заметить какие-либо изменения, которые вы бы сделали, чтобы ускорить его.

Шаг 3: Оптимизация кода: знать правила

Первое правило оптимизации производительности кода: не надо.

Смысл этого правила состоит в том, чтобы препятствовать оптимизации ради оптимизации, поскольку этот процесс имеет свою цену.

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

Целью оптимизации этого виджета будет запуск функции main() менее чем за 33 миллисекунды, как и положено, что будет соответствовать частоте кадров воспроизводимых видеофайлов ( sintel.mp4 и sintel.webm ). Эти файлы были закодированы со скоростью воспроизведения 30 кадров в секунду (тридцать кадров в секунду), что соответствует примерно 0,33 секундам или 33 миллисекундам на кадр (1 секунда ÷ 30 кадров).

Поскольку JavaScript рисует новый кадр анимации на холсте каждый раз, когда вызывается функция main() , целью нашего процесса оптимизации будет заставить эту функцию занимать 33 миллисекунды или меньше при каждом ее запуске. Эта функция повторно вызывает себя, используя таймер JavaScript setTimeout() как показано ниже.

Второе правило: пока нет.

В этом правиле подчеркивается, что оптимизацию всегда следует выполнять в конце процесса разработки, когда вы уже выполнили какой-то законченный рабочий код. Полиция по оптимизации позволит нам перейти к этому, поскольку скрипт виджета является прекрасным примером законченной, работающей программы, готовой к процессу.

Третье правило: не делай, а профиль первым.

Это правило касается понимания вашей программы с точки зрения производительности во время выполнения. Профилирование помогает вам узнать, а не угадать, какие функции или области скрипта занимают больше всего времени или используются чаще всего, так что вы можете сосредоточиться на них в процессе оптимизации. Достаточно важно заставить ведущие браузеры поставлять встроенные профилировщики JavaScript или иметь расширения, предоставляющие эту услугу.

Я запустил виджет под профилировщиком в Firebug , и ниже скриншот результатов.

Шаг 4. Установите некоторые показатели производительности

Когда вы запустили виджет, я уверен, что вы нашли все вещи Sintel в порядке, и были совершенно поражены тем, что находится в правом нижнем углу холста, с красивым графиком и блестящим текстом.

Это не просто красивое лицо; этот блок также предоставляет некоторую статистику производительности в режиме реального времени работающей программы. На самом деле это простой, простой Javascript профилировщик. Это верно! Йо, я слышал, что вы любите профилирование, поэтому я добавил профилировщик в ваш фильм, чтобы вы могли профилировать его во время просмотра.

График отслеживает время рендеринга , рассчитанное путем измерения того, сколько времени каждый прогон main() занимает в миллисекундах. Так как это функция, которая рисует каждый кадр анимации, это фактически частота кадров анимации. Каждая вертикальная синяя линия на графике показывает время, затраченное на один кадр. Красная горизонтальная линия — это целевая скорость, которую мы установили в 33 мс, чтобы соответствовать частоте кадров видеофайла. Чуть ниже графика скорость последнего вызова функции main() указывается в миллисекундах.

Профилировщик также является удобным тестом скорости рендеринга в браузере. На данный момент среднее время рендеринга в Firefox составляет 55 мс, 90 мс в IE 9, 41 мс в Chrome, 148 мс в Opera и 63 мс в Safari. Все браузеры работали в Windows XP, кроме IE 9, который был профилирован в Windows Vista.

Следующая ниже метрика — это Canvas FPS (холст кадров в секунду), полученный путем подсчета количества вызовов main() в секунду. Профилировщик отображает последнюю частоту кадров Canvas FPS, когда видео все еще воспроизводится, а когда он заканчивается, он показывает среднюю скорость всех вызовов main() .

Последний показатель — FPS браузера , который измеряет, сколько браузер перерисовывает текущее окно каждую секунду. Этот window.mozPaintCount. доступен только при просмотре виджета в Firefox, поскольку он зависит от функции, доступной в настоящее время только в этом браузере и называемой window.mozPaintCount. — свойство JavaScript, которое отслеживает, сколько раз окно браузера перекрашивалось с момента первой загрузки веб-страницы.

Перекрашивание обычно происходит, когда происходит событие или действие, которое изменяет внешний вид страницы, например, когда вы прокручиваете страницу вниз или наводите указатель мыши на ссылку. Фактически это реальная частота кадров браузера, которая определяется тем, насколько занята текущая веб-страница.

Чтобы оценить влияние неоптимизированной анимации холста на mozPaintCount, я удалил тег canvas и весь JavaScript, чтобы отслеживать частоту кадров браузера при воспроизведении только видео. Мои тесты были сделаны в консоли Firebug, используя функцию ниже:

Результаты: частота кадров браузера составляла от 30 до 32 кадров в секунду при воспроизведении видео и снижалась до 0-1 кадров в секунду по окончании видео. Это означает, что Firefox настраивал частоту перерисовки окна в соответствии с частотой воспроизводимого видео, закодированного со скоростью 30 кадров в секунду. Когда тест был запущен с неоптимизированной анимацией холста и воспроизведением видео вместе, он замедлился до 16 кадров в секунду, поскольку браузер теперь изо всех сил пытался запустить весь JavaScript и по-прежнему перерисовывать свое окно вовремя, делая и воспроизведение видео, и анимацию холста вялый.

Теперь мы приступим к настройке нашей программы, и при этом мы будем отслеживать время рендеринга, Canvas FPS и Browser FPS, чтобы измерить влияние наших изменений.

Шаг 5: Используйте requestAnimationFrame()

Последние два фрагмента JavaScript выше используют функции таймера setTimeout() и setInterval() . Чтобы использовать эти функции, вы указываете временной интервал в миллисекундах и функцию обратного вызова, которую вы хотите выполнить по истечении этого времени. Разница между ними заключается в том, что setTimeout() будет вызывать вашу функцию только один раз, а setInterval() неоднократно.

Хотя эти функции всегда были незаменимыми инструментами в JavaScript-аниматоре, у них есть несколько недостатков:

Во-первых, установленный временной интервал не всегда надежен. Если программа все еще находится в процессе выполнения чего-то еще, когда интервал истекает, функция обратного вызова будет выполнена позже, чем первоначально установленное, как только браузер больше не будет занят. В функции main() мы устанавливаем интервал в 33 миллисекунды — но, как показывает профилировщик, эта функция в Opera вызывается каждые 148 миллисекунд.

Во-вторых, проблема с перерисовкой браузера. Если бы у нас была функция обратного вызова, которая генерировала 20 кадров анимации в секунду, а браузер перерисовывал свое окно только 12 раз в секунду, 8 вызовов этой функции будут потрачены впустую, поскольку пользователь никогда не увидит результаты.

Наконец, браузер не может знать, что вызываемая функция анимирует элементы в документе. Это означает, что, если эти элементы прокручиваются вне поля зрения или пользователь нажимает на другую вкладку, обратный вызов все равно будет выполняться многократно, тратя циклы ЦП.

Использование requestAnimationFrame() решает большинство из этих проблем, и его можно использовать вместо функций таймера в анимации HTML5. Вместо указания временного интервала requestAnimationFrame() синхронизирует вызовы функций с перерисовками окна браузера. Это приводит к более плавной, согласованной анимации, поскольку кадры не удаляются, и браузер может выполнять дальнейшую внутреннюю оптимизацию, зная, что анимация выполняется.

Чтобы заменить setTimeout() на requestAnimationFrame в нашем виджете, мы сначала добавляем следующую строку вверху нашего скрипта:

Поскольку спецификация все еще довольно новая, некоторые браузеры или версии браузеров имеют свои собственные экспериментальные реализации, эта строка гарантирует, что имя функции указывает на правильный метод, если он доступен, и возвращается к setTimeout() если нет. Затем в функции main() мы меняем эту строку:

… чтобы:

Первый параметр принимает функцию обратного вызова, которая в данном случае является функцией main() . Второй параметр является необязательным и указывает элемент DOM, который содержит анимацию. Предполагается, что он будет использоваться для вычисления дополнительных оптимизаций.

Обратите внимание, что getStats() также использует setTimeout(), но мы оставляем ее на месте, поскольку эта конкретная функция не имеет ничего общего с анимацией сцены. requestAnimationFrame() был создан специально для анимации, поэтому, если ваша функция обратного вызова не выполняет анимацию, вы все равно можете использовать setTimeout() или setInterval().

Шаг 6. Использование API видимости страницы

На последнем шаге мы сделали requestAnimationFrame анимацию холста, и теперь у нас появилась новая проблема. Если мы запустим виджет, затем свернем окно браузера или переключимся на новую вкладку, скорость перерисовки окна виджета снизится для экономии энергии. Это также замедляет анимацию холста, поскольку теперь она синхронизируется со скоростью перерисовки — что было бы идеально, если бы видео не продолжалось до конца.

Нам нужен способ определить, когда страница не просматривается, чтобы мы могли приостановить воспроизведение видео; вот тут-то и приходит на помощь API видимости страницы.

API содержит набор свойств, функций и событий, которые мы можем использовать, чтобы определить, является ли веб-страница видимой или скрытой. Затем мы можем добавить код, который соответствующим образом корректирует поведение нашей программы. Мы будем использовать этот API для приостановки воспроизведения видео виджета, когда страница неактивна.

Мы начинаем с добавления нового слушателя событий в наш скрипт:

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

Шаг 7: для пользовательских фигур нарисуйте весь путь сразу

Контуры используются для создания и рисования пользовательских фигур и контуров в элементе <canvas> , который всегда будет иметь один активный путь.

Путь содержит список подпутей, и каждый подпуть состоит из координатных точек холста, связанных между собой линией или кривой. Все функции создания пути и рисования являются свойствами объекта context холста и могут быть разделены на две группы.

Существуют функции создания lineTo() , которые используются для определения lineTo() и включают в себя lineTo() , quadraticCurveTo() , bezierCurveTo() и arc() . Затем у нас есть функции рисования path stroke() и fill() , пути / подпути. Использование stroke() создаст контур, а fill() создаст форму, заполненную цветом, градиентом или узором.

При рисовании фигур и контуров на холсте более эффективно сначала создать весь путь, а затем просто stroke() или fill() один раз, а не определять и рисовать каждую ванну за раз. Взяв график профилировщика, описанный в шаге 4, в качестве примера, каждая отдельная вертикальная синяя линия является подпути, в то время как все они вместе составляют весь текущий путь.

Метод stroke() в настоящее время вызывается в цикле, который определяет каждый подпуть:

Этот график можно нарисовать гораздо эффективнее, сначала определив все подпути, а затем просто рисуя весь текущий путь сразу, как показано ниже.

Шаг 8: Используй закадровый холст, чтобы построить сцену

Этот метод оптимизации связан с тем, что использовался на предыдущем шаге, поскольку они оба основаны на одном и том же принципе минимизации перерисовок веб-страницы.

Всякий раз, когда происходит что-то, что изменяет внешний вид или содержание документа, браузер должен запланировать операцию перерисовки вскоре после этого, чтобы обновить интерфейс. Перекраска может быть дорогостоящей операцией с точки зрения циклов процессора и мощности, особенно для плотных страниц с большим количеством элементов и анимацией. Если вы создаете сложную анимационную сцену, добавляя множество элементов по одному в <canvas> , каждое новое добавление может просто вызвать полную перерисовку.

Лучше и намного быстрее построить сцену за пределами экрана (в памяти) <canvas> , а после этого закрасить всю сцену всего один раз на экране, видимом <canvas> .

Чуть ниже кода, который получает ссылку на виджет <canvas>и его контекст, мы добавим пять новых строк, которые создают внеэкранный объект DOM canvas и сопоставляют его размеры с исходным видимым <canvas>.

Затем мы сделаем поиск и заменим во всех функциях рисования все ссылки на «mainCanvas» и изменим это на «osCanvas». Ссылки на «mainContext» будут заменены на «osContext». Теперь все будет нарисовано на новом закадровом холсте вместо оригинала <canvas>.

Наконец, мы добавляем еще одну строку, main()которая рисует то, что в данный момент находится за кадром, <canvas>в наш оригинал <canvas>.

Шаг 9: Кэшируйте пути как растровые изображения, когда это возможно

Для многих видов графики использование drawImage()будет намного быстрее, чем создание одного и того же изображения на холсте с использованием контуров. Если вы обнаружите, что большая часть вашего сценария многократно тратится на рисование одних и тех же фигур и контуров снова и снова, вы можете сэкономить браузеру некоторую работу, кэшируя полученную графику как растровое изображение, а затем рисовать ее один раз на холсте всякий раз, когда требуется использование drawImage().

Есть два способа сделать это.

Первый — создать внешний файл изображения в виде изображения в формате JPG, GIF или PNG, затем загрузить его динамически с помощью JavaScript и скопировать его на холст. Единственный недостаток этого метода — дополнительные файлы, которые ваша программа должна будет загружать из сети, но в зависимости от типа графики или того, что делает ваше приложение, это может быть хорошим решением. Анимационный виджет использует этот метод для загрузки изображения вращающегося лезвия, которое было бы невозможно воссоздать, используя только функции рисования траектории холста.

Второй метод заключается в том, чтобы просто нарисовать графику один раз за пределами экрана, а не загружать внешнее изображение. Мы будем использовать этот метод для кэширования заголовка анимационного виджета. Сначала мы создаем переменную, которая ссылается на новый элемент вне экрана, который будет создан. Его значение по умолчанию установлено на false, так что мы можем сказать, был ли создан кэш изображений и сохранен ли он после запуска скрипта:

Затем мы редактируем drawTitle()функцию, чтобы сначала проверить, было ли создано titleCacheизображение холста. Если это не так, он создает изображение вне экрана и сохраняет ссылку на него в titleCache:

Шаг 10: очистить холст с clearRect()

Первый шаг в рисовании нового кадра анимации — очистить холст текущего. Это может быть сделано либо путем сброса ширины элемента canvas, либо с помощью clearRect()функции.

Сброс ширины имеет побочный эффект, также сбрасывая текущий контекст холста обратно в его состояние по умолчанию, что может замедлить процесс. Использование clearRect()всегда является более быстрым и лучшим способом очистки холста.

В main()функции мы изменим это:

…к этому:

Шаг 11: реализовать слои

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

Применительно к сцене анимации холста каждый слой будет отдельным элементом холста, размещенным друг над другом с использованием CSS для создания иллюзии отдельного элемента. Как метод оптимизации, он работает лучше всего, когда есть четкое различие между передним и фоновым элементами сцены, при этом большинство действий происходит на переднем плане. Затем фон может быть нарисован на элементе canvas, который не сильно меняется между кадрами анимации, и на переднем плане на другом, более динамичном элементе canvas, над ним. Таким образом, не нужно заново перерисовывать всю сцену для каждого кадра анимации.

К сожалению, виджет анимации является хорошим примером сцены, в которой мы не можем с пользой применять эту технику, поскольку элементы переднего и заднего плана сильно анимированы.

Шаг 12. Обновление только изменяющихся областей анимационной сцены.

Это еще один метод оптимизации, который сильно зависит от композиции сцены анимации. Его можно использовать, когда анимация сцены сосредоточена вокруг определенной прямоугольной области на холсте. Мы могли бы затем очистить и перерисовать просто перерисовать этот регион.

Например, заголовок Sintel остается неизменным на протяжении большей части анимации, поэтому мы можем оставить эту область нетронутой при очистке холста для следующего кадра анимации.

Чтобы реализовать эту технику, мы заменим строку, которая вызывает функцию рисования заголовка, main()следующим блоком:

Шаг 13: сверните субпиксельный рендеринг

Субпиксельный рендеринг или сглаживание происходит, когда браузер автоматически применяет графические эффекты для удаления неровных краев. Это приводит к более плавно выглядящим изображениям и анимации и автоматически активируется всякий раз, когда вы указываете дробные координаты, а не целое число при рисовании на холсте.

На данный момент не существует стандарта, как именно это должно быть сделано, поэтому субпиксельный рендеринг немного несовместим во всех браузерах с точки зрения отображаемого вывода. Это также замедляет скорость рендеринга, так как браузер должен выполнить некоторые вычисления, чтобы получить эффект. Поскольку сглаживание холста нельзя отключить напрямую, единственный способ обойти его — всегда использовать целые числа в координатах чертежа.

Мы будем использовать Math.floor()для обеспечения целых чисел в нашем сценарии, когда это применимо. Например, следующая строка в drawFilm():

… переписывается как:

Шаг 14: Измерьте результаты

Мы рассмотрели несколько методов оптимизации анимации холста, и теперь пришло время пересмотреть результаты.

В этой таблице показаны средние значения времени рендеринга до и после и FPS для Canvas. Мы можем видеть некоторые существенные улучшения во всех браузерах, хотя только Chrome действительно приближается к достижению нашей первоначальной цели — максимум времени рендеринга 33 мс. Это означает, что для достижения этой цели еще предстоит проделать большую работу.

Мы могли бы продолжить, применив более общие методы оптимизации JavaScript, и, если это все равно не помогло, возможно, стоит подумать об уменьшении анимации, удалив некоторые навороты. Но мы не будем рассматривать сегодня ни одну из этих техник, так как основное внимание здесь было уделено оптимизации <canvas>анимации.

Canvas API все еще довольно новый и растет с каждым днем, поэтому продолжайте экспериментировать, тестировать, исследовать и делиться. Спасибо за чтение учебника.