tgoop.com/reactify_IT/1449
Last Update:
🤯 Подборка сложных вопросов с собеседований
1. Какая разница в tree-shaking у CJS и ESM?
ESM (ECMAScript Modules):
- Статический анализ на этапе сборки → можно точно определить неиспользуемый код.
- Импорты (import/export) фиксированы, что позволяет оптимизировать бандл.
CJS (CommonJS):
- Динамические require() → сборщик не может заранее знать, какие части модуля будут использоваться.
- Загружает модуль целиком, что мешает tree-shaking.
2. Какую часть спецификации ES нельзя реализовать через полифиллы и транспиляцию?
Proxy – требует нативной поддержки браузера, так как работает на низком уровне (перехват операций с объектами). Vue 2 для старых браузеров использовал Object.defineProperty вместо Proxy.
3. Для чего используется <picture>, кроме выбора формата изображения?
Адаптивные изображения:
- Разные версии картинки под разные размеры экрана (media-атрибуты).
- Оптимизация под ретину (srcset).
- Fallback для старых браузеров (<img> внутри).
- Разгрузка мобильных сетей (легкие версии).
4. Зачем нужен тег <base>?
Задает базовый URL для всех относительных ссылок на странице.
<base href="https://example.com/assets/">
<img src="logo.png"> <!-- Загрузится https://example.com/assets/logo.png -->
5. Как в runtime проверить поддержку CSS-свойства?
if (CSS.supports('display', 'grid')) {
console.log('Grid поддерживается!');
} Альтернатива: @supports в CSS.
6. Как называется реактивность в React?
Не настоящая реактивность (как в Svelte/Solid/Vue). React использует "pull-based" модель (перерисовка по изменению состояния). Гранулярная реактивность (сигналы, Proxy) – когда обновляются только зависимые части.
7. Как определить системную тему (dark/light)?
В JS:
const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
// Следить за изменением темы
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
console.log(e.matches ? 'Тёмная тема' : 'Светлая тема');
});
В CSS:
@media (prefers-color-scheme: dark) {
body { background: #000; color: #fff; }
}
8. Что такое CSS Container Query?
Аналог @media, но зависящий от размера контейнера, а не viewport. Позволяет адаптировать стили для компонентов (например, карточка меняет layout в узком контейнере).
.container { container-type: inline-size; }
@container (max-width: 500px) {
.card { flex-direction: column; }
}
9. Что будет с padding: 1,5px?
Непредсказуемо! Это синтаксическая ошибка (запятая вместо точки), но браузер попытается "починить". Может интерпретироваться как 1px, 15px или проигнорироваться.
Вывод: так писать нельзя, только padding: 1.5px.
10. Как из массива [1, 2, 3] получить тип 1 | 2 | 3?
const arr = [1, 2, 3] as const; // Делаем кортеж
type T = typeof arr[number]; // 1 | 2 | 3
Без as const тип будет number[].
11. Разница между import { ReactNode } и import { type ReactNode }?
Обычный импорт:
import { ReactNode } from 'react'; // Может попасть в бандл.
Импорт типа (TypeScript 4.5+):
import { type ReactNode } from 'react'; // Удаляется при компиляции.
Полезно для оптимизации бандла (импорты только для типов не включаются в JS-код).
#собеседования #react #javascript #typescript
BY Reactify | Frontend Разработка
Share with your friend now:
tgoop.com/reactify_IT/1449