Вопросы React Frontend Developer
Как работает ленивый роутинг (lazy loading) в React Router DOM?
Рейтинг:
5
Сложность:
6
Ленивый роутинг загружает компоненты маршрутов только при их необходимости. Это достигается использованием функции React.lazy в сочетании с динамическим импортом (import()), что позволяет уменьшить начальный размер бандла.
Что такое Сравнение (Diffing) и Патчинг?
Рейтинг:
5
Сложность:
9
Сравнение (Diffing) — это процесс, при котором React сравнивает старое и новое представление виртуального DOM, чтобы определить, какие изменения необходимо внести в реальный DOM. Патчинг — это этап, на котором React вносит эти изменения, обновляя только те элементы, которые изменились, а не перерисовывая всё дерево компонентов.
Объясните концепцию code splitting и lazy loading в React.
Рейтинг:
5
Сложность:
6
Code splitting — это техника, позволяющая разбивать приложение на небольшие части, которые загружаются по мере необходимости. Lazy loading (ленивая загрузка) загружает эти части только тогда, когда они действительно нужны, что помогает уменьшить размер начальной загрузки и повышает скорость работы приложения.
Что такое Distributive Conditional Types в TypeScript?
Рейтинг:
4
Сложность:
8
Distributive Conditional Types — это условные типы, которые автоматически распределяются по элементам union-типа. Это мощный механизм для трансформации типов в более гибкие и детализированные конструкции.
Каково назначение dispatch в React Redux?
Рейтинг:
2
Сложность:
2
dispatch — это функция, которая отправляет действия (actions) в хранилище Redux. Эти действия обрабатываются редьюсерами, которые обновляют состояние. dispatch используется для взаимодействия с глобальным состоянием и вызова изменений.
Что такое CSS Houdini?
Рейтинг:
5
Сложность:
10
CSS Houdini — это набор API, который позволяет разработчикам взаимодействовать с механизмом рендеринга браузера и создавать собственные CSS-эффекты и свойства. Houdini дает возможность писать JavaScript, чтобы расширить функциональность CSS, добавляя новые возможности для стилизации.
Как работает элемент <dialog> и API для управления модальными окнами? Какие особенности его использования?
Рейтинг:
2
Сложность:
4
Элемент <dialog> позволяет создавать встроенные модальные окна на веб-странице без необходимости использования сторонних библиотек. У него есть методы .showModal() для отображения окна в модальном режиме и .close() для его закрытия. Одной из особенностей является встроенная поддержка модальности и блокировки фокуса на элементах внутри диалога, что делает его удобным для создания интерактивных всплывающих окон. Он также поддерживает атрибуты для настройки внешнего вида и поведения.
Как реализовать ленивую загрузку (lazy loading) элементов на странице с помощью атрибута loading? Какие есть альтернативные методы?
Рейтинг:
4
Сложность:
7
Ленивая загрузка — это техника, которая позволяет откладывать загрузку изображений или фреймов до тех пор, пока они не появятся в видимой области экрана. Атрибут loading="lazy" в теге <img> или <iframe> автоматически откладывает загрузку элемента. Это сокращает время начальной загрузки страницы и снижает использование трафика. Альтернативные методы включают использование Intersection Observer API для более гибкого контроля над загрузкой элементов.
Как вставить аудио в HTML?
Рейтинг:
1
Сложность:
3
Для вставки аудио в HTML используется тег <audio>. Как и в случае с видео, можно указывать несколько форматов аудиофайлов через тег <source>, а атрибуты controls, autoplay, и loop управляют воспроизведением аудио.
Что такое IIFE и когда применяется?
Рейтинг:
2
Сложность:
5
IIFE (Immediately Invoked Function Expression) — это функция, которая выполняется сразу после того, как была объявлена. Это достигается оборачиванием функции в скобки и последующим вызовом. IIFE часто используется для создания изолированной области видимости, чтобы избежать конфликтов переменных в глобальном пространстве имен.