ОМ: 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

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