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

🤔 Как css спрайты реализуются на странице или сайте? CSS-спрайты – это метод объединения нескольких изображений в один файл для оптимизации загрузки и отображения на веб-странице. 🚩Зачем нужны спрайты? Уменьшают количество HTTP-запросов → вместо 10 изображений браузер загружает 1 файл Ускоряют загрузку сайта → меньше сетевой нагрузки Кэшируются в браузере → реже загружаются заново 🟠Создание CSS-спрайта Допустим, у нас есть 3 иконки: icon-home.png icon-user.png icon-settings.png Мы объединяем их в один файл (sprite.png): ![sprite] 🟠Использование спрайта с CSS Теперь нам нужно показать нужную часть изображения с помощью background-position.

.sprite {
  background: url("sprite.png") no-repeat;
  display: inline-block;
  width: 32px;
  height: 32px;
}

/* Позиции каждой иконки */
.icon-home { background-position: 0 0; }  /* Первая иконка */
.icon-user { background-position: -32px 0; }  /* Вторая иконка */
.icon-settings { background-position: -64px 0; }  /* Третья иконка */

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

Устала от серых будней? Хочешь жить ярко, зарабатывать и быть востребованной? Устала от серых будней? Хочешь жить ярко, зарабатывать и быть востребованной? На бесплатном вебинаре ты узнаешь, как стать турагентом без опыта и начать работать из дома. Гибкий график, стабильный доход, работа с людьми — всё это по-настоящему твое. Не хочешь больше терять время? На этот раз путь выбран за тебя: понятно, быстро, без ботов и лишних усилий. Запишись на вебинар сейчас — и сделай первый шаг к свободе, уважению и жизни, о которой мечтала. Записаться #реклама 16+ via-tourism-school.space О рекламодателе

🤔 Приведи пример микрозадач Примеры микрозадач в JavaScript включают колбэки, связанные с Promise (методы .then(), .catch(), .finally()), а также MutationObserver. Эти задачи добавляются в очередь микрозадач и выполняются сразу после текущего стека вызовов, но до выполнения макрозадач, таких как таймеры или события из очереди событий. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Приходите на ИТ-пикник Приглашаем на семейный фестиваль для опытных ИТ-специалистов. Будут лекции, мастер-классы, квесты и выступления известных исполнителей. Когда: 16 августа Где: музей-заповедник «Коломенское» Участие платное. Больше подробностей на сайте. Зарегистрироваться #реклама 16+ it-picnic.ru О рекламодателе

🤔 Как считается вес селектора? Вес селектора (специфичность) – это правило, по которому браузер определяет, какой стиль применить, если есть несколько конфликтующих селекторов.

( inline, id, class/атрибут/псевдокласс, элемент/псевдоэлемент )

Пример

/* Специфичность: (0, 1, 0, 0) */
#header { color: red; }

/* Специфичность: (0, 0, 1, 0) */
.header { color: blue; }

/* Специфичность: (0, 0, 0, 1) */
h1 { color: green; }

🟠Примеры сравнения специфичности Пример 1

h1 { color: red; } /* (0,0,0,1) */
.title { color: blue; } /* (0,0,1,0) */

Пример 2

h1 { color: red; } /* (0,0,0,1) */
#main { color: blue; } /* (0,1,0,0) */

Пример 3 (комбинированные селекторы)

h1.title { color: red; } /* (0,0,1,1) */
#main h1 { color: blue; } /* (0,1,0,1) */

Пример 4 (инлайн-стиль всегда сильнее)

<h1 style="color: green;">Заголовок</h1>

h1 { color: red; } /* (0,0,0,1) */
.title { color: blue; } /* (0,0,1,0) */
#main { color: purple; } /* (0,1,0,0) */

🟠Как повысить вес селектора? Добавить ID (но не злоупотреблять). Использовать более специфичные селекторы (например, .header h1 вместо h1). Использовать !important (но осторожно!).

h1 { color: red !important; } /* Всегда будет красным */

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

Приобретайте Solaris HC выгодно этим летом! Настоящий бестселлер. Проверен российскими дорогами. Комфортный семейный кроссовер. Покупайте Solaric HC и получите шанс выиграть семейный трофи-тур в Карелию для всей семьи: автопутешествие по уникальным природным местам с подготовленным маршрутом и территорией. Оставляйте заявку сейчас. Предложение ограничено до конца лета! Узнать цену #реклама solaris.auto О рекламодателе

🤔 Что такое float? float — CSS-свойство, которое позволяет обтекать элемент другими элементами (чаще всего — текстом). Использовался для верстки до появления flex и grid. Сейчас float чаще применяется для обтекания картинок. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

📺 Уникальная база IT собеседований 456+ реальных собеседований на программиста, тестировщика, аналитика и прочие IT профы. Есть собесы от ведущих компаний: Сбер, Яндекс, ВТБ, Тинькофф, Озон, Wildberries и т.д. 🎯 Переходи по ссылке и присоединяйся к базе, чтобы прокачать свои шансы на успешное трудоустройство!

🤔 В какой последователности будут вызываться хуки при использовании хуков жизненного цикла в миксине и подключении его в компонент? В Vue 2 и Vue 3 можно подключать миксины (mixins), которые добавляют в компонент дополнительные методы, данные и хуки жизненного цикла. 🚩Пример в Vue 2 Миксин (myMixin.js)

export default {
  created() {
    console.log("🌍 Миксин: created");
  }
};

Компонент (MyComponent.vue)

<script>
import myMixin from "./myMixin.js";

export default {
  mixins: [myMixin],
  created() {
    console.log("📦 Компонент: created");
  }
};
</script>

Вывод в консоль при создании компонента

Миксин: created
Компонент: created

Vue 3: хуки вызываются так же Если использовать setup(), он выполнится после хуков миксина

import { onMounted } from "vue";
export default {
  mixins: [myMixin],
  setup() {
    console.log("🚀 setup()");
  },
  mounted() {
    console.log("📦 Компонент: mounted");
  }
};

Вывод в консоль

Миксин: mounted
setup()
Компонент: mounted

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

Виртуальная инфраструктура с GPU Протестируйте новый сервис «Виртуальная инфраструктура с GPU». ⚡Первыми на рынке запускаем это решение с инновационными NVIDIA H200. В составе «Публичного облака» услуга доступна в двух вариантах: ✅ виртуальные машины; ✅ Linux-контейнеры с GPU на базе NVIDIA H200. Хотите протестировать флагманскую инфраструктуру? Оставьте заявку на сайте или напишите нам на почту. Попробовать #реклама 16+ cloud.rt.ru О рекламодателе

🤔 Какие числовые значения имеют true/false? - true → 1 - false → 0 Это часто используется при приведении типов, в логике, арифметике или при передаче булевых значений в числовой контекст. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

👩‍💻 Ищем JavaScript разработчиков. Релокейт, удалёнка, платим много! Специально для Вас, собираем лучшие вакансии по JavaScript с прямыми контактами в Telegram: 👩‍💻 Fronted Jobs - для фронтендеров 👩‍💻 Node.Js Jobs - для бекендеров Подпишись чтобы не упустить свой шанс получить лучший оффер!

🤔 Как удалить все элементы с массива? Чтобы удалить все элементы из массива в JavaScript, можно использовать несколько способов, в зависимости от ваших целей. 🟠Установка длины массива в 0 JavaScript позволяет вручную изменять длину массива. Если установить длину массива равной 0, все его элементы будут удалены.

let arr = [1, 2, 3, 4, 5];
arr.length = 0;

console.log(arr); // []

🟠Присвоение пустого массива Можно просто присвоить переменной новый пустой массив.

let arr = [1, 2, 3, 4, 5];
arr = [];

console.log(arr); // []

Пример

let arr = [1, 2, 3, 4, 5];
let reference = arr;

arr = [];
console.log(arr);       // []
console.log(reference); // [1, 2, 3, 4, 5]

🟠Использование метода `splice` Метод splice позволяет удалять элементы из массива. Если указать удаление всех элементов, массив станет пустым.

let arr = [1, 2, 3, 4, 5];
arr.splice(0, arr.length);

console.log(arr); // []

🟠Использование цикла (редко применяется) Хотя это не самый эффективный способ, можно очистить массив с помощью цикла.

let arr = [1, 2, 3, 4, 5];
while (arr.length > 0) {
  arr.pop(); // Удаляем последний элемент
}

console.log(arr); // []

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

🤔 Как оптимизировать рендер в компонентах? Чтобы избежать лишнего рендера и повысить производительность: - Использовать React.memo() — мемоизация компонента на основе пропсов. - Применять useMemo() — мемоизация вычисляемых значений. - Использовать useCallback() — мемоизация колбэков, чтобы не пересоздавать функции. - Разбивать большие компоненты на мелкие. - Следить за key в списках (в map), чтобы избежать полного пересоздания. - Избегать анонимных функций в render, если они передаются в потомки. - Использовать shouldComponentUpdate в классовых компонентах или React.PureComponent. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что происходит в момент запроса в браузере? Когда пользователь вводит URL в адресную строку браузера и нажимает Enter, происходит ряд шагов для получения и отображения запрашиваемой веб-страницы. Этот процесс включает взаимодействие различных компонентов сети и веб-технологий. 🟠Ввод URL и начало запроса Пользователь вводит URL в адресную строку браузера. Браузер проверяет кэш браузера для определения, есть ли сохраненная копия запрашиваемого ресурса. Если ресурс найден в кэше и он актуален, страница загружается из кэша, минуя сетевые запросы. 🟠DNS-разрешение Если ресурс не найден в кэше, браузер выполняет запрос к DNS-серверу для преобразования доменного имени (например, www.example.com) в IP-адрес сервера. 🟠Установление TCP-соединения После получения IP-адреса браузер устанавливает TCP-соединение с сервером. Этот процесс включает в себя трехэтапное рукопожатие: Браузер отправляет SYN-пакет серверу. Сервер отвечает SYN-ACK пакетом. Браузер отправляет ACK-пакет, подтверждая установление соединения. 🟠HTTPS и SSL/TLS Если URL использует HTTPS, происходит дополнительный этап установки защищенного соединения с использованием SSL/TLS: Браузер и сервер обмениваются сертификатами и выполняют шифрование данных. 🟠Отправка HTTP-запроса Браузер отправляет HTTP-запрос на сервер. Например, для получения главной страницы сайта может быть отправлен следующий запрос:

          GET / HTTP/1.1
     Host: www.example.com

🟠Обработка запроса на сервере Сервер принимает запрос, обрабатывает его, генерирует ответ и отправляет его обратно клиенту. Сервер может выполнять различные задачи, такие как доступ к базе данных, обработка логики приложения и рендеринг страниц. 🟠Получение и обработка HTTP-ответа Браузер получает HTTP-ответ от сервера. Ответ включает в себя статусный код, заголовки и тело (содержимое) ответа. Пример HTTP-ответа:

          HTTP/1.1 200 OK
     Content-Type: text/html
     Content-Length: 1234

     <!DOCTYPE html>
     <html>
     <head>
       <title>Пример страницы</title>
     </head>
     <body>
       <h1>Добро пожаловать!</h1>
     </body>
     </html>
     

🟠Парсинг и рендеринг страницы Браузер начинает парсинг HTML-документа. Этот процесс включает построение DOM (Document Object Model) — структуры дерева, представляющей элементы страницы. В процессе парсинга HTML браузер может обнаруживать ссылки на другие ресурсы, такие как CSS, JavaScript, изображения и шрифты, и отправлять дополнительные HTTP-запросы для их загрузки. 🟠Выполнение JavaScript После парсинга HTML и CSS браузер начинает выполнение встроенных и внешних JavaScript-скриптов. JavaScript может изменять DOM и CSSOM (CSS Object Model), что приводит к изменениям в отображении страницы. JavaScript также может отправлять асинхронные запросы (AJAX) для динамической загрузки данных и обновления страницы без перезагрузки. Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое SPA? SPA (Single Page Application) — это приложение, в котором вся логика и интерфейс загружаются на одной странице, а переходы и обновления происходят без перезагрузки. Данные подгружаются через API-запросы. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Какие знаешь подходы по написанию css? Существует несколько методологий и подходов к написанию CSS, которые помогают структурировать код, сделать его более читаемым, масштабируемым и поддерживаемым. Рассмотрим основные. 🟠Классический (обычный) CSS Стандартное написание CSS без структурных ограничений.

.button {
  background-color: blue;
  color: white;
  padding: 10px;
}

🟠BEM (Block Element Modifier) BEM — один из самых популярных методологий. Он помогает избежать конфликтов классов и улучшает читаемость кода. - Block (Блок) — независимый компонент (.button). - Element (Элемент) — часть блока (.button__icon). - Modifier (Модификатор) — изменение блока (.button--primary).

<button class="button button--primary">
  <span class="button__icon"></span> Нажми меня
</button>

.button {
  background-color: gray;
  color: white;
  padding: 10px;
}

.button--primary {
  background-color: blue;
}

.button__icon {
  margin-right: 5px;
}

🟠OOCSS (Object-Oriented CSS) OOCSS (Объектно-ориентированный CSS) предлагает разбивать стили на структуру и внешний вид, чтобы повторно использовать код.

.card {
  border: 1px solid #ccc;
  padding: 10px;
}

.card--dark {
  background-color: black;
  color: white;
}

🟠CSS-in-JS (Styled Components, Emotion) Этот подход популярен в React и других фреймворках, где стили пишутся внутри JavaScript.

import styled from 'styled-components';

const Button = styled.button`
  background-color: blue;
  color: white;
  padding: 10px;
`;

export default function App() {
  return <Button>Нажми меня</Button>;
}

🟠Utility-First (Tailwind CSS) В этом подходе используются готовые утилитарные классы для быстрого стилизации.

<button class="bg-blue-500 text-white p-2 rounded">Кнопка</button>

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

🤔 Зачем нам разбивать приложение отдельно на backend и frontend? Для масштабируемости, разделения ответственности, независимой разработки и деплоя. Это упрощает работу в команде и позволяет фронтенду использовать разные технологии (React, Vue), а бэкенду — работать через API. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как работают плавающие элементы (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;
}

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

🤔 Кому видны данные, хранящиеся в localStorage, sessionStorage и cookies? - localStorage и sessionStorage: — доступны только в браузере, на текущем домене и не отправляются на сервер. — localStorage сохраняется между сессиями, sessionStorage — только на время вкладки. - cookies: — могут быть доступны как JavaScript, так и отправляться на сервер при каждом запросе (если не указано HttpOnly). — используются для авторизации, трекинга, хранения предпочтений. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний