#62 Front-end. Вопросы на собеседовании

19:37

#62 Front-end. Вопросы на собеседовании

webDev 05.05.2026 1 325 просмотров 62 лайков

Machine-readable: Markdown · JSON API · Site index

Смотреть на YouTube

Поделиться Telegram VK Бот

Транскрипт Скачать .md

Анализ с AI

Описание видео

#YauhenK #webDev #HTML #CSS #JS Всем привет! Добро пожаловать в видеокаст «Front-end. Вопросы на собеседовании». В данной серии видео я постараюсь помочь вам подготовиться к собеседованиям на позицию Junior и Middle Front-end разработчик. Видеокаст представлять из себя коллекцию технических вопросов, которые можно получить на интервью. Удобная, хорошо организованная шпаргалка всегда у вас под рукой! В репозитории можно найти: - Ответы на вопросы по HTML - Ответы на вопросы по CSS - Ответы на вопросы по JavaScript - Ответы на вопросы по React - Ответы на вопросы по Vue.js - Ответы на вопросы по Node.js - Ответы на вопросы по TypeScript - Ответы на вопросы по Angular ✒ Репозиторий видеокаста: ✔ GitHub: https://github.com/YauhenKavalchuk/interview-questions ✒ Timeline: ✔ 0:00 - Введение ✔ 0:29 - Разница между блочными и строчными элементами? ✔ 2:06 - Разница между mobile-first и desktop-first подходами? ✔ 3:18 - Что такое CSS containment? Как использовать свойство contain? ✔ 4:44 - Объясните концепцию CSS cascade layers (@layer)? ✔ 6:23 - Что такое CSS container queries? Как они работают? ✔ 7:51 - Что такое утилитарные типы в TypeScript (Utility Types)? ✔ 8:57 - Что такое сужение типов (Type narrowing)? ✔ 10:01 - Что такое Shadow DOM? Как он связан с веб-компонентами (Web Components)? ✔ 11:37 - Что такое CSR? ✔ 13:31 - Что такое SSR? ✔ 15:31 - Что такое SSG? ✔ 17:23 - Что такое ISR? ✒ Полный список готовых и планируемых курсов: ✔ Trello: https://trello.com/b/R6rD7qq8 🚀 Комьюнити канала: ✅ Telegram: https://t.me/yauhenwebdev 👨‍💻 Автор канала: ✅ YouTube: https://www.youtube.com/YauhenKavalchuk ✅ Instagram: https://www.instagram.com/YauhenKavalchuk ✅ Twitter: https://twitter.com/YauhenKavalchuk ✅ GitHub: https://github.com/YauhenKavalchuk ✅ LinkedIn: https://www.linkedin.com/in/YauhenKavalchuk ✅ VK: https://vk.com/YauhenKavalchuk 💵 Поддержать канал: https://github.com/YauhenKavalchuk/youtube/blob/main/sponsoring.md

Оглавление (13 сегментов)

Введение

Я вас приветствую. Я Евгений Ковальчук и вы на канале Webdef. Добро пожаловать в шестьдесят вторую часть видеокаста "Фроннд вопросы на собеседовании", в котором мы с вами разбираем самые популярные вопросы из технических интервью. Полный список вопросов и ответов из предыдущих выпусков можно найти в GitHub репозитории. А в комментариях вы можете оставлять вопросы с ваших собеседований, и в будущих видео я обязательно на них отвечу. Начнём с базового вопроса по HTML. Разница между

Разница между блочными и строчными элементами?

блочными и строчными элементами. По сути, данный вопрос - это фундаментальная концепция в HTML и CSS. Блочные элементы занимают всю доступную ширину родительского контейнера, а, следовательно, всегда начинаются с новой строки. Они имеют высоту, равную содержимому, плюс падинг, бордер и марн или отступ, границу и поле. Блочные элементы могут содержать другие блочные элементы и строчные элементы. В HTML большинство элементов является блочными. Это списки, заголовки, параграф, секции, форма и так далее. Что же касается строчных элементов, они занимают только необходимую для содержимого ширину. Другими словами, они просто подстраиваются под ширину контента внутри. Им нельзя задать with и hide. Вернее, задать можно, но свойства будут игнорироваться. Они могут содержать только другие строчные элементы и текст. Размещение блочного элемента внутри строчного ведёт к ошибке валидации. Вертикальные margin и падинг в них работают частично. К строчным можно отнести инпуты, кнопки, ссылки, картинки и различное семантическое выделение текста. Также есть ещё третий тип, который является комбинацией двух описанных. Это inлайнблокэлементы. Они ведут себя как строчные, то есть располагаются в одной строке, но им можно задать withd, height, margin и pading, точно так же, как и блочным. Переходим к CSS. Разница между Mobile

Разница между mobile-first и desktop-first подходами?

First и Desktop First подходами. Mobile First - это методология разработки, при которой дизайн и код создаются сначала для мобильных устройств, а затем адаптируются для больших экранов с помощью медиазапросов Mainwis. Desktop first - это традиционный подход, при котором дизайн создаётся сначала для десктопа, а затем адаптируется для меньших экранов с помощью медиазапросов Maxwiz. То есть основное отличие - это то, с какого экрана начинаем и под какой адаптируем. Сначала мобильник, а потом большой экран или наоборот. Преимущество Mobile First можно отнести: производительность - загрузка только необходимых стилей для мобильного устройства. Приоритизация контента. Блоки страницы могут меняться местами, и обычно сверху идёт самый важный, а также какие-то блоки могут быть вообще скрыты для экономии трафика. Лучшая SEO оптимизация. Google использует именно Mobile First индексацию. Также следует отметить, что это более современный подход, так как основной трафик приходится именно на мобильное устройство.

Что такое CSS containment? Как использовать свойство contain?

устройство. Что такое CSS Containment? Как использовать свойства contain? CSS Containment - это относительно новая, но очень важная концепция для оптимизации производительности веб-приложений. Это механизм, который позволяет изолировать часть дом дерева от остальной страницы с точки зрения стилей Playа и Paint операций. По сути, мы говорим браузеру: "Эта часть страницы независима. Не нужно пересчитывать весь документ при изменениях внутри неё. Это критически важно для производительности, особенно в больших приложениях с динамическим контентом. Свойство контей принимает семь основных значений. Non - это значение по умолчанию, которое отключает все виды контеймен. Layаoutут изолирует лейаут внутри элемента. Изменение внутри не влияет на позиционирование элементов снаружи. Paint ограничивает отрисовку элемента его границами. Дочерние элементы не могут выходить за пределы. Сайз, размер элемента рассчитывается независимо от его содержимого. Style изолирует CSS-счётчики и другие стилевые вычисления. Strict - это самый строгий уровень изоляции, эквивалентен комбинации всех описанных ранее типов containment. Content - это более мягкая версия strict, которая исключает sized containment.

Объясните концепцию CSS cascade layers (@layer)?

containment. Объясните концепцию CSS Cascad Layers. CSS Cascad Layers - это функциональность, которая даёт гораздо больше контроля над каскадом и специфичностью стилей. Каскад Layers позволяет создавать именованные слои стилей, где каждый слой имеет свой приоритет в каскаде. Синтаксис простой. С помощью ключевого свойства layer объявляется порядок слоёв, а далее эти слои оборачивают определённые куски CSS-кода. Как работает приоритет в этом случае? Всё просто. Reset самый низкий. Далее идут base и components, в заключении utilities самым высоким приоритетом. На практике это выглядит так. Предположим, у нас есть какая-то библиотека компонентов, которая задаёт стиль для кнопки с помощью двух классов. Мы пытаемся переопределить этот стиль у себя, используя один класс. Как вы понимаете, это не работает, так как специфичность получается меньше. И обычно в таких ситуациях мы добавляем ещё что-то, чтобы увеличить специфичность нашего селектора. Сcat layers всё решается очень просто. Основными опёртками мы определяем стили библиотеки и кастомные стили. Далее указываем приоритет, что наши пользовательские стили имеют больший приоритет, чем стили библиотеки. И всё. К преимуществам подхода можно отнести предсказуемость каскада, лёгкая интеграция библиотек. Можно безопасно подключать внешние стили. Important почти не нужен, так как можно управлять приоритетом через слои.

Что такое CSS container queries? Как они работают?

Что такое CSS Container Queries? Как они работают? CSS Container Queries - это новая, очень мощная функциональность CSS, которая кардинально меняет подход к адаптивному дизайну. Они позволяют применять стили к элементам на основе размера их родительского контейнера, а не размера всего вьюпорта, как это делают обычные media queries. Это позволяет решить одну из главных проблем компонентоориентированной разработки. Создание по-настоящему независимых и переиспользоваемых компонентов. В чём проблема обычных media queries? С традиционными media queries мы можем реагировать только на размер экрана. Но что, если наша карточка находится в узкой боковой панели на широком экране? В таких ситуациях и используется container queries. Для начала нужно определить элемент как контейнер запросов. Делается это с помощью свойства container type, в котором устанавливается один из трёх параметров. Normal, значение по умолчанию. Inline size, отслеживаем ширину. Просто size, отслеживаем и ширину, и высоту. Сам контейнер при этом можно именовать, но это опционально. После чего идёт применение контейнеer queries. По сути, это тот же самый синтаксис медиазапросов, который просто относится к родительскому контейнеру и отсчитывает размеры именно от него. Переходим к Typescript. Что такое

Что такое утилитарные типы в TypeScript (Utility Types)?

утилитарные типы в Typeescript? Утилитарные типы или utility types - это встроенные типы помощники, которые позволяют создавать новые типы на основе уже существующих, применяя к ним различные трансформации. Они значительно упрощают работу с типами и делают код более гибким и переиспользуемым, а также позволяют избегать дублирования. Что же касается примеров, то лучше называть именно такие Utility types, которые вы использовали и о которых знаете. Например, partial делает все свойства типа необязательными. Required наоборот обязательными. Пик создаёт тип, выбирает только указанные свойства из передаваемого типа. Од наоборот создаёт тип, исключая указанное свойство из переданного типа. Record создаёт тип свойства с ключами и значениями указанных типов. Re only. делает все свойства типа доступными только для чтения и так далее.

Что такое сужение типов (Type narrowing)?

Что такое сужение типов type narrowing? Type narrowing или же сужение типов TypeScript - это процесс, при котором Typescript автоматически определяет более конкретный тип переменной на основе проверок в коде. Есть несколько вариантов его реализации, например, type guards сOF или проверка примитивных типов. Type guard с instance of экземпляров классов. Discriminated unions или использование общего свойства для различения типов. Custom type guards. Создание собственных функций для проверки типов. Проверка наAL и undefined. Проверка свойств с оператором. Ключевым преимуществом сужения типов можно отнести безопасность типов. Это предотвращает ошибки времени выполнения. Autcomplete ID сам предлагает правильные методы и свойства и, конечно же, читаемость кода. И пара общих вопросов из веб-разработки. Что

Что такое Shadow DOM? Как он связан с веб-компонентами (Web Components)?

такое Shadow DOM? Как он связан с веб-компонентами? Для начала нужно отметить, что веб-компоненты используются для создания пользовательских HTML-тегов или custom elements, которые работают автономно и независимо от их окружения. Shadow DOM - это одна из ключевых технологий или концепций, которая лежит в основе веб-компонентов. Она предоставляет функциональность для инкапсуляции разметки, стилей и поведения в пределах одного компонента. Shadow DOM создаёт инкапсулированную область внутри элемента, где CSS-стили изолированы, не влияют на внешний документ и наоборот. JavaScript имеет ограниченный доступ, HTML-структура скрыта от основного документа. Основные концепции Shadow DOM - это Shadow Host, элемент, к которому прикреплён Shadow Dom. Shadow root- корень теневого дерева. Shadow 3 - дом дерева внутри shadow root. Создание и использование таких элементов позволяет создавать переиспользуемые компоненты, совместимые со всеми современными фреймворками. а также предотвращает конфликты с другими частями приложения. В последнее время понимание основ различных стратегий рендеринга становится максимально актуальным. И такой вопрос всё чаще можно услышать на собеседовании. Именно поэтому в данном выпуске я бы хотел подробно рассказать вам о четырёх самых популярных вариантах CSR, SSR, SSG и ISR. Начнём по порядку.

Что такое CSR?

Что такое CSR? CSR или client Site Rendering это рендеринг на стороне клиента. HTML генерируется в браузере с помощью JavaScript после загрузки страницы. Пожавый процесс отрисовки страницы здесь выглядит следующим образом. Запрос страницы. Пользователь переходит на URL. Сервер отдаёт пустой HTML, минимальный HTML с подключенным JavaScript кодом. Загрузка JS. Браузер скачивает и парсит JavaScript файлы. Инициализация приложения. JavaScript создаёт виртуальный дом. API запросы. Приложение запрашивает данные сервера. Рендеринг контента. Данные отображается в интерфейсе. И, наконец, интерактивность. Приложение становится полностью функциональным. Как понятно, основная особенность данного подхода - это то, что всю работу на себя берёт клиентская сторона. Сервер работает лишь как статический файловый хостинг. В связи с этим здесь появляются свои технические особенности. Большой начальный bundle JavaScript, а это значит, скорость первой загрузки будет ниже. Зависимость от производительности устройства пользователя. Чем слабее устройство, тем оно хуже обрабатывает страницу. Большая проблема с SEO. Без дополнительных решений поисковая оптимизация фактически отсутствует, что негативно влияет на индексацию страниц при поиске. Тем не менее, появляется возможность работать в оффлайн-режиме, например, Service Workers, когда можно применять данную стратегию. Всё просто, когда SEO не критично, когда у пользователя хороший и быстрый интернет и когда нужно очень много интерактивности, например, админки, дашборды, CRM-системы, личные кабинеты, банкинг, игры, редакторы и чаты. Что

Что такое SSR?

такое SSR? SSR или Server Site Render это рендеринг на стороне сервера. HTML генерируется на сервере для каждого запроса. Здесь процесс отрисовки выглядит так: запрос страницы. Пользователь переходит на URL. Обработка на сервере. Сервер получает запрос и анализирует маршрут. Получение данных. Сервер делает запрос к API или базе данных. Рендеринг HTML. Сервер сам генерирует полный HTML с данными. Отправка ответа: готовый HTML отправляется в браузер. Отображение контента. Браузер сразу показывает контент. Гидрация. JavaScript оживляет статические HTML, добавляя интерактивность. Здесь уже большую часть работы забирает на себя сервер. HTML генерируется на сервере для каждого запроса, поэтому сервер должен уметь выполнять JavaScript код. Появляется необходимость синхронизации серверного и клиентского состояния, а также процесс гидрации для добавления интерактивности. Технические особенности здесь следующие: высокая нагрузка на сервер, так как все операции выполняет именно он. Сложность кэширования динамического контента, а значит, при определённых случаях страница может грузиться дольше. Появляется необходимость обработки ошибок через сервер. Когда можно использовать SSR. Данную стратегию применяет, когда SEO оптимизация играет главную роль, когда важна скорость первого отображения, когда у контента должна быть возможность динамического изменения и нужна персонализация. SSR идеально подходит для e-comмерce приложений, рекомендации, оценки, цены по геолокациям, новостных сайтов, свежий контент, комментарии, социальных сетей и приложений с аутентификацией, когда контент зависит от пользователя.

Что такое SSG?

Что такое SSG? SSG или Static Side Generation, это статическая генерация. HTML генерируется во время сборки. Процесс отрисовки страницы здесь такой. Building. Во время деплоя запускается процесс генерации. Получение всех данных. Система получает данные для всех страниц. Генерация HTML. Создаются статические HTML-файлы для каждой страницы. Деплой на CDN. Готовые файлы размещаются на CDN. Запрос пользователя. Пользователь запрашивает страницу. Мгновенная отдача. CDN отдаёт готовый HTML-файл. Гидрация. JavaScript добавляет интерактивность. SSG - это самый идеальный вариант для статических страниц, так как здесь HTML генерируется один раз во время сборки. Статические файлы могут быть без проблем размещены на любом CDN. При таком подходе серверная логика полностью отсутствует во время выполнения, а следовательно, плюсы здесь - это высокая производительность и отличное кэширование. Также к ним можно отнести простоту деплоя и масштабирования, но у такого подхода есть и своя обратная сторона. Время сборки увеличивается с ростом количества страниц. Невозможность динамического контента без пересборки. Это значит, что динамика на таких страницах полностью отсутствует. Когда лучше всего применять SSG? Здесь всё просто. Если контент редко изменяется, важна простотаплоя, низкие бюджеты на хостинг, но тем не менее нужна максимальная производительность. SSG подойдёт для посадочных страниц, landing page, сайтов портфолиi корпоративных сайтов, таких блоках, как у компании, услуги, юридическая информация и так далее. Что такое ISR?

Что такое ISR?

ISR или Incremental Static Regeneration, инкременная статическая регенерация. Это гибрид SSG с возможностью обновления статических страниц. Пошаговая отрисовка страницы происходит следующим образом. Первоначальная сборка. Генерируются популярные страницы. Запрос страницы. Пользователь запрашивает контент. Проверка кэша. Система проверяет актуальность кэшированной версии. Отдача кэша. Если кэш актуален, отдаётся готовая страница. Фоновая регенерация. Если кэш устарел, запускается обновление в фоне. Генерация по требованию. Если страницы вообще нет, она генерируется на литу. Обновление кэша. Новая версия сохраняется для будущих запросов. По сути, это гибридный подход между SSG и SSR. К его особенностям можно отнести интеллектуальное кэширование с автоматической инвалидацией. Если говорить просто, то это кэширование страниц, их автоматическое обновление и повторное кэширование в случае каких-то изменений. Генерация страниц по требованию. Это существенно снижает нагрузку на сервер, так как генерация происходит только в случае необходимости и фоновое обновление контента. По сути, пользователь всегда видит только актуальную информацию. Данную стратегию можно применять, когда есть большое количество страниц. Контент обновляется периодически, а не постоянно. Нужен баланс между производительностью и актуальностью. Есть ресурсы и возможности для настройки сложной инфраструктуры. Идеальные сценарии - это e-comмерce каталоги, товары с периодическим обновлением цен, новостные порталы, статьи с комментариями, большие контент-сайты по типу Википедии, API документация или автоматически обновляемая документация. И в целом на сегодня это всё. Подписывайтесь на канал и жмите колокольчик, чтобы не пропустить следующее видео. А также не забывайте, что вы можете поддержать канал и будущие выпуски, став спонсором на YouTube. Увидимся в новом видео. Пока.

Ctrl+V

Экстракт Знаний в Telegram

Экстракты и дистилляты из лучших YouTube-каналов — сразу после публикации.

Подписаться

Лучшие методички за неделю — каждый понедельник