❓ Вопрос

Опиши конкретные шаги, которые ты предпримешь для оптимизации загрузки тяжелого изображения на странице.

✅ Ответ

Для оптимизации загрузки тяжелого изображения используют техники ленивой загрузки, чтобы загружать изображения только при необходимости. Применяют форматы сжатия без потерь и с потерями (например, WebP) для уменьшения размера файла. Используют адаптивные изображения с разными разрешениями и srcset для показа подходящего варианта в зависимости от устройства. Также важно применять кэширование и CDN для ускорения доставки ресурсов.

#lexicon #собеседование #angular #middle #frontend_performance #frontend_core

#quiz #lexicon #собеседование #angular #senior #frontend_dom

📘 Разбор опроса

Оптимизация DOM: механизмы браузера

Вопрос: Что вызывает перерасчёт стилей и layout, замедляя рендеринг?

✅ Правильный ответ: Частые изменения DOM

Частые изменения DOM заставляют браузер пересчитывать стили и перестраивать layout, что снижает производительность.

#quiz #lexicon #собеседование #angular #junior #frontend_dom

📘 Разбор опроса

Порядок построения DOM и CSSOM

Вопрос: В каком порядке браузер создаёт DOM и CSSOM при загрузке страницы?

✅ Правильный ответ: Сначала DOM, потом CSSOM

Браузер сначала парсит HTML и строит DOM, затем анализирует CSS и формирует CSSOM.

❓ Вопрос

Какие преимущества даёт использование юнит-тестов при разработке фронтенда и как они влияют на качество продукта?

✅ Ответ

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

#lexicon #собеседование #angular #junior #frontend_testing #frontend_core

#quiz #lexicon #собеседование #angular #senior #angular_reactive

📘 Разбор опроса

Композиция потоков RxJS в Angular

Вопрос: Какой оператор RxJS используют для параллельного выполнения HTTP-запросов?

✅ Правильный ответ: forkJoin

forkJoin выполняет несколько Observable параллельно и возвращает массив результатов.

❓ Вопрос

Объясните, как работает механизм Shadow DOM и какие преимущества он дает при создании веб-компонентов? Приведите пример использования Shadow DOM в проекте.

✅ Ответ

Shadow DOM — это технология, позволяющая инкапсулировать внутреннюю разметку и стили компонента, создавая изолированное дерево DOM, которое не влияет на основной документ и не подвержено внешним стилям. Она обеспечивает отдельный CSS scope и защищает компоненты от конфликтов стилей и скриптов. При использовании Shadow DOM веб-компоненты становятся более модульными и переиспользуемыми. Например, в проекте может быть создан кастомный элемент с внутренней структурой и стилями, инкапсулированными в Shadow Root, что предотвращает их затенение или переопределение.

#lexicon #собеседование #angular #senior #frontend_dom #frontend_core

#quiz #lexicon #собеседование #angular #senior #angular_http

📘 Разбор опроса

HttpInterceptor: повторные запросы и кеширование

Вопрос: Какой оператор RxJS используют в HttpInterceptor для повторных запросов?

✅ Правильный ответ: retry()

retry() повторяет запрос при ошибке. repeat() для успешных запросов. replay() кеширует потоки.

❓ Вопрос

Расскажите конкретный пример, как через фабрику провайдера (useFactory) реализовать условный выбор провайдера в зависимости от среды (например, production или development). Какие ключевые моменты нужно учесть?

✅ Ответ

Для условного выбора провайдера через useFactory необходимо реализовать функцию, которая возвращает нужный сервис в зависимости от текущей среды (например, process.env.NODE_ENV или Angular environment). Ключевые моменты: инжектирование необходимых зависимостей в фабрику через параметры, надежная проверка условий для выбора нужного класса, а также корректная регистрация провайдера с useFactory в массиве providers модуля или компонента. Это позволяет гибко подменять реализации без дополнительного изменения кода.

#lexicon #собеседование #angular #senior #angular_injection

⚡️ Как Angular понимает, что нужно обновить UI?

Многие думают, что это “магия фреймворка”.
На самом деле — это связка Zone.js + Change Detection.

Разобрал в новой статье:

— что именно делает Zone.js (и чего он НЕ делает)
— как Angular узнаёт про async-операции
— зачем нужен NgZone
— как работает OnPush
— что меняется в 2026 с signals и zoneless-подходом
— и что по этому спрашивают на собеседованиях

Если хочешь наконец-то понять механизм обновления UI, а не просто «так работает» — статья обязательна к прочтению 👇

🔗 Zone.js и механизм обновления UI в Angular

❓ Вопрос

Как ты управляешь жизненным циклом подписок в Angular компонентах, чтобы избежать утечек памяти? Приведи конкретный пример кода или подход, который используешь.

✅ Ответ

Управление жизненным циклом подписок в Angular компонентах предполагает своевременное отписывание, чтобы предотвратить утечки памяти. Часто используют оператор takeUntil с Subject, который вызывается в ngOnDestroy, либо применяют pipe с take или first для автоматического завершения подписки. Например, в ngOnDestroy вызывается next и complete у Subject, что завершает все подписки, связанные через takeUntil. Такой подход обеспечивает аккуратное управление ресурсами и поддерживает производительность приложения.

#lexicon #собеседование #angular #middle #angular_reactive

❓ Вопрос

Какие хуки из Angular применяете для оптимизации и контроля жизненного цикла HTTP-запросов в компонентах? Приведите примеры их использования.

✅ Ответ

Для управления жизненным циклом HTTP-запросов в компонентах Angular применяются хуки ngOnInit и ngOnDestroy. В ngOnInit обычно инициализируют и запускают HTTP-запросы через HttpClient. В ngOnDestroy важно отписываться от Observable из HTTP-запроса, чтобы избежать утечек памяти, используя подходы с ручной отпиской или оператор takeUntil. Это обеспечивает контроль и очистку ресурсов при уничтожении компонента.

#lexicon #собеседование #angular #junior #angular_http

❓ Вопрос

Как можно оптимизировать время сборки проекта при использовании Webpack, и какие инструменты для этого применяешь?

✅ Ответ

Для оптимизации времени сборки в Webpack применяются техники кэширования, такие как использование кеша загрузчиков (loader cache) и плагина HardSourceWebpackPlugin. Также важна настройка точек входа и разделение кода (code splitting) для уменьшения размера бандлов. Применение многопроцессного или многопоточного запуска через плагин thread-loader и настройка режима разработки с быстрым обновлением (Hot Module Replacement) также ускоряют сборку.

#lexicon #собеседование #angular #middle #frontend_tooling #frontend_core

#quiz #lexicon #собеседование #angular #junior #angular_modules