Попробуйте просмотреть на других машинах, чтобы увидеть, существует ли та же проблема.
Chrome позволяет профилировать и отлаживать элементы холста из
Инструменты разработчика. Он может использоваться как для 2D, так и для WebGL холст проектов.
Чтобы сделать это, вам нужно включить вкладку «Эксперименты».
Если вы еще этого не сделали, перейдите к chrome: // flags и включите
опция помечена «Включить экспериментальные средства разработчика». Вам нужно будет
нажмите кнопку «Перезапустить сейчас» внизу страницы, чтобы применить
изменения. Перейдите на панель «Настройки» в Chrome Developer Tools с помощью
щелкнув по винтику внизу справа. Перейдите на вкладку «Эксперименты» и
отметьте опцию «Проверка холста».
Теперь перейдите на вкладку «Профиль», и вы увидите опцию «Захват»
Canvas Frame ". Инструменты разработчика могут попросить вас перезагрузить страницу, чтобы
использовать холст. Нажатие «Старт» захватывает один кадр холста
приложение. Кроме того, вы можете нажать на поле ниже, чтобы переключиться на
«Последовательные кадры», которые позволяют захватывать несколько кадров.
Chrome создает журнал каждого вызова Canvas, предоставляя список каждого
вызов контексту и скриншот. Вы можете нажать на один из журнала
элементы для воспроизведения кадра в инструментах разработчика и посмотреть, какие
Команды были вызваны в порядке их вызова и из которых
линия.
Firefox имеет отладчик Canvas и WebGL Shader, предоставляющий вам
проверять кадры, кадры в секунду, изменять шейдеры и многое другое.
Чтобы включить эти инструменты, перейдите в настройки Devtools (значок cog
в devtools) и проверьте «Canvas» и «Shader Editor».
Анимация не выбирает синтаксис, она разрабатывает анимацию для
быстрый рендеринг. Разница между плавной, реалистичной анимацией
и дерзкий, заикающийся редко бывает так просто, как CSS против
JavaScript. Вместо этого часто определяется, какие свойства или
атрибуты, которые вы анимируете, на каких элементах.
Независимо от того, изменяете ли вы свойство стиля с помощью CSS или
при использовании SMIL или JavaScript браузер должен определить, какой
пиксели на экране нужно обновлять, и как.
Если шаги DOM и вычисления стиля определяют, что нет стилей или SVG
атрибуты рендеринга были изменены для любых элементов, браузер может
остановитесь прямо там.
Если измененные стили не влияют на макет (только рисование), или если
макет изменился для некоторых элементов, но не для других, браузер
должен определить, какие части нужно перекрасить. Этот регион известен
как «грязный» прямоугольник экрана. Элементы в другом месте на
Экран можно пропустить, их пиксели не изменились для этого обновления.
Измененный элемент обычно нужно перекрашивать, но также возможно
другие. Был ли измененный элемент перекрывать другой элемент, который сейчас
раскроется? Если это так, браузер может потребоваться перерисовать этот фон
элемент.
Но, возможно, нет.
Это зависит от того, имеет ли браузер исходные данные пикселей для
фон сохранен в памяти. Графические процессоры (GPU) в
большинство современных компьютеров и смартфонов могут хранить определенное количество
рендеринг слоев в памяти, а не только окончательная версия, которая появляется на
экран. Основная программа браузера также может сохранять частичные изображения в
память.
Большая часть оптимизации рендеринга в браузере сводится к тому, как он выбирает
какие части визуализируемого документа разделить на отдельно кэшированные
(сохраненные) слои.
Графические процессорыможет выполнять определенные операции с кэшированными слоями рендеринга,
и высоко оптимизированы для ограниченного числа операций, которые они могут
делаем.
Если браузеры знают, что элемент изменится таким образом, который может
быть эффективно рассчитаны графическим процессором, они могут сохранить пиксель этого изображения
данные в другом слое GPU от его фона (или переднего плана).
поэтому можно применить анимированные изменения, отправив новые инструкции
в графический процессор для того, как объединить сохраненные пиксели, а не
вычисление новых значений пикселей в главном процессоре.
Подсказка Большинство инструментов Dev для браузера теперь имеют опции для выделения «грязных»
рисовать прямоугольники всякий раз, когда они обновляются. Если ваша анимация
Оптимизированный для графического процессора, вы не увидите цветных прямоугольников, мигающих
запустите этот режим Dev Tools.
Конечно, все пути, оптимизированные для GPU, зависят от наличия
совместимый графический процессор - и в браузере, зная, как его использовать,
которая может зависеть от операционной системы. Так что производительность браузера и
иногда даже ошибки браузера будут зависеть не только от браузера
версия, но также на ОС и аппаратном обеспечении.
Большинство графических процессоров могут регулировать непрозрачность сохраненных слоев и переводить их
в различные относительные позиции, прежде чем объединять их. Они также могут
выполнять масштабирование изображения, обычно включая 3D перспективное масштабирование, но
масштабирование рассчитывается на уровне пикселей, а не на уровне векторов, и
может вызвать видимую потерю в разрешении. Более продвинутые графические процессоры могут
рассчитать некоторые операции фильтра и режимы наложения, а также маскирование одного
слой изображения со слоем альфа-маски.
Некоторые графические процессоры также оптимизировали векторную растеризацию, которая может
рассчитать векторные фигуры высокого разрешения для использования в качестве обтравочных контуров из
другие векторные уровни. Эти « обтравочные контуры » используются не только для
clip-path эффекты, хотя. Заполнение и поглаживание формы отсечение
слой изображения краски в область заливки или вектор области обводки
контур. Точно так же CSS-эффекты границ границ являются векторными clipping
пути к слоям содержимого и фонового изображения.
Но в настоящее время вы не можете полагаться на то, что ваши конечные пользователи будут оптимизированы
пути.
Наилучшая производительность среди широкого спектра браузеров и оборудования,
происходит от анимации, которая может быть разбита на слои (элементов,
группы или отдельные рисунки), которые анимированы в
следующие способы:
изменения непрозрачности
поступательные и вращательные преобразования
Предупреждение. В настоящее время Chrome никогда не делит SVG-графику на разные
Слои GPU (хотя они выполняют другие оптимизации).
Чтобы создать полностью оптимизированную для GPU анимацию в Chrome, иногда можно
размещать отдельные встроенные элементы поверх друг друга,
создавая свои собственные слои.
Если вы не можете определить анимацию полностью в переводе и непрозрачности
слои, рассмотрите следующие рекомендации:
Минимизируйте размер «грязного» прямоугольника в каждом кадре.
Сплошные объекты лучше, чем полупрозрачные, поскольку
браузеру не нужно рассчитывать обновления пикселей для фигур, которые не могут
быть увиденным за твердым предметом. (Хотя это может не применяться, если
браузер использует слои GPU для оптимизации.)
Перемещение элементов более эффективно, чем изменение их внешнего вида.
лайк. (Хотя от браузера зависит, будет ли «перемещаться» только
применяется к преобразованиям движений или также к другой абсолютной позиции
меняется.)
Изменение заливки и обводки более эффективно, чем изменение формы и
размеры.
Преобразование масштабирования лучше, чем изменение базового
геометрия; браузеры могут использовать масштабирование изображения GPU для
эффект анимированного масштаба вместо пересчета векторного изображения в
правильное разрешение на каждом Fотросток.
Отсечение обычно более эффективно, чем маскирование.
Избегайте масштабирования слоев градиента и рисунка; это может означать использование
эффекты пользовательского пространства вместо эффектов ограничивающего прямоугольника, если ограничивающие
коробка меняется.
Избегайте любых изменений, которые требуют пересчета фильтра. Тот
включает любые изменения фильтруемого элемента или его дочернего содержимого.