Есть CSS с двумя анимациями, которые тормозят: одна двигает блок, другая меняет его размер. В чём проблема и как сделать анимации плавными, сохранив эффект?
Что проверяет этот вопрос
Понимание, какие CSS-свойства вызывают reflow и как анимировать только на GPU
Паспорт вопроса
- Уровень
- middle и выше
- Тип
- теория
Из записи реального собеседования: Frontend на 250к (30.10.2025)
Как отвечать на вопросы темы «Производительность и SEO»
Начинай с того, что измеряем и чем: метрика, инструмент, порог. Без числа ответ звучит как пересказ статьи. Дальше — причина и что делать, и обязательно цена решения: любая оптимизация чем-то платится. Если метрика про пользователя, объясни, что именно он чувствует.
Это методика ответа, а не готовый ответ: эталонные разборы и проверка твоего ответа — внутри тренажёра.
Что спросят дальше — похожие вопросы темы «Производительность и SEO»
- В коде есть вложенный цикл: для каждого пользователя проверяется, есть ли его id в массиве id. Как оптимизировать эту проверку?middle и выше
- В компоненте есть подписка на событие scroll, обновляющая состояние, и вложенный тяжёлый компонент. Всё ли здесь в порядке и как избежать лишних ререндеров тяжёлого компонента?senior
- В чате 5000 сообщений, и при рендере всего списка сразу скролл тормозит. Как оптимизировать такую ленту?middle и выше
- Где разместить критический CSS и остальной CSS на странице?junior и выше
- Зачем нужен бесконечный скролл и как его реализовать?middle и выше
- Зачем фронтенд-разработчику знать этапы рендеринга (layout, paint) и как это применять на практике?middle и выше
- Что такое критический путь рендеринга и как его сократить?junior и выше
- Интерфейс лагает при вводе в поле. Как найдёшь причину?junior и выше
Проверить, как ты ответишь именно на него
Знать формулировку мало: на собеседовании важно объяснить это вслух за две минуты. Тренажёр задаёт вопрос голосом, записывает ответ и разбирает его по четырём критериям найма — что упустил, где потерял структуру, как ответил бы сильный кандидат. 15 ответов в месяц бесплатно, без карты.