React Frontend Developer

Question 1

Объясните разницу между последовательным и параллельным выполнением асинхронных функций. Как работают Promise.all() и Promise.allSettled()?

Accepted Answer

Последовательное выполнение асинхронных функций означает, что каждая следующая функция начинается только после завершения предыдущей, тогда как параллельное выполнение позволяет нескольким функциям выполняться одновременно.

Метод Promise.all() запускает несколько промисов параллельно и возвращает результат, когда все они успешно завершатся, а Promise.allSettled() возвращает результат независимо от того, завершился ли каждый промис успехом или ошибкой.

Question 2

Чем debounce отличается от throttle?

Accepted Answer

debounce выполняет функцию только после паузы в событиях, а throttle — не чаще одного раза за заданный интервал времени. Debounce подходит, когда важен финальный результат, а throttle — когда важна регулярность выполнения. Эти подходы решают похожие задачи, но применяются в разных сценариях. Выбор зависит от поведения, которое ожидается от интерфейса.

Question 3

Что такое throttle?

Accepted Answer

Throttle — это приём, который ограничивает частоту вызова функции. Функция выполняется не чаще заданного интервала времени. Все вызовы между интервалами игнорируются или объединяются. Это часто используется для оптимизации производительности.

Question 4

Как искать bottleneck в производительности веб-приложений?

Accepted Answer

Поиск bottleneck начинается с измерения ключевых метрик, таких как время загрузки страницы, время ответа сервера и потребление ресурсов. Инструменты браузера (DevTools) помогают анализировать рендеринг и сетевые запросы. На серверной стороне используются профайлеры и мониторинг для выявления медленных запросов или неэффективного кода. Систематический подход позволяет локализовать проблему и применить целенаправленные оптимизации.

Question 5

В чём преимущество использования готовых утилит debounce/throttle из lodash перед самописными решениями?

Accepted Answer

Готовые утилиты из lodash, такие как debounce и throttle, предоставляют надёжные реализации с учётом множества граничных случаев, которые сложно предусмотреть в самописных решениях. Они оптимизированы для производительности, поддерживают опции вроде leading и trailing, и протестированы в различных сценариях. Использование lodash снижает риск ошибок и ускоряет разработку, особенно в крупных проектах.

Question 6

Что нужно делать с setTimeout при реализации TTL-кэша?

Accepted Answer

При реализации TTL-кэша нужно хранить идентификатор таймера для каждого ключа и очищать его при удалении записи или обновлении TTL. Иначе таймеры будут держать ссылки на данные и вызывать утечки памяти. Используйте clearTimeout для отмены старых таймеров.

Question 7

Как лучше организовать хранение данных для кэша с TTL, включая идентификатор таймера и значение?

Accepted Answer

Для кэша с TTL лучше использовать структуру, где ключ — идентификатор, значение — данные, а отдельно хранится время истечения. Можно использовать объект с полями value и expiresAt, или Map с таймерами. Это позволяет легко проверять и удалять устаревшие записи.

Question 8

Какие недостатки у подхода к очистке кэша, где для каждого элемента с TTL создаётся отдельный таймер?

Accepted Answer

Создание отдельного таймера для каждого элемента с TTL приводит к высоким накладным расходам на память и CPU, особенно при большом количестве элементов. Таймеры могут не срабатывать точно, а их управление усложняет код. Лучше использовать ленивую проверку срока действия при доступе или фоновую периодическую очистку.

Question 9

Нужно отправить несколько запросов одновременно и продолжить выполнение только после того, как все они завершатся (независимо от resolve/reject). Какой статический метод промисов для этого нужен?

Accepted Answer

Нужен метод Promise.allSettled. Он принимает массив промисов и возвращает новый промис, который разрешается после завершения всех переданных промисов, независимо от того, успешно они завершились или с ошибкой. Результатом будет массив объектов с полями status ('fulfilled' или 'rejected') и value/reason. Это удобно, когда нужно дождаться всех запросов, но не прерывать выполнение при ошибках.

Question 10

Как дождаться результатов нескольких запросов к серверу и выполнить действие на их основе? Какие методы Promise для этого существуют?

Accepted Answer

В JavaScript для ожидания нескольких запросов используют методы Promise: Promise.all ждёт все и падает при первой ошибке, Promise.allSettled ждёт все и возвращает статусы, Promise.race возвращает первый завершившийся, Promise.any — первый успешный. Обычно применяют Promise.all с async/await, чтобы запустить запросы параллельно и обработать массив результатов.

Вопросы React Frontend Developer