Frontend | Вопросы собесов

Бесплатный курс по дизайну: веб, графический и UX/UI Научись создавать дизайн сайтов и приложений, инфографику для карточек на маркетплейсах и работать в Figma! Студенты курса в среднем зарабатывают от 68 000 ₽ уже во время обучения💰 Этот курс для тебя, если ты: ✅ мечтаешь о новой профессии в digital, но не знаешь, с чего начать; ✅ чувствуешь, что хочешь большего — свободы, самореализации, творчества; ✅ полный новичок и хочешь систему, а не хаос; ✅ хочешь начать зарабатывать удалённо. Зарегистрироваться #реклама 16+ ydaev.ru О рекламодателе

🤔 Что делает и для чего нужна функция Function.prototype.bind? Метод bind позволяет создать новую функцию с жёстко привязанным контекстом (this) и при необходимости — предустановленными аргументами. Полезен при передаче методов в колбэки, где может потеряться контекст. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Какие особенности слежения за "глубокими" объектами? Когда мы отслеживаем изменения в объектах (например, в React, Vue или MobX), важно понимать, что JavaScript не умеет автоматически следить за вложенными свойствами. Это называется глубокое слежение (deep watching). Проблема: поверхностное слежение (`shallow watching`) JavaScript сравнивает только ссылки на объекты, а не их содержимое.

const obj = { user: { name: "Иван" } };
const copy = obj; 

copy.user.name = "Петр"; 
console.log(obj.user.name); // "Петр" (оба объекта ссылаются на одно и то же)

🚩Глубокое копирование vs поверхностное Обычный Object.assign() или spread-оператор ({ ...obj }) делают поверхностное копирование:

const obj = { user: { name: "Иван" } };
const shallowCopy = { ...obj };

shallowCopy.user.name = "Петр";
console.log(obj.user.name); // "Петр" 😱 (изменился оригинал!)

Для глубокого копирования можно использовать structuredClone() или JSON.parse(JSON.stringify(obj)):

const deepCopy = structuredClone(obj);
deepCopy.user.name = "Петр";

console.log(obj.user.name); // "Иван" ✅ (оригинал не изменился)

🚩Как следить за глубокими объектами? 🟠React: следим через `useState` и `useEffect` В React состояние обновляется только при изменении ссылки (shallow compare).

const [user, setUser] = useState({ name: "Иван" });

useEffect(() => {
  console.log("Имя изменилось:", user.name);
}, [user]); // Работает только если user — новый объект!

// НЕ сработает:
user.name = "Петр"; // user остался тем же объектом

Решение – создавать новый объект при изменении:

setUser(prev => ({ ...prev, name: "Петр" }));

🟠Vue: `watch` vs `watchEffect` (глубокое слежение) Обычный watch следит только за первой вложенностью

watch(user, (newValue) => {
  console.log("Изменено:", newValue);
});

Глубокое слежение (deep: true)

watch(user, (newValue) => {
  console.log("Изменено:", newValue);
}, { deep: true });

Ставь 👍 и забирай 📚 Базу знаний

🤔 TDD или Code First? - TDD (Test-Driven Development) — надёжнее, но требует культуры. - Code First — быстрее, но не всегда безопасно. Комбинируем: бизнес-критичный код — через TDD, остальное — гибко. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как работают плавающие элементы (floats)? float – это CSS-свойство, которое позволяет "выплывать" элементу из обычного потока документа и обтекаться другими элементами (например, текстом). Основные значения float

<img src="image.jpg" class="float-img">
<p>Это текст, который будет обтекать картинку.</p>

.float-img {
  float: left;
  margin-right: 10px;
}

🟠Почему родитель "схлопывается" при `float`? Когда внутри div есть только float-элементы, браузер считает, что он пустой, потому что float убирает элемент из потока.

<div class="container">
  <img src="image.jpg" class="float-img">
  <p>Текст обтекает картинку.</p>
</div>

.container {
  background: lightgray;
}
.float-img {
  float: left;
}

Решение 1: overflow: hidden;

.container {
  overflow: hidden; /* Контейнер теперь учитывает float-элементы */
}

Решение 2: clearfix (старый способ)

.container::after {
  content: "";
  display: block;
  clear: both;
}

🟠Как остановить обтекание (`clear`)? Чтобы отменить обтекание, используется clear.

<img src="image.jpg" class="float-img">
<p>Этот текст обтекает картинку.</p>
<div class="clear"></div>
<p>Этот текст пойдёт на новую строку.</p>

.float-img {
  float: left;
  margin-right: 10px;
}
.clear {
  clear: both;
}

🚩Почему `float` устарел и что использовать вместо него? Раньше float использовали для создания колонок и сеток, но сегодня его заменили: Flexbox (display: flex;) – лучше для адаптивных макетов. CSS Grid (display: grid;) – мощный инструмент для сложных сеток.

.container {
  display: flex;
  align-items: center;
}

Ставь 👍 и забирай 📚 Базу знаний

🤔 Какие элементы в HTML5 могут иметь ARIA-атрибут? Любой HTML-элемент может иметь ARIA-атрибут, особенно если он участвует в интерфейсном взаимодействии. Однако ARIA особенно полезна для элементов: - интерактивных (button, input, a, nav, dialog); - структурных (section, article, aside, header, footer); - пользовательских компонентов (custom elements или div, span, выполняющие роль UI). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Чего стоит и не стоит избегать в оптимизации сайта? 🟠Оптимизация изображений Сжатие без потери качества: Используйте инструменты, такие как TinyPNG или ImageOptim. Использование современных форматов: WebP и AVIF обеспечивают лучшее сжатие и качество. Lazy Loading: Загружайте изображения по мере их появления в области видимости пользователя. 🟠Минификация и объединение файлов Минификация: Уменьшайте размеры CSS, JavaScript и HTML-файлов с помощью инструментов, таких как UglifyJS и CSSNano. Объединение: Сокращайте количество HTTP-запросов, объединяя несколько файлов в один. 🟠Использование CDN (Content Delivery Network) Размещайте копии вашего сайта на серверах по всему миру, чтобы уменьшить задержки для пользователей из разных регионов. 🟠Кэширование На стороне клиента: Настройте заголовки кэширования HTTP. На стороне сервера: Используйте технологии, такие как Varnish или Nginx. 🟠Асинхронная загрузка и критический CSS Асинхронная загрузка: Используйте атрибуты async и defer для JavaScript. Критический CSS: Встраивайте важные стили прямо в HTML, чтобы ускорить начальную отрисовку страницы. 🟠Улучшение производительности сервера Сжатие данных: Включите gzip или Brotli. HTTP/2: Переходите на HTTP/2 для мультиплексирования запросов. 🟠Использование современных технологий Service Workers: Для офлайн-работы и улучшенного кэширования. Prefetching и Preloading: Предзагрузка и предзапросы ресурсов. 🟠Мониторинг и анализ Google Lighthouse, PageSpeed Insights: Используйте для анализа производительности. Реальное время: Применяйте Google Analytics, New Relic. 🚩Чего стоит избегать при оптимизации сайта 🟠Избегайте чрезмерной минимизации Читаемость кода: Минимизация без генерации карт кода (source maps) может усложнить отладку. 🟠Не используйте большие, несжатые изображения Размер файлов: Это замедляет загрузку и увеличивает потребление трафика пользователем. 🟠Не загружайте все ресурсы сразу Асинхронная загрузка: Используйте техники lazy loading и асинхронной загрузки. 🟠Не пренебрегайте кэшированием Отсутствие кэширования: Увеличивает время загрузки для повторных посещений. 🟠Избегайте блокирующих ресурсов JavaScript и CSS: Не блокируйте рендеринг страницы тяжелыми файлами. 🟠Не злоупотребляйте анимациями и большими скриптами Производительность: Сложные анимации и большие скрипты могут замедлить сайт, особенно на мобильных устройствах. 🟠Избегайте чрезмерного использования плагинов Нагрузки: Избыток плагинов может значительно замедлить сайт и создать проблемы с безопасностью. 🟠Не забывайте про оптимизацию для мобильных устройств Мобильная версия: Сайт должен быть оптимизирован для мобильных пользователей, так как большинство пользователей используют мобильные устройства. Ставь 👍 и забирай 📚 Базу знаний

CRM, которая помогает управлять отделом продаж Что делает Битрикс24 CRM: – ставит задачи менеджерам автоматически – интегрируется с 1С и онлайн-кассами – показывает, где теряются деньги – возвращает клиентов и ищет повторные продажи – помогает руководителю контролировать процессы. Битрикс24 CRM работает на результат. Регистрируйтесь бесплатно Зарегистрироваться #реклама 16+ bitrix24.ru О рекламодателе

🤔 Как происходит процесс утечки? Обычно это происходит, когда ссылки на объекты сохраняются, даже если они больше не нужны: в глобальных переменных, замыканиях, обработчиках событий, коллекциях (Map, Set) и таймерах. GC не может очистить объект, пока есть ссылка на него. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как передать данные из родительского компонента в дочерний? Передача данных из родительского компонента в дочерний компонент — это одна из основных задач в работе с компонентами в React. Это делается с помощью пропсов (props). Пропсы — это способ передачи данных и событий от родительского компонента к дочернему. 🚩Шаги для передачи данных из родительского компонента в дочерний 1⃣Создание родительского компонента В родительском компоненте мы создаем состояние или просто определяем данные, которые хотим передать. Затем передаем эти данные в дочерний компонент через пропсы. 2⃣Приём данных в дочернем компоненте В дочернем компоненте мы получаем пропсы и используем их для отображения данных или выполнения других действий. Родительский компонент (ParentComponent.js)

import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
    const message = "Привет, дочерний компонент!";
    
    return (
        <div>
            <h1>Родительский компонент</h1>
            <ChildComponent message={message} />
        </div>
    );
}

export default ParentComponent;

Дочерний компонент (ChildComponent.js)

import React from 'react';

function ChildComponent(props) {
    return (
        <div>
            <h2>Дочерний компонент</h2>
            <p>{props.message}</p>
        </div>
    );
}

export default ChildComponent;

🚩Пояснение 1⃣В родительском компоненте `ParentComponent`: Создаем переменную message, содержащую строку "Привет, дочерний компонент!". В JSX разметке мы рендерим дочерний компонент ChildComponent, передавая ему пропс message со значением переменной message. 2⃣В дочернем компоненте ChildComponent: Принимаем пропс message через параметр props. Используем props.message для отображения переданной строки внутри тега <p>. 🚩Дополнительные примеры Родительский компонент (ParentComponent.js)

import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
    const user = {
        name: "Иван",
        age: 25
    };
    
    return (
        <div>
            <h1>Родительский компонент</h1>
            <ChildComponent user={user} />
        </div>
    );
}

export default ParentComponent;

Дочерний компонент (ChildComponent.js)

import React from 'react';

function ChildComponent(props) {
    return (
        <div>
            <h2>Дочерний компонент</h2>
            <p>Имя: {props.user.name}</p>
            <p>Возраст: {props.user.age}</p>
        </div>
    );
}

export default ChildComponent;

Ставь 👍 и забирай 📚 Базу знаний

Tefal X-Clean 10: Умные технологии для комфортной уборки Tefal X-Clean 10 — беспроводной моющий вертикальный пылесос для влажной уборки. Главная изюминка — система самоочистки роликовой щётки и сушка горячим воздухом до 65°C Подробнее #реклама tefal.ru О рекламодателе

🤔 Какие форматы изображений? - jpeg, png, gif, svg, webp, avif. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Расскажи про особенности свойства color color – одно из самых базовых CSS-свойств, которое отвечает за цвет текста и текста в элементах (например, градиентных фонах и SVG).

p {
  color: red;
}

🟠Какие значения принимает `color`? CSS позволяет задавать цвета несколькими способами 🟠Особенности работы `color` Наследование color наследуется потомками по умолчанию, в отличие от многих других свойств CSS (например, background).

body {
  color: blue;
}
p {
  color: inherit; /* Явное наследование */
}

currentColor — скрытое золото Это специальное значение, которое означает "используй текущее значение color". Очень полезно для стилизации border, box-shadow, outline и SVG.

button {
  color: red;
  border: 2px solid currentColor; /* Использует color */
}

transparent — особый цвет

p {
  color: transparent;
}

Когда rgba() или hsla() лучше

p {
  color: rgba(255, 0, 0, 0.5); /* Полупрозрачный красный */
}

color и mix-blend-mode Можно заставить текст взаимодействовать с фоном с помощью mix-blend-mode

h1 {
  color: white;
  mix-blend-mode: difference;
}

color в ::selection и ::placeholder Некоторые элементы (например, выделенный текст или placeholder в input) требуют отдельного указания color

::selection {
  background: blue;
  color: white;
}

input::placeholder {
  color: gray;
}

Ставь 👍 и забирай 📚 Базу знаний

🤔 Какие протоколы взаимодействия известны? Среди популярных протоколов — HTTP/HTTPS, WebSocket для двусторонней связи, FTP для передачи файлов, SMTP и IMAP для электронной почты, а также REST и GraphQL для API. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое amp страницы? AMP (Accelerated Mobile Pages) — это технология от Google, которая позволяет создавать очень быстрые и легкие веб-страницы для мобильных устройств. AMP-страницы загружаются почти мгновенно, потому что: Используют оптимизированный HTML (AMP HTML) Ограничивают использование JavaScript Подключают Google AMP Cache для мгновенной загрузки 🚩Зачем нужны AMP? Ускоряют загрузку страниц → полезно для мобильных пользователей Улучшают SEO → Google любит быстрые сайты Увеличивают CTR → в поиске AMP-страницы помечены ⚡️ и привлекают внимание Снижают нагрузку на сервер 🚩Как создать AMP-страницу? AMP-страница – это обычный HTML, но с ограничениями и своими тегами.

<!DOCTYPE html>
<html ⚡️ lang="ru">
<head>
  <meta charset="UTF-8">
  <title>AMP Страница</title>
  <link rel="canonical" href="https://example.com/normal-page.html">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <style amp-boilerplate>
    body { visibility: hidden; }
  </style>
  <noscript>
    <style amp-boilerplate>
      body { visibility: visible; }
    </style>
  </noscript>
</head>
<body>
  <h1>Привет, это AMP!</h1>
  <amp-img src="image.jpg" width="600" height="400" layout="responsive"></amp-img>
</body>
</html>

Ставь 👍 и забирай 📚 Базу знаний

🤔 Зачем нужен линтер? - Помогает находить ошибки на этапе написания кода. - Улучшает стиль кодирования по стандартам (Prettier, Airbnb). - Повышает читаемость и поддерживаемость кода. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Какие есть значения у box-sizing? Свойство box-sizing в CSS управляет тем, как рассчитываются размеры элемента, включая ширину и высоту. Оно определяет, включаются ли в эти размеры внутренние отступы (padding) и границы (border), или же они добавляются отдельно. 🚩Возможные значения `box-sizing` 🟠`content-box` Размеры элемента считаются только по `width` и `height`, без учета padding и border. Если добавить padding или border, фактические размеры элемента увеличатся.

   .box {
       width: 200px;
       height: 100px;
       padding: 20px;
       border: 10px solid black;
       box-sizing: content-box;
   }

🟠`border-box` width и height включают padding и border. Внутреннее содержимое (content) будет автоматически уменьшаться, чтобы уложиться в заданные размеры.

   .box {
       width: 200px;
       height: 100px;
       padding: 20px;
       border: 10px solid black;
       box-sizing: border-box;
   }

🟠`inherit` Наследует значение box-sizing от родительского элемента.

   .parent {
       box-sizing: border-box;
   }
   .child {
       box-sizing: inherit; /* Унаследует border-box */
   }

Ставь 👍 и забирай 📚 Базу знаний

Запустите рекламу в телеграм-каналах с Яндекс Директом Перфоманс-реклама теперь в телеграм-каналах ⚡ Яндекс Директ знает, как привлечь целевую аудиторию 💰👌 Попробовать #реклама yandex.ru О рекламодателе

🤔 Как ещё можно структурировать HTML-страницу? - Через семантические теги: header, main, section, article, footer, aside. - Использовать div для группировки, nav для навигации и т.д. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Ваша история в IT начинается в Авито 🚀 Хотите расти в разработке — приходите на оплачиваемую стажировку в Авито. Мы ищем будущих специалистов в направлениях Frontend, Backend, QA и Android. Вы будете работать над продуктами, которыми ежедневно пользуются миллионы людей, и прокачивать навыки с помощью: ➡️ наставника — подскажет, как мыслить в процессе решения задач; ➡️ комьюнити стажёров — всегда рядом, чтобы обсудить задачи и поддержать; ➡️ корпоративных курсов, библиотек и баз знаний — всё, чтобы развиваться быстрее. Выберите два направления — основное и запасное. Если не получится попасть в первое, сможете пройти отбор на второе при наличии мест. Условия: ➡️ зарплата и корпоративный ноутбук, ➡️ формат — офис, удалёнка или гибрид, ➡️ от 25 часов в неделю, ➡️ продолжительность — 9 месяцев, ➡️ компенсация питания, консультации с психологами и юристами, ➡️ после стажировки — возможность остаться в команде, если покажите крутой результат. 📌 Регистрация открыта до 12 ноября. Подать заявку можно по ссылке.