Замыкания, this и прототипы, event loop и промисы, как браузер рисует страницу, блочная модель, flex и grid, как React решает, что перерисовать, и зачем TypeScript — то, о чём спрашивают начинающих фронтенд-разработчиков.
DNS находит IP → TCP-рукопожатие → TLS-рукопожатие → HTTP-запрос → сервер (балансировщик, приложение, база) → ответ → браузер разбирает HTML, догружает ресурсы и рисует страницу.
XSS — злоумышленник заставляет сайт выполнить его JavaScript в браузере другого пользователя: скрипт работает с правами сайта — читает данные страницы, отправляет запросы от имени…
CSRF — чужой сайт заставляет браузер жертвы отправить запрос на ваш сайт; браузер сам приложит cookie, и запрос выполнится от имени пользователя. CORS — правила, когда скрипт с…
Cookies — небольшие данные, которые браузер отправляет на сервер с каждым запросом (сессия, настройки); localStorage и sessionStorage — хранилища, доступные только скриптам…
Мутируют: push, pop, shift, unshift, splice, sort, reverse, fill. Возвращают новый: map, filter, slice, concat, flat, а с ES2023 — toSorted, toReversed, toSpliced, with. forEach…
async-функция всегда возвращает Promise; await приостанавливает её до завершения промиса, не блокируя поток (продолжение — микрозадача). Ошибки ловят обычным try/catch…
Каждый элемент — прямоугольник из content, padding, border, margin. При content-box (по умолчанию) width задаёт только содержимое, а padding и border добавляются сверху. При…
Замыкание — функция вместе с лексическим окружением, в котором она создана: она помнит переменные внешней функции даже после её завершения. Применение: приватное состояние…
Контролируемый — значение поля хранится в состоянии React (value + onChange): React — единственный источник истины, легко валидировать и форматировать на лету. Неконтролируемый …
Поверхностная копия ({...obj}, Object.assign, [...arr], slice) копирует только верхний уровень — вложенные объекты общие. Глубокая — structuredClone(obj) (встроенная, сохраняет…
Три метрики Google, измеряемые на реальных пользователях: LCP — когда отрисован главный элемент (хорошо ≤ 2,5 с), INP — задержка реакции на действия пользователя (≤ 200 мс), CLS …
static — обычный поток. relative — остаётся в потоке, сдвигается относительно своего места и становится опорой для absolute-детей. absolute — выпадает из потока, позиционируется…
При конфликте правил побеждает: !important → более высокая специфичность → более позднее правило. Специфичность считается тройкой (id, классы/атрибуты/псевдоклассы…
Debounce — вызвать функцию, только когда события прекратились на N мс: поиск по вводу, сохранение черновика, resize. Throttle — вызывать не чаще раза в N мс, пока события идут…
Дизайн-система — общий язык дизайна и кода: токены (цвета, типографика, отступы) в CSS-переменных, библиотека компонентов с доступностью из коробки, документация и песочница…
Событие проходит три фазы: перехват (от window вниз к цели), цель, всплытие (от цели вверх). Обработчики по умолчанию срабатывают на всплытии. Делегирование — один обработчик на…
=== — строгое сравнение: типы должны совпадать, без преобразований. == — нестрогое: перед сравнением приводит типы по запутанным правилам ("1" == 1, 0 == "", null == undefined …
JavaScript выполняется в одном потоке. Цикл событий берёт одну макрозадачу (скрипт, setTimeout, событие, сетевой ответ), выполняет её до конца, затем все микрозадачи (then у…
Уточнить требования (источник данных, объём, задержка, мобильные, офлайн), затем: debounce ввода (~150–300 мс), отмена устаревших запросов (AbortController) и защита от гонок…
Flexbox — одномерная раскладка: элементы в строку или столбец, распределение места и выравнивание вдоль оси; размеры идут от содержимого. Grid — двумерная: строки и столбцы…
Пайплайн: установка по lock-файлу → линтер и типы → тесты → сборка → проверки размера → preview-окружение на каждый PR → выкатка. Статика с хешами в именах кэшируется надолго на…
Код выполняется на тысячах чужих устройств — без мониторинга вы узнаете об ошибках от пользователей. Нужны: сбор ошибок (Sentry и аналоги) с source maps, чтобы видеть исходный…
Семь примитивов: string, number, bigint, boolean, undefined, null, symbol — и object (включая массивы, функции, даты). Примитивы неизменяемы и копируются по значению, объекты …
Переписывать всё с нуля — главный риск: годы без новых функций и вечная погоня за старой системой. Работает постепенная замена (strangler fig): новый стек встраивается в старое…
Микрофронтенды — разделение интерфейса на части, которые разные команды разрабатывают и выкатывают независимо, а оболочка собирает их в одно приложение (Module Federation…
Монорепозиторий хранит несколько приложений и пакетов (дизайн-система, клиент API, утилиты) в одном репозитории: атомарные изменения сразу во всех потребителях, единые версии…
Производительность деградирует незаметно — по килобайту в каждом PR. Удержать её помогают бюджеты (размер JS на маршрут, LCP, INP) с проверкой в CI, которая блокирует превышение…
Цель — чтобы изменение в одной функции не задевало остальные и новый человек быстро находил код. Основа — разделение по функциональности (features, страницы, сущности), а не по…
Promise — объект будущего результата в одном из состояний: pending, fulfilled, rejected; состояние меняется один раз. then/catch/finally возвращают новый промис — получаются…
У каждого объекта есть ссылка на прототип; если свойства нет в объекте, оно ищется по цепочке прототипов. Методы хранятся в прототипе и разделяются всеми экземплярами. class …
Хуки вызывают только на верхнем уровне компонента или своего хука — не в условиях, циклах и вложенных функциях — и только из React-функций. Причина: React хранит состояние хуков…
Компонент возвращает описание интерфейса (дерево React-элементов). При обновлении React сравнивает новое дерево со старым (reconciliation) и применяет к настоящему DOM минимальные…
Компонент перерисовывается, когда меняется его состояние, контекст, который он читает, или перерисовывается родитель (по умолчанию — все дети, даже с теми же props). React.memo…
React узнаёт об изменении, сравнивая ссылки (Object.is). Мутация (items.push(x), user.name = ...) оставляет ссылку прежней — перерисовки не будет, а memo и useEffect не увидят…
Сначала — локальное состояние и подъём к общему предку. Context — передать редко меняющиеся данные глубоко (тема, пользователь, язык) без прокидывания props. Глобальное хранилище…
props — входные данные от родителя, компонент их только читает. state — собственные данные компонента, меняются через setState и вызывают перерисовку. Данные текут сверху вниз…
useEffect запускает побочный эффект после отрисовки: подписки, таймеры, запросы, синхронизацию с внешней системой. Зависимости определяют, когда эффект перезапускается: [] — один…
HTML → DOM, CSS → CSSOM, вместе → дерево отрисовки → layout (геометрия: размеры и позиции) → paint (пиксели слоёв) → composite (сборка слоёв на GPU). Reflow — пересчёт раскладки…
Гибкая раскладка (flex, grid с fr и minmax), относительные единицы (rem, %, vw, clamp), медиазапросы по ширине и адаптивные изображения (srcset, sizes). Mobile-first — базовые…
Обычный <script> останавливает разбор HTML до загрузки и выполнения. defer — загрузка параллельно, выполнение после разбора HTML, по порядку подключения. async — загрузка…
В обычной функции this определяется в момент вызова: obj.method() — obj; простой вызов f() — undefined в строгом режиме; new F() — новый объект; call/apply/bind — заданный явно…
TypeScript добавляет к JavaScript статические типы, которые проверяются при компиляции и стираются в итоговом JS. Польза: ошибки до запуска, автодополнение, безопасный…
Оба описывают форму объекта. interface — расширяется через extends и сливается при повторном объявлении (удобно для расширения чужих типов). type — умеет больше: объединения…
var — область видимости функции, поднимается (hoisting) со значением undefined, допускает повторное объявление. let и const — область видимости блока {}, до строки объявления …
sotto слышит вопрос и сразу показывает короткий ответ. Оставьте контакт — пришлём доступ и промокод.
sotto