React Frontend Developer

Question 1

Как реализовать ленивую загрузку (lazy loading) элементов на странице с помощью атрибута loading? Какие есть альтернативные методы?

Accepted Answer

Ленивая загрузка — это техника, которая позволяет откладывать загрузку изображений или фреймов до тех пор, пока они не появятся в видимой области экрана. Атрибут loading="lazy" в теге или

Question 2

Как реализовать "ленивые" вычисления (lazy evaluation) в JavaScript?

Accepted Answer

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

Question 3

Объясните концепцию code splitting и lazy loading в React.

Accepted Answer

Code splitting — это техника, позволяющая разбивать приложение на небольшие части, которые загружаются по мере необходимости. Lazy loading (ленивая загрузка) загружает эти части только тогда, когда они действительно нужны, что помогает уменьшить размер начальной загрузки и повышает скорость работы приложения.

Question 4

Как работает ленивый роутинг (lazy loading) в React Router DOM?

Accepted Answer

Ленивый роутинг загружает компоненты маршрутов только при их необходимости. Это достигается использованием функции React.lazy в сочетании с динамическим импортом (import()), что позволяет уменьшить начальный размер бандла.

Question 5

Как использовать Suspense и lazy для загрузки компонентов маршрутов?

Accepted Answer

React.lazy используется для ленивого импорта компонентов, а Suspense позволяет показывать индикатор загрузки, пока компонент загружается.

Question 6

Для чего используется Lazy Loading? В чём его плюсы и минусы?

Accepted Answer

Lazy Loading автоматически загружает связанные объекты при первом обращении к навигационному свойству. Плюс — вы не загружаете всё сразу, экономя ресурсы. Минус — «N+1» проблема: при переборе коллекции делается много отдельных запросов, что сильно бьёт по производительности.

Question 7

Как исследовать причину фризов при скролле LazyColumn в Jetpack Compose?

Accepted Answer

Используйте Layout Inspector, CPU Profiler и Composition Tracing для анализа. Причины часто в тяжёлых recomposition и modifiers.

Question 8

Что такое lazy sequence? В чём его преимущество?

Accepted Answer

Lazy sequence — это последовательность, которая вычисляет элементы только при обращении к ним. Преимущество: экономия памяти и вычислений, особенно при работе с большими данными или цепочками преобразований.

Question 9

Чем отличаются Collection и LazyCollection?

Accepted Answer

Collection работает со всеми данными сразу в памяти, а LazyCollection обрабатывает элементы по одному по мере необходимости. Collection загружает все данные одновременно, что может потребовать много памяти при работе с большими наборами данных. LazyCollection использует генераторы PHP и обрабатывает элементы лениво, экономя память. LazyCollection особенно полезен для работы с большими файлами, обработки больших наборов данных из БД или потоковой обработки.

Question 10

Что такое lazy-инициализация бинов в Spring и как работает аннотация @Lazy?

Accepted Answer

Lazy-инициализация означает, что бин создаётся не при старте контекста, а при первом обращении к нему. Аннотация @Lazy указывает Spring отложить создание бина. Это позволяет ускорить старт приложения и не создавать ненужные объекты. По умолчанию все singleton-бины инициализируются eagerly. @Lazy меняет это поведение.

Вопросы React Frontend Developer