ОМ: Junior/junior+ frontend интервью.

YOUTUBE · 15.11.2025 10:10

Ключевые темы и таймкоды

Введение и опыт работы

0:02
  • Рассказ о работе в небольшой компании, использование React и Shopify.
  • Разработка React-приложений с нуля, интеграция платежной системы Stripe.
  • Решение продолжить работу с React из-за большего количества вакансий и лучшей оплаты.

Техническая часть собеседования

1:35
  • Обсуждение процесса открытия браузера и запроса к сайту.
  • Получение IP-адреса и подключение к серверу.
  • Рендеринг страницы и обработка скриптов.

Парсинг и рендеринг

3:06
  • Получение объектной модели документа и рендеринг.
  • Обработка скриптов и их влияние на рендеринг.
  • Способы отложенного выполнения скриптов.

Проблемы с анимациями

7:03
  • Ограничения браузера на количество запросов к одному хосту.
  • Проблемы с анимацией высоты элемента и влияние на производительность.
  • Использование GPU для анимации.

Объявление переменных и ключевое слово this

9:54
  • Различия между старым и новым синтаксисом объявления переменных.
  • Работа с ключевыми словами this и this.bind.
  • Потеря контекста функции и способы её исправления.

Event Loop и микротаски

15:51
  • Event Loop как механизм работы с синхронным кодом.
  • Разделение на микротаски и макротаски.
  • Промисы как генераторы микротасок.

Порядок выполнения консольных логов

17:04
  • Сначала выводится первый консольный лог.
  • Затем шестой, третий и второй.
  • Четвертый консольный лог не выполняется из-за промиса.
  • Пятый консольный лог выполняется в конце.

Работа с промисами

18:22
  • Промис регистрируется в очереди с нулевой задержкой.
  • Функция, переданная в промис, выполняется после основного кода.
  • Консольные логи выполняются в порядке: первый, третий, четвертый, шестой, пятый, второй.

Реализация функции с инкрементом

21:28
  • Функция должна выводить инкремент при каждом вызове.
  • Используется замыкание для сохранения состояния.
  • Переменная должна быть объявлена и возвращена в функции.

Работа с деревьями

29:00
  • Задача: собрать значение дерева и вывести его.
  • Дерево имеет объекты с двумя параметрами: вю и чилдер.
  • Рекурсивный обход дерева может переполнить стек вызовов.

Решение задачи с очередью

33:19
  • Использование очереди для обхода дерева.
  • Добавление и удаление узлов в очереди.
  • Добавление условия выхода для предотвращения переполнения стека.

Реализация кнопки на пустой странице

35:50
  • В рандомных точках документа появляются кнопки.
  • При клике на кнопку выводится строка в консоль.
  • Использование setTimeout для рандомного появления кнопок.

Обработка событий в React

37:20
  • Обсуждение возможности добавления обработчика событий к кнопкам.
  • Упоминание делегирования событий и его использования для обработки событий на родительских элементах.

Преимущества и недостатки React

38:52
  • React позволяет эффективно перерисовывать элементы благодаря виртуальному DOM.
  • Обсуждение, как React избегает перерисовки всего дерева при изменении элементов.
  • Упоминание использования кэширования для оптимизации рендеринга.

Оптимизация производительности в React

41:22
  • Основная проблема производительности React — лишние перерисовки.
  • Использование инструментов, таких как memoization, для минимизации перерисовки компонентов.
  • Пример использования memoization для оптимизации рендеринга.

Управление состоянием в React

43:36
  • Обсуждение оптимизации рендеринга в React.
  • Упоминание проблемы с вызовом setState на верхнем уровне.
  • Пример использования useEffect для пропуска первого рендера.

Доступ к дочерним компонентам через refs

47:22
  • Обсуждение использования refs для доступа к дочерним компонентам.
  • Пример получения доступа к дочернему компоненту через refs.
  • Упоминание свойства current у refs для предотвращения ререндеринга.

Обработка множественных кликов для перерисовки

49:21
  • Обсуждение проблемы множественных кликов, вызывающих перерисовку графика.
  • Предложение использовать debounce для управления временем выполнения запросов.
  • Упоминание возможных проблем с таймаутами и их влияние на производительность.

Советы по подготовке к собеседованию

51:47
  • Вопросы на собеседовании могут быть сложнее, чем ожидалось.
  • Важно изучить, как работает браузер, чтобы ответить на вопросы о его работе.
  • Можно углубиться в детали, такие как система рукопожатий и парсинг.

Дополнительные советы и рекомендации

52:47
  • Важно упомянуть скрипты и их загрузку.
  • Вопросы могут быть с подвохом, например, по делегированию событий.
  • На реальном собеседовании лучше уточнить у собеседника, можно ли гуглить.

Завершение трансляции и обратная связь

54:00
  • Рекомендуется сделать презентацию на собеседовании.
  • Вопросы можно получить в виде документа.
  • Зрители могут оставить свои комментарии и вопросы.

Личное мнение и опыт

54:59
  • Вопросы на собеседовании были интересными и сложными.
  • Автор старается выбирать необычные и интересные вопросы.
  • Автор считает себя мидл-уровня, но иногда собеседуется на сеньор-позиции.

Завершение трансляции

56:23
  • Автор завершил трансляцию.