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

Условный провайдер через useFactory

Вопрос: Как через useFactory выбрать провайдер в зависимости от среды?

✅ Правильный ответ: Функция возвращает сервис по условию среды

Фабричная функция useFactory должна возвращать нужный сервис, проверяя текущую среду (например, environment.production).

❓ Вопрос

Опишите, как вы применяете CSS-переменные (custom properties) на практике. В каких случаях это особенно полезно?

✅ Ответ

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

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

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

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

Оптимизация ререндеринга в Angular

Вопрос: Какой подход уменьшает проверки изменений, отслеживая только входные параметры?

✅ Правильный ответ: Стратегия OnPush

OnPush уменьшает количество проверок изменений, отслеживая только входные параметры компонента.

❓ Вопрос

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

✅ Ответ

Для оптимизации загрузки тяжелого изображения используют техники ленивой загрузки, чтобы загружать изображения только при необходимости. Применяют форматы сжатия без потерь и с потерями (например, 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