Подход к работе
Один и тот же индикатор вкладки может выглядеть плавно в покое и дёргаться во время навигации. Навык разделяет два вопроса: сколько работы по отрисовке запускает каждый кадр и конкурирует ли драйвер анимации с другой работой в основном потоке. Он начинает со свойств и драйвера, а не добавляет подсказки для GPU по умолчанию.
Источник также проверяет менее очевидные пути: обновление состояния React на каждом кадре, наследуемую переменную CSS, меняющуюся в большом поддереве, дорогое размытие и сокращённые трансформации Motion. Рекомендации привязаны к коду и учитывают поведение браузера и устройства; быстрый настольный компьютер не считается доказательством исправления.
Ожидаемые результаты
- Перечень анимируемых элементов, драйверов и свойств
- Выводы с указанием причин, расположением в файлах и предложениями «до/после»
- Чёткое разделение между анализом кода и данными, записанными на устройстве
От входных данных к выводам
- 01Составьте перечень анимаций в области проверки
Перечислите каждый элемент, драйвер анимации и свойство, а также одновременную работу, например навигацию или гидратацию. Прежде чем оценивать стоимость, раскройте общие переходы и сокращённые записи библиотек.
- 02Найдите вероятную причину
Сначала изучите работу компоновки и отрисовки, затем конкуренцию за основной поток, рендеры React на каждом кадре и пересчёт стилей. Связывайте каждое предлагаемое изменение с конкретным путём, а не называйте его общей оптимизацией.
- 03Профилируйте реальное взаимодействие
Используйте записи производительности браузера, чтобы изучить потерянные кадры и длинные задачи. По возможности проверьте на реальном целевом телефоне: замедление ЦП на настольном компьютере не воспроизводит слабый GPU или ограничения памяти устройства.
- 04Сообщайте с учётом пределов проверки
Укажите расположение в файлах, причины и предложения «до/после», упорядоченные по ожидаемой стоимости. Отметьте, что выведено из кода, а что измерено, и дождитесь разрешения на применение исправлений.