Вернуться в каталог собеседований

СОБЕСЕДОВАНИЕ Middle Frontend разработчика С ИНТЕРЕСНЫМ ОТКРЫТИЕМ

Тренировочное собеседование Middle Frontend-разработчика с задачами по JavaScript, браузерному рендерингу и React. Отдельный блок посвящён расследованию влияния CodeSandbox на CSS-анимации.

Ayub Begimkulov
  • Опубликовано на YouTube:
  • Просмотры на YouTube: 26,1 тыс.
  • Лайки на YouTube: 698
Открыть на YouTube

Таймлайн

Коротко о видео

Это публичное тренировочное собеседование с Сергеем, frontend-разработчиком с примерно тремя годами коммерческого опыта, по JavaScript, браузерному рендерингу и React. Участники разбирают порядок выполнения задач в event loop, requestAnimationFrame, CSS-анимации, замыкания, JSX, мемоизацию, batching и устаревшие замыкания в React. После эксперимента автор отдельно исследует неожиданное поведение анимаций и связывает его с особенностями CodeSandbox, затем даёт кандидату развивающий фидбэк по ясности ответов и коммуникации.

Затронутые темы

Что взять на заметку

  • Для задач с Promise, микрозадачами, макрозадачами и requestAnimationFrame нужно объяснять конкретный порядок выполнения, не предполагая фиксированный порядок между setTimeout и requestAnimationFrame во всех ситуациях.
  • CSS transition запускается, когда браузер успел применить исходное состояние отдельно от нового; в обсуждённом подходе два вложенных requestAnimationFrame надёжнее одиночного requestAnimationFrame или setTimeout.
  • Нужно различать layout/reflow, paint и composite: изменения, влияющие на геометрию и flow, могут вызвать layout, а изменение цвета обычно ограничивается paint и composite.
  • По версии автора, тесты анимаций в CodeSandbox дали искажённый результат из-за MutationObserver, который измеряет документ и провоцирует forced reflow; важные браузерные эксперименты стоит перепроверять в отдельном локальном HTML-файле.
  • В React прямой вызов функции и рендер компонента через JSX отличаются границей компонента и правилами Hooks; функция, вызванная как обычная, не становится самостоятельным компонентом.
  • Мемоизацию React.memo, useMemo и useCallback стоит применять при реальной пользе от стабильной ссылки или предотвращения дорогого рендера, а не автоматически для каждого state.
  • Для стабильного callback с актуальными значениями можно хранить текущую функцию в useRef и возвращать неизменную обёртку; это обсуждается как альтернатива useCallback с зависимостями.
  • По фидбэку интервьюера, кандидату полезно сначала уточнять неясный вопрос и отвечать по его границам, а не перечислять всё известное по соседней теме.

Рекомендуем посмотреть