Медленная анимация в браузере
Обновлено: 30.06.2024
В Animate.css v4 внесены критические изменения. Перед обновлением с версии 3.x и более ранних версий обратитесь к руководству по миграции.
Animate.css – это библиотека готовых кроссбраузерных анимаций для использования в ваших веб-проектах. Отлично подходит для акцентов, домашних страниц, ползунков и подсказок, привлекающих внимание.
Установка и использование
Установка
Установить с помощью npm:
Или установите с помощью Yarn (это будет работать только с соответствующими инструментами, такими как Webpack, Parcel и т. д. Если вы не используете какой-либо инструмент для упаковки или связывания своего кода, вы можете просто использовать метод CDN ниже):
Импортируйте его в свой файл:
Или добавьте его прямо на свою веб-страницу с помощью CDN:
Основное использование
После установки Animate.css добавьте к элементу класс animate__animated вместе с любыми именами анимаций (не забудьте префикс animate__!):
Вот оно! У вас есть анимированный элемент CSS. Супер!
Анимации могут улучшить UX интерфейса, но имейте в виду, что они также могут мешать вашим пользователям! Пожалуйста, ознакомьтесь с разделами с рекомендациями и рекомендациями, чтобы воплотить свои веб-приложения в жизнь наилучшим образом.
Использование @keyframes
Несмотря на то, что в библиотеке есть несколько вспомогательных классов, таких как анимированный класс, которые помогут вам быстро приступить к работе, вы можете напрямую использовать предоставленные ключевые кадры анимации . Это обеспечивает гибкий способ использования Animate.css в ваших текущих проектах без рефакторинга кода HTML.
Учтите, что некоторые анимации зависят от свойства animation-timing, установленного в классе анимации. Изменение или недекларирование может привести к неожиданным результатам.
Пользовательские свойства CSS (переменные CSS)
Начиная с версии 4, Animate.css использует настраиваемые свойства (также известные как переменные CSS) для определения продолжительности, задержки и итераций анимации. Это делает Animate.css очень гибким и настраиваемым. Нужно изменить продолжительность анимации? Просто установите новое значение глобально или локально.
Пользовательские свойства также упрощают изменение всех свойств анимации, ограниченных по времени, на лету. Это означает, что вы можете получить эффект замедленной съемки или покадровой съемки с помощью однострочного кода javascript:
Несмотря на то, что некоторые устаревшие браузеры не поддерживают настраиваемые свойства, Animate.css обеспечивает надлежащий запасной вариант, расширяя его поддержку для любого браузера, поддерживающего анимацию CSS.
Вспомогательные классы
Animate.css содержит несколько служебных классов, упрощающих его использование.
Классы задержки
Вы можете добавить задержки непосредственно в атрибут класса элемента, например:
Animate.css обеспечивает следующие задержки:
| Имя класса | Время задержки по умолчанию |
|---|---|
| animate__delay-2s | 2s |
| animate__delay-3s | 3s |
| animate__delay-4s | 4s |
| animate__delay-5s | 5s |
Предусмотренные задержки составляют от 1 до 5 секунд. Вы можете настроить их, задав для свойства --animate-delay большую или меньшую продолжительность:
Медленные, более медленные, быстрые и более быстрые классы
Вы можете управлять скоростью анимации, добавляя эти классы, как показано ниже:
| Имя класса | Время скорости по умолчанию |
|---|---|
| animate__slow | 2s |
| animate__slower | 3s |
| animate__fast | 800ms |
| animate__faster | 500 мс |
Класс animate__animated по умолчанию имеет скорость 1 с . Вы также можете настроить продолжительность анимации с помощью свойства --animate-duration глобально или локально. Это повлияет как на анимацию, так и на служебные классы. Пример:
Обратите внимание, что некоторые анимации имеют продолжительность менее 1 секунды. Поскольку мы использовали функцию CSS calc(), установка длительности с помощью свойства --animation-duration будет учитывать эти соотношения. Таким образом, когда вы изменяете глобальную продолжительность, все анимации будут реагировать на это изменение!
Повторяющиеся занятия
Вы можете управлять количеством итераций анимации, добавляя эти классы, как показано ниже:
| Имя класса | Количество итераций по умолчанию |
|---|---|
| animate__repeat-1 | 1 |
| animate__repeat-2 | 2 |
| animate__repeat-3 | 3 |
| animate__infinite | infinite |
Как и в случае с классами задержки и скорости, класс animate__repeat основан на свойстве --animate-repeat и имеет счетчик итераций по умолчанию, равный 1 . Вы можете настроить их, задав для свойства --animate-repeat большее или меньшее значение:
Обратите внимание, что animate__infinite не использует никаких настраиваемых свойств, и изменения в --animate-repeat не будут иметь никакого эффекта.Не забудьте прочитать раздел с рекомендациями, чтобы наилучшим образом использовать повторяющиеся анимации.
Рекомендации
Анимация может значительно улучшить UX интерфейса, но важно следовать некоторым рекомендациям, чтобы не переусердствовать и не ухудшить работу пользователей с вашими веб-приложениями. Соблюдение следующих правил должно обеспечить хорошее начало.
Значимые анимации
Не следует анимировать элемент просто так. Имейте в виду, что анимация должна прояснять намерение. Анимации, такие как поиск внимания (отскок, вспышка, пульсация и т. д.), следует использовать для привлечения внимания пользователя к чему-то особенному в вашем интерфейсе, а не только как способ придать ему "яркость".
Анимация входа и выхода должна использоваться для ориентации того, что происходит в интерфейсе, четко сигнализируя о переходе в новое состояние.
Это не означает, что вам следует избегать добавления игривости в интерфейс, просто убедитесь, что анимация не мешает вашему пользователю и что чрезмерное использование анимации не влияет на производительность страницы.
Не анимировать большие элементы
Избегайте этого, так как это не принесет большой пользы пользователю и, вероятно, только вызовет путаницу. Кроме того, велика вероятность того, что анимация будет некачественной, что приведет к плохому UX.
Не анимировать корневые элементы
Анимация тегов или возможна, но ее следует избегать. В некоторых сообщениях указывалось, что это может вызвать некоторые странные ошибки браузера. Кроме того, отказ от загрузки всей страницы вряд ли принесет пользу вашему UX. Если вам действительно нужен такой эффект, оберните страницу элементом и анимируйте ее, например:
Следует избегать бесконечных анимаций
Несмотря на то, что Animate.css предоставляет служебные классы для повторяющихся анимаций, включая бесконечную, следует избегать бесконечных анимаций. Это просто отвлечет ваших пользователей и может раздражать большую их часть. Так что используйте его с умом!
Учитывайте начальное и конечное состояние ваших элементов
Все анимации Animate.css включают свойство CSS с именем animation-fill-mode, которое управляет состояниями элемента до и после анимации. Вы можете прочитать больше об этом здесь. Animate.css по умолчанию использует animation-fill-mode: Both , но вы можете изменить его в соответствии со своими потребностями.
Не отключайте медиа-запрос с ограничением движения
Начиная с версии 3.7.0 Animate.css поддерживает медиа-запрос с ограничением движения, который отключает анимацию в зависимости от предпочтений операционной системы в отношении поддерживаемых браузеров (большинство современных браузеров поддерживают его). Это критически важная функция доступности, и ее никогда не следует отключать! Это встроено в браузеры, чтобы помочь людям с вестибулярными и судорожными расстройствами. Вы можете прочитать больше об этом здесь. Если для работы вашей веб-программы требуется анимация, предупредите пользователей, но не отключайте эту функцию. Вы можете сделать это легко только с помощью CSS. Вот простой пример:
Подсказки
Вы не можете анимировать встроенные элементы
Несмотря на то, что некоторые браузеры могут анимировать встроенные элементы, это противоречит спецификациям анимации CSS и в некоторых браузерах не работает или в конечном итоге перестает работать. Всегда анимируйте блочные или встроенные блочные элементы (контейнеры Grid и Flex, а также дочерние элементы также являются блочными элементами). Вы можете настроить отображение элемента: встроенный блок при анимации встроенного элемента.
Переполнение
Большинство анимаций Animate.css будут перемещать элементы по экрану и могут создавать полосы прокрутки на веб-сайте. Это можно сделать с помощью свойства overflow: hidden. Нет никакого рецепта, когда и где его использовать, но основная идея состоит в том, чтобы использовать его в родительском элементе, содержащем анимированный элемент. Вам решать, когда и как его использовать, это руководство поможет вам понять это.
Интервалы между повторами
К сожалению, сейчас это невозможно с помощью чистого CSS. Вы должны использовать Javascript для достижения этого результата.
Использование с Javascript
Вы можете делать множество других вещей с animate.css, когда вы комбинируете его с Javascript. Простой пример:
Вы можете определить, когда анимация заканчивается:
или изменить его продолжительность:
Вы также можете использовать простую функцию для добавления классов анимации и их автоматического удаления:
И используйте его следующим образом:
Если вам было трудно понять предыдущую функцию, взгляните на const, classList, стрелочные функции и обещания.
Миграция с версии 3.x и ниже
Animate.css версии 4 содержит некоторые улучшения, улучшенные анимации и новые анимации, поэтому его стоит обновить. Однако в нем также есть критическое изменение: мы добавили префикс для всех классов Animate.css — по умолчанию animate__ — поэтому прямой перенос невозможен.
Если вы используете сборщик, обновите импорт:
Обратите внимание, что в зависимости от конфигурации вашего проекта это может немного измениться.
В случае использования CDN обновите ссылку в HTML:
Пользовательские сборки
Пользовательские сборки из папки node_modules невозможны, поскольку мы не поставляем инструменты сборки в модуле npm.
Animate.css основан на npm, postcss + postcss-preset-env, что означает, что вы можете довольно легко создавать собственные сборки, используя будущий CSS с правильными резервными вариантами.
Прежде всего вам понадобится Node и все остальные зависимости:
Затем запустите npm start, чтобы скомпилировать собственную сборку. Будут сгенерированы три файла:
Например, если вы будете использовать только некоторые из "привлекающих внимание" анимаций, просто отредактируйте файл ./source/animate.css, удалите все @import и те, которые вы хотите использовать.
Теперь просто запустите npm start, и ваша высокооптимизированная сборка будет сгенерирована в корне проекта.
Изменение префикса по умолчанию
Изменить префикс анимации в пользовательской сборке довольно просто. Измените свойство префикса animateConfig в файле package.json и пересоберите библиотеку с помощью npm start :
Специальные возможности
Animate.css поддерживает медиа-запрос с ограничением движения, поэтому пользователи с чувствительностью к движению могут отказаться от анимации. На поддерживаемых платформах (в настоящее время все основные браузеры и ОС, включая мобильные) пользователи могут выбрать «уменьшить движение» в настройках своей операционной системы, и это отключит для них переходы CSS без каких-либо дополнительных действий.
Основная команда
Лицензия и участие
Animate.css находится под лицензией Гиппократа.
Содействие
Запросы на вытягивание — это то, что нужно. У нас есть только два правила отправки запроса на вытягивание: соответствие соглашению об именах (camelCase, категоризировано [угасание, отскок и т. д.]) и давайте посмотрим демонстрацию отправленных анимаций в ручке. Последнее очень важно.
Недавно в Google Lighthouse вышло обновление. Это также могло (отрицательно) повлиять на ваши оценки. Я кратко обратил на это внимание в сообщении на LinkedIn, но в этом сообщении в блоге я рассмотрю его более подробно.
Оглавление
Прерывистая анимация или медленная прокрутка. Возможно, вы сталкивались с этим раньше. Даже если реальная скорость загрузки страницы хорошая, низкая производительность все равно может повлиять на кликабельность посетителей и коэффициент конверсии.
Оптимизация не ограничивается только скоростью страницы. Для меня и Core Web Vitals оптимизация веб-сайта выходит за рамки скорости страницы.
CSS-анимации на смартфонах
Анимации могут быть тяжелыми в старых браузерах или операционных системах, когда анимация выполняется через центральный процессор (ЦП), который отвечает за выполнение задач, назначенных компьютером. Но даже на более новых компьютерах может случиться так, что он начнет дуть, когда анимация разворачивается в вашем веб-браузере из-за перегрузки ЦП.
То же самое относится и к мобильным телефонам. Даже если у вас более новый смартфон, это может повлиять на процессор вашего смартфона; Кроме того, анимация может выглядеть прерывистой, а батарея телефона посетителей вашего сайта будет разряжаться быстрее (я знаю, что мой).
Анимация JavaScript и CSS
Например, с помощью JavaScript можно реализовать анимацию кнопки при наведении курсора, раскрывающуюся навигацию, медленно убирающийся заголовок при прокрутке или изменение теней. jQuery значительно облегчил жизнь разработчикам внешнего интерфейса, помимо того, что можно было использовать нотацию CSS. Тем не менее, jQuery точно не известен своей скоростью, когда дело доходит до производительности анимации. С помощью свойства перехода CSS вы можете легко создавать анимации только в CSS. Но даже в этом случае необходимо проявлять бдительность.
Обработка анимации
Для анимации требуется вычислительная мощность. В зависимости от реализации анимации на веб-сайте, вся веб-страница может перерисовываться или не перерисовываться вашим браузером (более нескольких кадров в секунду). Вы вряд ли заметите это (если не знаете), но об этом нужно помнить. Вы можете предотвратить полную перерисовку веб-страницы в браузере, перенеся анимацию на графический процессор вашего компьютера.
Графический процессор против ЦП
GPU — это сокращение от Graphics Processing Unit, которое может выполнять задачи более известного CPU. Поэтому GPU используется для видеозадач. Задачи, которые выполняются через GPU (аппаратное обеспечение), могут выполняться параллельно, что позволяет анимациям выполняться более плавно. Аппаратное обеспечение, на котором выполняются вычисления, называется аппаратным ускорителем, поэтому этот метод называется аппаратным ускорением.
Улучшение анимации процессора
В результате перенос анимации на графический процессор, а не на графический процессор, дает еще одно преимущество: более плавная анимация, поскольку браузер сможет выполнять и отображать анимацию со скоростью более 60 кадров в секунду, а не 30 кадров в секунду. второй.
Еще одно преимущество заключается в том, что, поскольку такие анимации не загружаются, на них не будут влиять другие сторонние или собственные задачи JavaScript. Если какая-то другая задача заблокирует основной поток, анимация ЦП зависнет на разное время (например, в зависимости от ограничений устройства, поэтому ни у кого не будет одинакового взаимодействия с пользователем).
Однако, когда анимация перегружены на GPU, они могут продолжаться, даже если основной поток был заблокирован. Я создал демонстрацию, которая говорит сама за себя, как часть наглядной демонстрации влияния скорости загрузки страниц на чат-бот.
Как вы обращаетесь к графическому процессору с помощью CSS-анимации?
Достойный дополнительный вопрос: как заставить анимацию запускаться на графическом процессоре. Несколько свойств CSS заставят переложить работу на GPU, когда они будут анимированы посредством перехода свойств CSS. Это означает, что большинство свойств CSS в идеале не должны анимироваться.
Как это должно быть
Каждый разработчик внешнего интерфейса был виновен в изменении свойств левого, правого, верхнего, нижнего, высоты и/или ширины, например, с помощью jQuery или в сочетании с переходом CSS. Это лучший пример того, как не надо делать. В частности, используйте свойство преобразования в сочетании со многими возможными значениями для достижения того же эффекта; получение кнопок большего или меньшего размера или, например, изображений при наведении курсора мыши. На практике это может потребовать некоторого творчества.
Кроме того, укажите, какие именно свойства CSS будут анимированы посредством перехода. Одновременно можно анимировать несколько значений свойства преобразования.
Недостаток заключается в том, чтобы указать «все» в качестве свойства перехода, чтобы все свойства, от размеров до использования цвета, включались в любые изменения анимируемого заголовка. Это также приводит к тому, что браузер резервирует для этого место в памяти.
У вас есть более сложная анимация, которую нельзя выполнить только с помощью преобразования? Затем используйте какой-нибудь CSS-хак, чтобы обработка анимации была перенесена на GPU, а не на CPU. Одним из побочных эффектов является нарушение сглаживания текста во время анимации.
Используя свойство CSS will-change в качестве альтернативы описанному выше приему, вы указываете браузеру, что изменение определенного свойства CSS неизбежно. Однако к свойству will-change прилагается руководство, если вы хотите избежать постоянного принудительного использования требуемой памяти через браузер.
Как не надо делать анимацию, реальный пример использования
- к .site-header добавлен класс прокрутки;
- это изменит такие свойства, как height , padding-top и даже background-color ;
- это менее плавная анимация процессора;
- и вентилятор вашего компьютера или ноутбука может начать дуть.
Это переведенная статья ранее написанной статьи. Во время перевода сайт PhoneGap был отключен. Я мог предвидеть это, поскольку Adobe прекратила поддержку.
Альтернативой было бы позволить CSS перед/после псевдоэлемента отвечать за фон заголовка и регулировать его непрозрачность, чтобы имитировать прозрачный фон. Используя translateY в качестве значения преобразования, вы перемещаете элемент заголовка по вертикальной оси, чтобы он выглядел так, как будто заголовок движется вверх, чтобы занимать меньше места. Если бы они прочитали эту статью, они могли бы реализовать ее правильно, в сочетании с описанным выше творчеством.
Основные веб-жизненные показатели
Только три показателя составляют Core Web Vitals: LCP, CLS и FID. В то время как LCP — это метрика скорости страницы, а CLS — метрика UX, FID — единственная метрика, ориентированная на производительность. Однако есть вероятность, что веб-анимация станет частью Core Web Vitals, а также частью новой метрики. Или это может быть объединено с FID. Только время
(а к тому времени и Google) покажет.
Анимацию в Интернете можно выполнять с помощью SVG , JavaScript , включая WebGL , анимацию CSS , анимированные GIF и даже анимированные PNG и другие типы изображений. Затраты на анимацию CSS-свойства могут варьироваться от одного свойства к другому, а анимация ресурсоемких CSS-свойств может привести к перебоям в работе браузера, поскольку он изо всех сил пытается достичь плавной частоты кадров.
Для анимационных медиафайлов, таких как видео и анимированные GIF-файлы, основной проблемой производительности является размер файла. Самая большая проблема заключается в том, чтобы загрузить размер файла достаточно быстро, чтобы не оказывать отрицательного влияния на производительность. Анимации на основе кода, будь то CSS, SVG, , webGL или другие анимации JavaScript, могут вызвать проблемы с производительностью, даже если пропускная способность невелика. Эти анимации могут потреблять ресурсы ЦП и/или вызывать зависания.
Хотя производительность зависит от конкретной системы и ее нагрузки, инструменты производительности могут помочь вам понять работу, которую браузер выполняет для отображения вашего сайта, а также помочь вам предотвратить и диагностировать проблемы в случае их возникновения.
Пользователи ожидают, что все взаимодействия с интерфейсом будут плавными, а все пользовательские интерфейсы — отзывчивыми. Анимация может помочь сделать сайт более быстрым и отзывчивым, но анимация также может сделать сайт более медленным и дерганым, если она не сделана правильно. Отзывчивые пользовательские интерфейсы имеют частоту кадров 60 кадров в секунду (fps). Хотя не всегда возможно поддерживать 60 кадров в секунду, важно поддерживать высокую и постоянную частоту кадров для всех анимаций. Давайте посмотрим, как мы можем использовать инструменты браузера для проверки частоты кадров. Мы также обсудим несколько советов по созданию и поддержанию высокой и стабильной частоты кадров.
Частота кадров инструмента разработчика и каскадные диаграммы дают представление о работе, которую браузер выполняет для анимации кода. С помощью этих инструментов вы можете измерять частоту кадров анимации приложения и диагностировать узкие места в производительности, если таковые обнаружены.
С помощью анимации CSS вы указываете несколько ключевых кадров, каждый из которых использует CSS для определения внешнего вида элемента на определенном этапе анимации. Браузер создает анимацию как переход от каждого ключевого кадра к следующему.
По сравнению с анимацией элементов с помощью JavaScript, CSS-анимацию создавать проще. Они также могут повысить производительность, так как дают браузеру больше контроля над тем, когда отображать кадры, и при необходимости отбрасывать кадры.
Однако затраты производительности на изменение свойства CSS могут различаться в зависимости от свойства. Принято считать, что 60 кадров в секунду — это скорость, при которой анимация выглядит плавной. При скорости 60 кадров в секунду у браузера есть 16,7 миллисекунды для выполнения сценариев, пересчета стилей и макета, если это необходимо, и перерисовки обновляемой области. Медленные скрипты и анимация дорогостоящих свойств CSS могут привести к зависаниям, поскольку браузер изо всех сил пытается достичь плавной частоты кадров.
Водопад рендеринга
Процесс, используемый браузером для отображения изменений на странице, когда элемент анимирует свойства CSS, можно описать как каскад, состоящий из следующих шагов:
- Пересчитать стиль: при изменении свойства элемента браузер должен пересчитать вычисленные стили.
- Макет: затем браузер использует рассчитанные стили для определения положения и геометрии элементов. Эта операция называется "макет", но иногда ее также называют "перекомпоновка".
- Отрисовка: наконец, браузеру необходимо перерисовать элементы на экране. Последний шаг в этой последовательности не показан: страница может быть разделена на слои, которые рисуются независимо друг от друга, а затем объединяются в процессе под названием «Композиция».
Процесс, используемый браузером для отображения обновленных изменений элемента холста, отличается. В сценарии макет страницы не меняется. Скорее, страница многократно перерисовывается на основе функций JavaScript canvas API. Когда холст анимирует рисунок, анимацию холста можно описать как водопад, состоящий из следующих шагов:
Эти последовательности должны помещаться в один кадр, так как экран не обновляется до тех пор, пока они не будут завершены.
Стоимость свойства CSS
В контексте водопада рендеринга одни свойства стоят дороже, чем другие:
Свойства, которые не влияют на геометрию или положение, но не отображаются в своем собственном слое, не запускают компоновку.
< img class="lazyload" data-src="https://developer.mozilla.org/en-US/docs/Web/Performance/Animation_performance_and_frame_rate/layout-faint.jpg" />
Примечание. На веб-сайте CSS Triggers показано, какая часть водопада активируется для каждого свойства CSS, а также информация для большинства свойств CSS в зависимости от движка браузера.
Пример: маржа или трансформация
В этом разделе мы увидим, как Waterfall может подчеркнуть разницу между анимацией с использованием поля и анимацией с использованием преобразования.
Цель этого сценария не в том, чтобы убедить вас, что анимация с использованием полей — это всегда плохая идея. Он призван продемонстрировать, как эти инструменты могут дать вам представление о том, как браузер обрабатывает ваш сайт, и как вы можете применить эту информацию для диагностики и устранения проблем с производительностью.
Если вы хотите поиграть, демо-сайт находится здесь. Это выглядит так:
У него есть два элемента управления: кнопка для запуска/остановки анимации и группа переключателей, позволяющая выбрать анимацию с помощью margin или анимацию с помощью transform .
Есть ряд элементов, и мы добавили фон с линейным градиентом и тень блока к каждому элементу, потому что оба эти эффекта являются относительно дорогими для рисования.
Есть также видеоверсия этого пошагового руководства:
Анимация с использованием поля
Оставив параметр "Использовать поля" установленным, запустите анимацию, откройте инструмент "Производительность" и сделайте запись. Вам нужно будет записать всего несколько секунд.
Откройте первую запись. То, что вы увидите, во многом зависит от вашего компьютера и загрузки системы, но это будет примерно так:
< /p>
Здесь показаны три разных представления: (а) обзор водопада, (б) частота кадров и (в) сведения о временной шкале.
Обзор водопада
Это сжатый вид водопада. Преобладание зеленого цвета говорит нам о том, что мы тратим много времени на рисование.
Частота кадров
Это показывает частоту кадров. Средняя частота кадров здесь составляет 46,67 кадра в секунду, что значительно ниже целевого показателя в 60 кадров в секунду. Хуже, однако, то, что частота кадров очень неровная, с большим количеством провалов в двадцатые и подростковые. Маловероятно, что вы увидите здесь плавную анимацию, особенно если вы добавите взаимодействие с пользователем.
Водопад
В остальной части записи показан вид на водопад. Если вы прокрутите это, вы увидите такой шаблон:
< /p>
Это показывает водопад рендеринга. В каждом кадре анимации мы пересчитываем стили для каждого элемента, затем выполняем один макет, затем перерисовываем.
Вы можете видеть, что краска здесь особенно снижает производительность. На снимке экрана выше мы выделили операцию рисования, и поле справа показывает, что она заняла 13,11 мс. При нашем общем бюджете всего 16,7 мс неудивительно, что нам не хватает стабильно высокой частоты кадров.
Вы можете поэкспериментировать с этим: попробуйте удалить тень блока с помощью Инспектора страниц и посмотрите, как это повлияет на время рисования. Но далее мы увидим, как использование преобразования вместо поля полностью устраняет эти дорогостоящие краски.
Анимация с использованием преобразования
Теперь переключите переключатель на веб-странице на "Использовать преобразование" и сделайте новую запись. Это будет выглядеть примерно так:
< /p>
Обзор водопада
По сравнению с версией, использующей поля, мы видим намного меньше зеленого и больше розового, что может быть связано либо с макетом, либо с пересчетом стиля.
Частота кадров
По сравнению с версией, использующей поля, это выглядит неплохо. В среднем мы получаем почти 60 кадров в секунду, и, если не считать одного провала в начале, мы получаем стабильно высокую частоту кадров.
Водопад
На временной шкале показана причина повышения частоты кадров. По сравнению с версией, использующей поля, мы не тратим время на макет или (что более важно в данном случае) на отрисовку:
< /p>
В данном случае использование преобразования значительно повысило производительность сайта, а инструменты повышения производительности смогли показать, как и почему это произошло.
У меня есть анимация, которая отлично работает в настольных версиях Firefox и Chrome, но может быть довольно медленной на мобильных устройствах (проверено в Chrome на Android).
Есть идеи, что я делаю неправильно?
Текст был успешно обновлен, но возникли следующие ошибки:
mbensch прокомментировал 2 марта 2020 г. •
Я только что обнаружил значительную разницу в производительности между экранами с исходным разрешением и экранами с режимом HiDPI с масштабированием пикселей. Большинство телефонов в наши дни выполняют какое-то дробное масштабирование для повышения четкости текста, то же самое на дисплеях Mac Retina и дисплеях 4K или 5K, работающих в HiDPI. Я изучаю проблему, чтобы получить более конкретную информацию, но, по крайней мере, это то, что я смог наблюдать до сих пор.
Анимация на дисплее без дробного масштабирования пикселей (OSX):
Тот же код на дисплее с дробным масштабированием пикселей (OSX):
Протестировано на MacBook Pro 2018 г., 6-ядерном процессоре Intel Core i9 с тактовой частотой 2,9 ГГц, оперативной памяти 32 ГБ, Radeon Pro 560X, Firefox 73.0.1
Обновление:
Мы наблюдаем ту же проблему с анимацией, которой нет в react-spring, и она значительно хуже, чем анимация с использованием react-spring. В нашем тестировании Chrome, похоже, не пострадал от этого. Мы копаем глубже.
Комментарий CloudBop от 10 марта 2020 г.
Я хотел бы отметить, что я столкнулся с этим при анимации большого количества элементов SVG. (Скоро может появиться демоверсия. )
Во-первых, следует избегать анимации чего-либо, кроме непрозрачности и преобразования.
В Интернете есть немало статей о том, как повысить производительность мобильных браузеров. Но все они ведут себя по-разному и с разными двигателями, так что это довольно сложно. Свойства CSS, такие как translate3d и will-change для повышения производительности. Это становится сложным.
Очень интересно узнать, что другие наблюдают увеличение производительности при увеличении масштаба на мобильных устройствах.
В моем случае FPS был бы эффективен при увеличении, но дрожал при уменьшении на обоих iPhone6 некоторых ранних Android.
Виной был атрибут непрозрачности элемента onClick. Это даже не элемент, который анимировался. Я изменил атрибут непрозрачности на fillOpacity.
Я думаю, это потому, что непрозрачность влияла как на непрозрачность заливки, так и на непрозрачность обводки. Я анимировал transform: translate() scale() для элемента, который был племянником элемента onClick.
Возможно, средство визуализации решило, что, поскольку элементы перекрываются, ему нужно выполнить дополнительную работу над визуализацией или что-то в этом роде.
Также возможно, что если анимированные свойства CSS конфликтуют с react-spring, это может значительно увеличить рабочую нагрузку. IE, если у вас есть класс с css-переходом, который анимируется с помощью react-spring.
В моем случае производительность значительно увеличилась на iPhone6. Он по-прежнему медленный на старых телефонах Android старше 2 лет. С7 наверное. Он рендерится внутри SVGDOM, поэтому я не думаю, что можно получить какой-либо прирост производительности от свойств CSS, таких как will-change/translate3d
Однако React-spring довольно хорош. Снижение производительности не всегда портит впечатление. В моем случае, когда производительность начинает снижаться, это не кажется очевидным, если вы не знаете исходную скорость анимации. Только на настоящих старых iPad я вижу серьезные проблемы с ошибками.
Читайте также: