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

🤔 Какие проблемы решает eventloop? Event Loop (Цикл событий) – это механизм, который позволяет JavaScript работать асинхронно, обрабатывать события и не блокировать основной поток выполнения. Он решает несколько важных проблем, которые были бы сложны без него. 🚩JavaScript однопоточный, но нужно выполнять асинхронные задачи JavaScript работает в одном потоке, то есть выполняет код последовательно. Если одна операция занимает много времени (например, загрузка данных с сервера), выполнение всего кода остановилось бы, пока задача не завершится. Это привело бы к зависанию страницы. Event Loop позволяет выполнять тяжёлые операции (например, запросы на сервер, таймеры) асинхронно, не блокируя основной поток.

console.log("1: Перед запросом");

setTimeout(() => {
  console.log("2: Данные загружены");
}, 2000);

console.log("3: После запроса");

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

1: Перед запросом  
3: После запроса  
2: Данные загружены (спустя 2 секунды)

🚩Обработка пользовательских событий без зависаний Если бы JavaScript не мог обрабатывать события асинхронно, то нажатия кнопок, прокрутка страницы и другие действия зависали бы, пока выполняется тяжёлая операция. Event Loop ставит события (например, click, keydown) в очередь и обрабатывает их только когда основной поток свободен.

document.querySelector("button").addEventListener("click", () => {
  console.log("Кнопка нажата!");
});

🚩Загрузка данных без блокировки страницы Когда мы загружаем данные с сервера (fetch, setTimeout, setInterval), они не приходят мгновенно. Без Event Loop браузер бы зависал в ожидании ответа. Асинхронные запросы (fetch, XMLHttpRequest) выполняются в фоновом режиме. Когда ответ готов, он помещается в очередь задач и обрабатывается, когда основной поток освободится.

console.log("Запрос данных...");

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then(response => response.json())
  .then(data => console.log("Данные получены:", data));

console.log("Код выполняется дальше!");

Вывод

Запрос данных...  
Код выполняется дальше!  
(Спустя время) Данные получены: {id: 1, title: "..."}

🚩Обход блокировки в тяжёлых вычислениях Если в коде идёт сложная операция (например, сложные вычисления или рендеринг огромного списка), интерфейс зависнет. Можно разбить задачу на части и выполнять её постепенно с помощью setTimeout или requestAnimationFrame.

let count = 0;

function heavyTask() {
  for (let i = 0; i < 1e6; i++) {
    count++;
  }
  console.log("Часть работы выполнена!");

  if (count < 5e6) {
    setTimeout(heavyTask, 0); // Даем Event Loop обработать другие задачи
  }
}

heavyTask();

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

Новейшие игровые ноутбуки MSI 2026 Новейшая серия игровых ноутбуков MSI — идеальный баланс невероятной вычислительной мощи и бескомпромиссной производительности, созданный для самых требовательных задач. Передовые многоядерные процессоры последнего поколения и высокопроизводительные дискретные видеокарты позволяют с лёгкостью погружаться в работу и игру, наслаждаясь безупречным комфортом. Ноутбуки данной серии подходят геймерам, дизайнерам и профессионалам, которым важны скорость и качество изображения. Узнать больше #реклама msi.gm О рекламодателе

🤔 Как задать Flexbox? Нужно установить контейнеру свойство display: flex. Его содержимое становится flex-элементами, которые подчиняются гибкой системе распределения. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Не знак свыше, а точный таргетинг Теперь всем, кто продвигается через CTV в Яндекс Директе, стало проще находить свою аудиторию. Таргетингов стало в 5 раз больше. Вот что нового: — Таргетинг по интересам. Например, можно выбрать не всех, кто интересуется спортом, а только любителей фитнеса или тенниса. — Таргетинг по привычкам. Находите аудиторию по поведению в онлайне и офлайне — например, тех, кто регулярно посещает торговые центры или часто покупает товары в интернете. — Более гибкие настройки. Можно сочетать интересы и социально-демографические характеристики с жанрами и тематиками контента. 👌 Используйте новые возможности, чтобы сделать рекламу на Connected TV еще эффективнее Узнать больше #реклама yandex.ru О рекламодателе

🤔 Зачем создавались библиотеки react и другие? Библиотеки, такие как React, создавались для упрощения и оптимизации процесса разработки пользовательских интерфейсов (UI). Вот несколько ключевых причин, почему создавались React и другие библиотеки: 🟠Повышение эффективности разработки Написание большого количества кода вручную для создания динамических веб-страниц может быть громоздким и ошибочным. React позволяет разбивать интерфейс на отдельные компоненты, которые можно повторно использовать и комбинировать. Это снижает объем дублирующегося кода и упрощает его сопровождение. 🟠Улучшение производительности Постоянное обновление DOM (Document Object Model) может быть медленным и ресурсоемким. React использует виртуальный DOM, который минимизирует количество реальных изменений в DOM, обновляя только те элементы, которые действительно изменились. 🟠Облегчение работы с состоянием приложения Управление состоянием больших и сложных приложений может стать хаотичным. React предоставляет механизмы для удобного управления состоянием компонентов с помощью useState, useReducer, и других хуков. Это делает логику управления состоянием более ясной и предсказуемой. 🟠Улучшение масштабируемости и поддерживаемости кода По мере роста приложения, код может стать сложным для понимания и изменения. Подход к компонентам в React позволяет разработчикам легче разделять задачи и работать над отдельными частями приложения независимо друг от друга. Это улучшает масштабируемость и поддерживаемость кода. 🟠Сообщество и экосистема Наличие обширного сообщества и инструментов для разработки. React имеет большое сообщество разработчиков, множество библиотек и инструментов, которые упрощают разработку и интеграцию различных функций в приложения.

import React, { useState } from 'react';

function Counter() {
  // Определение состояния count с начальным значением 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Вы кликнули {count} раз(а)</p>
      <button onClick={() => setCount(count + 1)}>
        Кликни меня
      </button>
    </div>
  );
}

export default Counter;

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

Профессор Gurufy 🎓 Gurufy — ИИ-сервис, который собирает полноценный курс по любой теме под вас. 📚 ChatGPT хорош для простых вопросов. Но там, где нужен настоящий курс, работает Gurufy: он учитывает ваш уровень и цель. ⚡ План, статьи с иллюстрациями и интерактивными виджетами, задания — и ИИ-ассистент, которому можно задать вопрос, если что-то не даётся. ✨ Не платите десятки тысяч за курс «для всех» и не собирайте тему по крупицам из статей: персональный курс выходит в 500–1000 ₽, а старт — бесплатный. Узнать больше #реклама 16+ gurufy.ru О рекламодателе

🤔 Какой формат видеофайлов сейчас поддерживается HTML5? Современные браузеры поддерживают: - MP4 (H.264/AAC) — наиболее универсальный; - WebM (VP8/VP9) — открыт и эффективен; - Ogg (Theora/Vorbis) — реже используется, поддерживается не везде. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Начните пользоваться Kaspersky Premium бесплатно 30 дней Kaspersky Premium бесплатно: – защита от вирусов и взломов – безопасность платежей и данных – блокировка спам-звонков – и ещё больше возможностей Попробуйте! Узнать больше #реклама 16+ kaspersky.ru О рекламодателе

🤔 Как браузер понимает что картинка является картинкой? Браузер понимает, что файл является картинкой, благодаря MIME-типу, расширению файла и контексту его использования в HTML. Рассмотрим подробнее. 🟠MIME-тип (Media Type) MIME-тип (Multipurpose Internet Mail Extensions) сообщает браузеру, какой тип контента загружается. Например: - image/png → PNG - image/jpeg → JPEG - image/svg+xml → SVG - image/gif → GIF - image/webp → WebP

Content-Type: image/png

🟠Расширение файла Хотя MIME-тип важнее, браузер также может ориентироваться на расширение файла (.jpg, .png, .gif).

<img src="picture.jpg" alt="Картинка">

🟠HTML-теги и атрибуты Когда браузер встречает в коде такие теги, как <img>, <picture>, <canvas>, он ожидает, что внутри будет изображение.

<img src="image.png" alt="Пример картинки">

🟠Формат и сигнатура файла Даже если расширение и MIME-тип указаны неверно, браузер может проверить сигнатуру файла (первые байты). Например: - PNG-файл всегда начинается с байтов 89 50 4E 47 (что означает "PNG" в ASCII). - JPEG — FF D8 FF. - GIF — 47 49 46 38 (GIF89a). Ставь 👍 и забирай 📚 Базу знаний

Услуги дата-центра в Москве Размещение и аренда серверного оборудования в дата-центре. 👍 4 современных дата-центра в Москве. 👍 Лицензированный оператор связи. 👍 Индивидуальные конфигурации выделенных серверов под задачи клиента. 👍 Круглосуточная техническая поддержка в Телеграм, без ботов. Узнать цену #реклама 16+ itsoft.ru О рекламодателе

🤔 Как отслеживаем активность пользователя? - События (click, scroll, mousemove). - Инструменты: Yandex.Metrika, Google Analytics, PostHog. - Собственные endpoint'ы POST /track. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Онлайн-магистратура для IT: ИТМО, МИФИ + Яндекс Программы онлайн-магистратуры ИТМО и МИФИ в партнёрстве с Яндексом. Актуальные знания, практическое обучение и гибкий график. Учитесь, совмещая с работой. Доступна господдержка оплаты, отсрочка от армии Перейти на сайт #реклама 16+ practicum.yandex.ru О рекламодателе

🤔 Как методы будут у api? В API (Application Programming Interface) обычно используются HTTP-методы, которые определяют, какое действие нужно выполнить с ресурсом (данными). 🚩Примеры использования 🟠`GET` – Получение данных Запрашиваем список пользователей:

GET /users HTTP/1.1
Host: api.example.com

Ответ (JSON)

[
  { "id": 1, "name": "Alice" },
  { "id": 2, "name": "Bob" }
]

🟠`POST` – Создание нового ресурса Отправляем данные нового пользователя:

POST /users HTTP/1.1
Host: api.example.com
Content-Type: application/json

{
  "name": "Charlie",
  "email": "charlie@example.com"
}

Ответ (201 Created)

{
  "id": 3,
  "name": "Charlie",
  "email": "charlie@example.com"
}

🟠`PUT` – Полное обновление ресурса Заменяем пользователя с ID 1:

PUT /users/1 HTTP/1.1
Host: api.example.com
Content-Type: application/json

{
  "name": "Alice Smith",
  "email": "alice.smith@example.com"
}

🟠`PATCH` – Частичное обновление ресурса Меняем только имя пользователя 1, не трогая email:

PATCH /users/1 HTTP/1.1
Host: api.example.com
Content-Type: application/json

{
  "name": "Alice Johnson"
}

🟠`DELETE` – Удаление ресурса Удаляем пользователя с ID 2:

DELETE /users/2 HTTP/1.1
Host: api.example.com

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

Полная ликвидация склада - скидка до 50% на новый айфон В поисках где купить оригинальный айфон и главное по приятной цене? Переходите и получайте купить по скидке до 50%. Переходите к нам в канал! Перейти на сайт #реклама trostcarts.com О рекламодателе

🤔 Когда используются переменные var, let, const? - var: устаревший способ, имеет функцию как область видимости и может быть переопределён. - let: используется для переменных, которые могут изменяться, имеет блочную область видимости. - const: для неизменяемых переменных (значение не может быть переназначено). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Почему map используют чаще, чем объект? Хотя объекты {} исторически использовались как ассоциативные массивы (ключ-значение), у Map есть ряд преимуществ, которые делают его более удобным в большинстве случаев. 🟠`Map` может использовать любые типы данных в качестве ключей В объектах {} ключи всегда автоматически приводятся к строке.

const obj = {};
const key1 = {};
const key2 = {};

obj[key1] = "value1";
obj[key2] = "value2";

console.log(obj); // { '[object Object]': 'value2' }
console.log(obj[key1]); // "value2" (ключи перезаписались, потому что оба стали "[object Object]")

Пример с Map:

const map = new Map();
map.set(key1, "value1");
map.set(key2, "value2");

console.log(map.get(key1)); // "value1"
console.log(map.get(key2)); // "value2"

🟠`Map` хранит порядок ключей В объекте {} порядок ключей не гарантируется (особенно для числовых ключей).

const obj = { 2: "two", 1: "one", 3: "three" };
console.log(Object.keys(obj)); // ["1", "2", "3"] (порядок числовых ключей изменился!)

Пример с Map

const map = new Map();
map.set(2, "two");
map.set(1, "one");
map.set(3, "three");

console.log([...map.keys()]); // [2, 1, 3] (порядок сохраняется!)

🟠`Map` быстрее при частых добавлениях/удалениях Объекты {} оптимизированы для хранения структуры данных, но операции delete и Object.keys(obj).length могут быть медленными, потому что движок JavaScript выполняет дополнительные проверки. Разница в скорости В Map операции .set(), .get(), .delete() выполняются быстрее. В объекте {} delete obj[key] может работать медленнее, так как JavaScript оптимизирует объекты для других целей. 🟠У `Map` есть удобные методы Объект {} не имеет встроенных методов для работы с ключами и значениями. Чтобы, например, узнать размер объекта, приходится использовать Object.keys(obj).length.

const map = new Map();
map.set("a", 1);
map.set("b", 2);

console.log(map.size); // 2
console.log(map.has("a")); // true
console.log(map.delete("b")); // true (удалит "b")

В объекте {}

const obj = { a: 1, b: 2 };

console.log(Object.keys(obj).length); // 2 (нужно вызывать Object.keys())
console.log(obj.hasOwnProperty("a")); // true (менее удобный синтаксис)
delete obj.b; // Удаление ключа

🟠`Map` не имеет проблем с прототипами В объекте {} могут быть неожиданные проблемы, если ключ совпадает с именем встроенного метода.

const obj = {};
console.log(obj.toString); // [Function: toString] (унаследованное свойство!)
console.log(obj["toString"]); // [Function: toString] (может вызвать баги)

Чтобы обойти это, приходится делать так

const obj = Object.create(null); // Теперь у объекта нет прототипа
obj.toString = "custom";
console.log(obj.toString); // "custom"

В Map таких проблем нет

const map = new Map();
map.set("toString", "custom");
console.log(map.get("toString")); // "custom" (никаких багов!)

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

Яндекс Музыка до 360 дней бесплатно Яндекс Музыка для вас и 3-х ваших близких. Кинопоиск и Яндекс Книги тоже в мультиподписке Плюс. Попробуйте бесплатно❤️ Слушать #реклама 18+ music.yandex.ru О рекламодателе

🤔 Как пользоваться линтером JS? Линтер – инструмент для анализа кода. Самый популярный – ESLint. 1. Установить: 2. npm install eslint --save-dev 3. Инициализировать: 4. npx eslint --init 5. Проверить код: 6. npx eslint script.js Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как можно вставить svg в html документ? Вставить SVG в HTML можно несколькими способами, в зависимости от того, что вам нужно: просто отобразить изображение, стилизовать его через CSS или динамически изменять с помощью JavaScript. 🟠Прямой (inline) SVG-код в HTML Этот способ позволяет стилизовать и изменять SVG с помощью CSS и JavaScript.

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

🟠Через тег `<img>` Если SVG не нужно изменять, можно вставить его как обычное изображение.

<img src="image.svg" alt="Описание изображения" width="100" height="100">

🟠Через CSS `background-image` SVG можно использовать как фоновое изображение.

<div class="icon"></div>

<style>
  .icon {
    width: 100px;
    height: 100px;
    background-image: url('image.svg');
    background-size: cover;
  }
</style>

🟠Через тег `<object>` Позволяет загружать SVG-файлы и взаимодействовать с ними.

<object type="image/svg+xml" data="image.svg" width="100" height="100"></object>

🟠Через тег `<iframe>` SVG можно загружать в iframe.

<iframe src="image.svg" width="100" height="100"></iframe>

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

🤔 Какие модификаторы есть у v-model? Для двусторонней привязки данных с помощью v-model есть модификаторы, позволяющие изменить стандартное поведение. Например, можно задать обновление значения только при завершении ввода, автоматически преобразовать значение в число или убрать пробелы с краёв строки. Это помогает упростить валидацию данных и уменьшить количество ошибок при вводе. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний