React Frontend Developer

Question 1

В чем разница между display: none и visibility: hidden?

Accepted Answer

• display: none полностью удаляет элемент с веб-страницы, как если бы его не существовало. Он не занимает места в макете, и элементы после него сдвигаются, чтобы занять его пространство.• visibility: hidden скрывает элемент, но оставляет его место на странице. Элемент всё ещё занимает пространство в макете, но не виден пользователю.

Question 2

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

Accepted Answer

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

Question 3

Как работает асинхронная загрузка компонентов (code splitting) в React?

Accepted Answer

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

Question 4

Что такое bundle splitting и как его настроить?

Accepted Answer

Bundle splitting — это техника, позволяющая разделить код вашего приложения на более мелкие части, которые загружаются по мере необходимости. Это снижает время загрузки начального бандла и улучшает производительность. В React вы можете использовать React.lazy() и Suspense для динамической загрузки компонентов, а также инструменты, такие как Webpack, для настройки бандл-сплитинга.

Question 5

Что такое code splitting в Webpack?

Accepted Answer

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

Question 6

Как реализовать расширенную обработку ошибок с использованием пользовательских типов ошибок, реализующих специфичные трейты, такие как From и Display?

Accepted Answer

В Rust пользовательские типы ошибок упрощают обработку ошибок, позволяя структурировать их по сценариям. Реализация трейтів, таких как From и Display, позволяет автоматически преобразовывать ошибки других типов в ваш тип и формировать читаемые сообщения для пользователей. Это делает код более понятным и упрощает управление ошибками.

Question 7

Что произойдет, если изменить свойство display на block для элемента <span>?

Accepted Answer

Элемент <span> станет блочным: будет занимать всю ширину родителя, переноситься на новую строку и сможет иметь ширину/высоту, в отличие от строчного поведения.

Question 8

Что такое Split Queries? Как они решают проблему производительности при загрузке связанных сущностей?

Accepted Answer

Split Queries — это когда EFCore вместо одного SELECT с JOIN, который возвращает дублируемые строки, выполняет несколько простых запросов: сначала основная сущность, потом связанные коллекции через IN. Это снижает объём передаваемых данных и память, устраняя Cartesian explosion при загрузке Include.

Question 9

Какие есть базовые значения display?

Accepted Answer

Основные значения:block — элемент занимает всю ширину, начинается с новой строки.inline — элемент занимает только необходимую ширину, не переносится.inline-block — как inline, но с возможностью задавать ширину/высоту.none — элемент скрыт и не занимает место.

Question 10

Чем отличается скрытие элементов с помощью opacity, visibility и display: none?

Accepted Answer

opacity: 0 делает элемент невидимым, но он продолжает занимать место и реагировать на события. visibility: hidden также скрывает элемент, сохраняя его место в layout, но события мыши не срабатывают. display: none полностью удаляет элемент из потока документа, освобождая занимаемое место.

Вопросы React Frontend Developer