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

Специальность «Интеллектуальный анализ данных» 🎓Открыт набор в Университет IThub 2025-2026! Программа бакалавриата «Прикладная информатика» Программа создана для будущих аналитиков данных и специалистов по машинному обучению, которые хотят работать с большими данными и искусственным интеллектом. Она идеально подойдет выпускникам колледжей, которые получили диплом по IT-специальности: разработке, программированию, информационной безопасности, системному администрированию. Программа сочетает актуальные знания в информатике и навыки работы с данными, что делает выпускников востребованными в IT-компаниях, банках, ритейле и других сферах, где нужен анализ данных. 📚Практические навыки + стажировки и 💰трудоустройство! ✅День открытых дверей 22 июня! Перейти на сайт #реклама 16+ univer.ithub.ru О рекламодателе

🤔 Какие плюсы и минусы работы с Redux? Плюсы: - Централизованное хранилище данных. - Прозрачная структура данных (весь state виден). - Простота тестирования — вся логика сосредоточена в reducer’ах. - Огромное сообщество, поддержка Redux Toolkit, DevTools. Минусы: - Много шаблонного кода (actions, reducers, types). - Ощущается "тяжеловесным" в небольших проектах. - Потенциальная избыточность для простых случаев. - Работа с асинхронностью требует дополнительных библиотек (redux-thunk, redux-saga). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

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

🤔 Почему повсеместно нужен https? HTTPS (HyperText Transfer Protocol Secure) — это безопасная версия HTTP, которая шифрует данные между браузером и сервером. Он защищает пользователей и сайты от перехвата данных, атак и подделки информации. 🚩 Главные причины использовать HTTPS 🟠Шифрование данных (Защита от перехвата) Без HTTPS злоумышленники могут перехватить* данные, например, пароли или банковские карты. В HTTP данные передаются открытым текстом (их легко украсть в открытых Wi-Fi). В HTTPS данные зашифрованы с помощью SSL/TLS, и даже если их перехватят, их невозможно прочитать. 🟠Защита от атак "Человек посередине" (MITM) Без HTTPS злоумышленник может подменить содержимое сайта. Опасные сценарии: Хакер в Wi-Fi кафе встраивает вредоносный код в сайт. Вредоносный провайдер заменяет рекламу или ворует куки. 🟠Google даёт больше доверия к HTTPS-сайтам Google понижает в поиске сайты без HTTPS, а Chrome помечает их как "Небезопасные". 🟠Обязателен для онлайн-платежей и авторизации Для ввода паролей, карт и личных данных HTTPS обязателен по закону (например, PCI DSS для платежей). Если сайт работает без HTTPS, браузеры блокируют передачу банковских данных. Ставь 👍 и забирай 📚 Базу знаний

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

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

🤔 Что такое псевдоэлемент? Это специальный синтаксис, позволяющий стилизовать определенные части элемента или добавлять специальные элементы (как бы "элементы-призраки"), не создавая для этого дополнительные теги в HTML. Псевдоэлементы предоставляют удобный способ внесения изменений в структуру документа, не затрагивая HTML. 🚩Синтаксис Начинается с двойного двоеточия (::), за которым следует название псевдоэлемента. Например, ::before или ::after. 🟠Распространенные псевдоэлементы ::before и ::after: Позволяют вставлять содержимое до или после содержимого выбранного элемента соответственно. Очень часто используются для добавления декоративных элементов.

    p::before {
    content: "«";
    color: blue;
  }
  
  p::after {
    content: "»";
    color: blue;
  }
  

::first-line: Применяет стили к первой строке текста в блочном элементе.

    p::first-line {
    font-weight: bold;
  }
  

::first-letter: Применяет стили к первой букве текста в блочном элементе.

    p::first-letter {
    font-size: 200%;
  }
  

::selection: Применяет стили к части текста, которую пользователь выделил.

    p::selection {
    background: yellow;
  }
  

🚩Особенности работы Работают как часть документа, но на самом деле не существуют в DOM-дереве, а создаются стилями. Чтобы псевдоэлементы ::before и ::after отображались, необходимо задать свойство content, даже если оно пустое (content: "";). Могут быть стилизованы почти так же, как обычные элементы, но есть некоторые ограничения, например, связанные с взаимодействием с JavaScript. Ставь 👍 и забирай 📚 Базу знаний

🤔 Как узнать, что iframe загрузился? Понять, что содержимое iframe загрузилось, можно с помощью событийной модели браузера. После полной загрузки содержимого фрейма браузер вызывает соответствующее событие. Это позволяет выполнять действия после загрузки, например, отображать сообщение пользователю или начинать взаимодействие с контентом внутри фрейма. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Высшее образование дистанционно от 6700 ₽/мес. Поступи в Московский технологический институт в июне! — Высшее образование в московском вузе без выезда на сессии. — Полностью дистанционный онлайн-формат. — Обучайся дома, на работе, в путешествии. — Диплом государственного образца. — 73 направления и программы обучения. — Программа колледж + вуз без ЕГЭ. Скидка 10% на платное обучение при оплате за год. Подать заявку #реклама 16+ mti-vuz.ru О рекламодателе

🤔 Расскажи о действиях в vuex В Vuex (хранилище данных в Vue 2 и 3) actions используются для выполнения асинхронных операций, прежде чем изменить состояние (state). 🚩 Как работают actions? 🟠Определение action в `actions` В actions передаётся объект context, из которого можно вызвать commit() для изменения state.

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    asyncIncrement(context) {
      setTimeout(() => {
        context.commit("increment"); // Вызываем мутацию через 1 сек
      }, 1000);
    }
  }
});

🟠Как вызвать action? Actions вызываются через dispatch(), а не commit().

store.dispatch("asyncIncrement");

🟠Actions с параметрами Можно передавать параметры в dispatch(), чтобы использовать их внутри action.

actions: {
  asyncIncrement(context, payload) {
    setTimeout(() => {
      context.commit("increment");
      console.log("Задержка:", payload.delay);
    }, payload.delay);
  }
}

store.dispatch("asyncIncrement", { delay: 2000 });

🟠Возвращение `Promise` в actions Если action должен дождаться завершения, можно вернуть Promise.

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

store.dispatch("fetchData").then(() => {
  console.log("Данные загружены!");
});

🟠Использование `async/await` в actions Можно использовать async/await, чтобы код выглядел чище.

actions: {
  async fetchData(context) {
    const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
    const data = await response.json();
    console.log("Данные:", data);
  }
}

await store.dispatch("fetchData");
console.log("Данные загружены!");

🟠Actions могут вызывать другие actions Если нужно выполнить несколько actions последовательно, можно вызывать один action внутри другого.

actions: {
  async firstAction(context) {
    console.log("Первый action выполнен");
  },
  async secondAction(context) {
    await context.dispatch("firstAction");
    console.log("Второй action выполнен");
  }
}

store.dispatch("secondAction");
// Выведет: "Первый action выполнен"
// Затем: "Второй action выполнен"

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

VK Weekend Offer для бэкенд-разработчиков 28–29 июня VK проведёт Weekend Offer для бэкендеров с опытом от трёх лет. Участников со знанием Java, Go, Python или C++ ждут технические собеседования, знакомство с продуктами и, если всё сложится, офер уже в конце выходных. Ребята много лет создают облачные решения, системы рекомендаций и поисковые движки — всё с миллионами пользователей в проде — и сейчас ищут новых коллег. Поэтому оставляйте заявку до 25 июня, чтобы попасть в команду за выходные! Подробности — на сайте. Подать заявку #реклама 16+ team.vk.company О рекламодателе

🤔 С помощью чего собирать приложения? - Webpack — сборка модулей, ассетов; - Parcel, Vite, Rollup — лёгкие альтернативы; - Grunt, Gulp — для автоматизации задач; - Babel — транспиляция кода (ES6 → ES5); - Docker — контейнеризация и сборка окружения. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Крупнейший университет искусственного интеллекта Учим использовать ChatGPT в профессиональных целях, создавать нейро-сотрудников и зарабатывать на искусственном интеллекте. ✨ 8 000+ студентов со всего мира ✨ 600+ AI-проектов, созданных студентами ✨ Сборная Университета — победители крупнейших AI-хакатонов России ✨ Стажировки в крупнейших компаниях России (РЖД, Ростелеком, РУДН, Совкомбанк, Самолет и другие) ✨ Трудоустраиваем выпускников в крупнейшие компании (Яндекс, ВТБ, Сбербанк, Роскосмос и другие) Будем рады видеть тебя в наших рядах! Узнать больше #реклама 16+ neural-university.ru О рекламодателе

🤔 Когда используются теги div и span? <div> и <span> — это самые универсальные HTML-теги, но у них разные роли: <div> — блочный контейнер (для структуры). <span> — строчный контейнер (для оформления текста). 🚩Примеры использования `<div>` Разметка секций страницы

<div class="header">Навигация</div>
<div class="content">Основной контент</div>
<div class="footer">Подвал</div>

Группировка элементов

<div class="card">
  <h2>Заголовок</h2>
  <p>Текст внутри карточки</p>
</div>

🚩Когда использовать `<span>`? <span> используется для выделения части текста или небольших элементов. Это строчный элемент, который не переносится на новую строку. 🚩Примеры использования `<span>` Выделение части текста

<p>Сегодня <span class="highlight">солнечная погода</span>.</p>

Иконки, кнопки и маленькие элементы

<button>
  <span class="icon">🔍</span> Поиск
</button>

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

Срочно требуются Веб-Дизайнеры в Figma. Обучим с нуля. Онлайн-программа с наставником и чатом. Осторожно! 80% практики. По результату обучения у вас будет портфолио из нескольких работ. Сертификат о прохождении курса. Возможность пройти полное обучение и получить гарантированное трудоустройство! Учитесь дизайну у профессионалов. Переходи по кнопки: "Узнать больше" и начинай свое обучение. Доступ 0 руб. Узнать больше #реклама 16+ yudaevschool24.online О рекламодателе

🤔 Для чего нужны препроцессоры CSS? Они расширяют стандартный CSS, добавляя возможности: - Переменные — удобно менять цвета, размеры и пр. - Вложенность селекторов — упрощает структуру. - Миксины и функции — переиспользуемые блоки кода. - Условия и циклы — логика в стилях. - Импорты — модульная структура. Всё это делает стили более читаемыми, гибкими и поддерживаемыми. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Продолжение следует в «Летово Игра» ✨Стоит сделать первый шаг в «Летово» — и привычное лето превращается в межгалактическое приключение. Летающие тарелки на горизонте, учёные ловят таинственные сигналы, чтобы встать на защиту планеты, нужно быть готовым к новым открытиям и испытаниям. «Летово Игра» — это образовательная игра для подростков 10–17 лет, созданная на базе школы «Летово» лучшими педагогами и опытными игротехниками. Знания и навыки здесь осваиваются не за партой, а через действия, вызовы и работу в команде. Каждый день - это шаг в неизведанное: новые вызовы, важные задачи, совместные решения.😊 📅Смены длятся 10 дней и стартуют с 1 июля. Количество мест ограничено. Подать заявку #реклама 16+ letovogame.ru О рекламодателе

🤔 Как понимают изменение состояния mobxvue? MobX в Vue работает с реактивностью (как и Vue), но использует свою систему отслеживания изменений. Он понимает, что состояние изменилось, с помощью прокс (Proxy) и геттеров/сеттеров (get/set). 🚩Как MobX делает состояние реактивным? В MobX основная функция для создания реактивного состояния — observable(). Она превращает объект в реактивный Proxy, который отслеживает чтение (get) и изменение (set) свойств.

import { observable } from "mobx";

const store = observable({
  count: 0,
  increment() {
    this.count++;
  },
});

console.log(store.count); // MobX "запоминает", что это свойство использовалось
store.increment(); // MobX "замечает", что свойство изменилось

🚩Как MobX понимает, что нужно обновить компонент Vue? Vue-компоненты подписываются на реактивные свойства, когда они рендерятся внутри observer().

import { defineComponent } from "vue";
import { observer } from "mobx-vue-lite";

export default observer(defineComponent({
  setup() {
    return {
      store,
    };
  },
  template: `<div>{{ store.count }}</div>`,
}));

🚩Как MobX понимает зависимости? (Track & Re-run) MobX автоматически отслеживает зависимости во время рендера. Когда компонент использует store.count, MobX **"запоминает", что он зависит от count. Когда count изменяется, MobX перерисовывает только этот компонент.

import { computed } from "mobx";

const store = observable({
  count: 1,
  get doubleCount() {
    return this.count * 2;
  },
});

console.log(store.doubleCount); // 2
store.count = 2;
console.log(store.doubleCount); // 4 (MobX понимает, что зависимость изменилась)

🚩Как MobX оптимизирует обновления? (Reactions) MobX не просто перерисовывает всё — он оптимизирует рендеринг. 🟠autorun запускается сразу и при изменении любого используемого свойства. 🟠reaction запускается только когда меняется конкретное наблюдаемое свойство. 🟠when выполняется один раз, когда условие становится true.

import { autorun } from "mobx";

const store = observable({ count: 0 });

autorun(() => {
  console.log("Count изменился:", store.count);
});

store.count = 1; // "Count изменился: 1"
store.count = 2; // "Count изменился: 2"

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

Запусти IT-бизнес с доходом от 500 000 ₽/мес за 7 дней! Что вы получаете: ✅ IT-продукт с рынком 416+ млрд ₽ 💰 Доход от 500 000 ₽ в первый месяц 💻 Полностью онлайн — работайте из любой точки мира Стартовый бюджет: от 200 000 ₽ Окупаемость: 14 дней ⚡ Узнать больше #реклама edler.pro О рекламодателе

🤔 Как можно оптимизировать перерисовки? 1. Минимизировать изменения DOM, используя виртуальный DOM (например, React). 2. Использовать debounce или throttle для ограничения частоты выполнения операций. 3. Применять requestAnimationFrame для синхронизации с обновлением экрана. 4. Удалять ненужные компоненты из дерева или использовать мемоизацию (React.memo, useMemo). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний