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

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

( 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; } /* Всегда будет красным */

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

Узнайте, какая профессия в IT вам подходит. Бесплатно! Пройдите тест на профессию и забирайте: ✅ Бесплатную карьерную консультацию с экспертом ✅ Доступ к чат-боту с гайдами по профессиям и заданиями для самопроверки ✅ Мини-курсы для погружения в IT и дизайн, чтобы точнее выбрать направление ✨130 000 человек уже прошли профтестирование и выбрали перспективную профессию в IT или дизайне Пройдите тест за 5 минут! Начать #реклама 16+ free.skillfactory.ru О рекламодателе

🤔 Как браузер обрабатывает ссылки? При клике на ссылку браузер: 1. Отправляет HTTP-запрос на сервер. 2. Получает HTTP-ответ, содержащий HTML, CSS, JS. 3. Парсит HTML и загружает ресурсы (CSS, JS, шрифты, изображения). 4. Рендерит страницу, выполняя скрипты и стили. 5. Обновляет историю (pushState, replaceState в SPA). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Чем em отличается от rem? 🟠Как работает `em`? em зависит от размера шрифта родителя (font-size).

.parent {
  font-size: 20px;
}

.child {
  font-size: 1.5em; /* 1.5 * 20px = 30px */
}

Но если .child вложен в .parent, то он наследует font-size, а его em вычисляется относительно родителя.

.parent {
  font-size: 20px;
}

.child {
  font-size: 1.5em; /* 30px */
}

.grandchild {
  font-size: 2em; /* 2 * 30px = 60px */
}

🟠Как работает `rem`? rem всегда зависит от font-size у <html>.

html {
  font-size: 16px;
}

.container {
  font-size: 2rem; /* 2 * 16px = 32px */
}

🟠Когда использовать `em`, а когда `rem`? Используйте rem, если нужно, чтобы шрифты и размеры были предсказуемыми Используйте em, если хотите, чтобы элементы зависели от родителя Ставь 👍 и забирай 📚 Базу знаний

Альфазокс знает как решать проблему частой изжоги Частая причина изжоги — эрозивные дефекты слизистой оболочки пищевода. Большинство средств от изжоги работают в желудке, хотя изжога может возникать из-за повреждения пищевода забросами кислоты или желчи. При изжоге важно не только снижать кислотность в желудке, но и действовать на причину изжоги - заживлять воспаленную слизистую пищевода. Альфазокс знает как решать проблему частой изжоги. Он защищает эпителий пищевода от агрессивного действия желудочного содержимого, помогает восстановить поврежденную слизистую и способствует заживлению пищевода. Длительность терапии определяется лечащим врачом, в среднем, составляет 4-5 недели. Компоненты не всасываются, а выводятся естественным путем, что означает минимальный риск побочных эффектов. Узнать больше Есть противопоказания. Посоветуйтесь с врачом. #реклама izzogavu.alfasoxx.ru О рекламодателе

🤔 Как часто происходит рендер? Ререндер компонента в React происходит при: - Изменении состояния (state). - Изменении пропсов (props). - Вызове forceUpdate() (редко используется). - Изменении контекста (context API). Используется React.memo() и useCallback/useMemo для оптимизации. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Импортозамещение в деле: Depo, Yadro, Гравитон и другие! Пора обновлять инфраструктуру? Тогда делайте это без привязки к зарубежным вендорам. Мы поставляем отечественные серверы, СХД и коммутаторы из реестра Минпромторга: Depo, Yadro, Гравитон, GAGARIN, UTINET, Аквариус, Рико, Норси-Транс, OpenYard, Нерпа и ДатаРу. Это производительная и отказоустойчивая альтернатива зарубежным аналогам, проверенная крупными компаниями и ЦОДами. Подходит для импортозамещения КИИ. Сервер Молл предлагает: ✅ Оборудование от ведущих российских производителей: в наличии на складах Готовые решения для ЦОДов любой сложности Гарантию до 5 лет и постпродажное обслуживание Бесплатную доставку в любую точку России. Не обещаем, а делаем! Если вам нужно российское оборудование для обновления инфраструктуры, пишите в чат или звоните — 8 800 755-25-51 📞 Перейти на сайт #реклама servermall.ru О рекламодателе

🤔 Зачем нужен eslint? ESLint – это инструмент для автоматического анализа и исправления кода в JavaScript и TypeScript. Он помогает разработчикам следовать единым стилям кодирования, находить ошибки и предотвращать баги ещё до запуска кода. 🚩Почему ESLint полезен? Без линтера код может быть неаккуратным и содержать ошибки, которые сложно отловить. 🚩Проблемы без ESLint Разные стили написания кода Пропущенные точки с запятой или лишние пробелы Неиспользуемые переменные Ошибки, которые не выявляются во время компиляции (например, undefined переменные) 🚩**Решение с ESLint:** Автоматически находит ошибки и предупреждения Подсказывает лучшие практики Поддерживает кастомные правила Работает в IDE и CI/CD (автоматическая проверка) 🟠Как ESLint работает? ESLint использует набор правил, которые проверяют код. Если код нарушает эти правила – линтер выдаёт предупреждение или ошибку.

function sayHello(name) {
  console.log("Hello, " + name)
}

sayHello("John")

Пример исправленного кода (ESLint fix)

function sayHello(name) {
  console.log(`Hello, ${name}`);
}

sayHello("John");

🟠Как установить и настроить ESLint? Установка

npm install eslint --save-dev

Создание конфига

npx eslint --init

Пример .eslintrc.js (настройки ESLint)

module.exports = {
  env: {
    browser: true,
    es6: true,
  },
  extends: [
    "eslint:recommended", // Базовые рекомендации
    "plugin:vue/vue3-recommended" // Рекомендации для Vue
  ],
  rules: {
    "no-unused-vars": "warn", // Предупреждать о неиспользуемых переменных
    "semi": ["error", "always"], // Обязательные точки с запятой
    "quotes": ["error", "double"], // Только двойные кавычки
  },
};

Запуск проверки кода

npx eslint myfile.js

Автоматическое исправление ошибок

npx eslint myfile.js --fix

🟠ESLint в IDE (VS Code, WebStorm) Чтобы ESLint работал в VS Code, установите расширение ESLint и включите "editor.codeActionsOnSave"

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}

🟠ESLint в CI/CD (автоматическая проверка на сервере) В проектах ESLint можно запускать в GitHub Actions, Jenkins, GitLab CI и других CI/CD системах, чтобы не допускать ошибок в main ветку.

"scripts": {
  "lint": "eslint src --fix"
}

Теперь перед коммитом можно запускать:

npm run lint

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

Курс графического дизайна с нуля. Бесплатное обучение! Выбери свое направление в дизайне: графический дизайн, веб-дизайн, UX/UI-дизайн. И изучи бесплатно основы дизайна с личным наставником! 3 работы в портфолио. Узнать больше #реклама 16+ yudaevschool24.online О рекламодателе

🤔 Какие минусы у React? 1. Высокий порог входа – нужно изучать JSX, state-менеджеры, хуки. 2. Частые обновления – быстро меняется API и появляются новые подходы. 3. Большой размер бандла – требует оптимизации и разделения кода. 4. Проблемы SEO – без SSR поисковики могут не индексировать страницы. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Прокачаем ваш frontend скилл с junior до middle Научим писать код, который не стыдно показать Первые 7 дней бесплатно. Попробуй! Узнать больше #реклама 16+ ykul.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"

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

Почему твое резюме не замечают?😭 Ты отправил десятки откликов, но в ответ — тишина? Ты проходишь собеседования, но офферов всё нет? Работаешь за 3 копейки, хотя опыта уже достаточно? Боль многих айтишников, согласитесь? Причина не в рынке и даже не в опыте! Просто ты не знаешь, что хотят видеть и слышать рекрутеры и техлиды. ✅Как сделать так, чтобы HR сами звали тебя на интервью? ✅Как проходить собесы и получать достойные офферы от 200к? ✅Какие ошибки мешают тебе пробить потолок? Тихон - действующий frontend разработчик, разбирает всё это в своем канале: https://t.me/+4RyIIM1mUOY3Mzdi. 👉 Подписывайте, там в закрепе уже собрано 3 гайда для подготовки к собесам.

Бесплатный курс по UX/UI-дизайну с нуля C нуля сделаете портфолио из 4+ работ и узнаете всё о профессии UX/UI дизайнера на практике: - дизайн сайтов и интерфейсов приложений - графический дизайн - веб-дизайн С личным наставником и разбором работ 🎓 Подать заявку #реклама 16+ yudaevschool24.online О рекламодателе

🤔 Зачем создавались библиотеки React и другие? React и аналогичные библиотеки (Vue, Angular) появились для удобного управления интерфейсом и улучшения производительности за счет виртуального DOM и одностороннего потока данных. Они упрощают разработку сложных компонентов, улучшая масштабируемость и читаемость кода. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Новый сервис Яндекса для вашего бизнеса 7 марта в 12:00 мск приглашаем на бесплатный вебинар по Яндекс Ритмуβ — платформе, где можно продвигать товары с помощью фото и видео. Кому будет полезно: ✅ Владельцам интернет-магазинов ✅ Специалистам по контентному продвижению и рекламе ✅ Представителям брендов На вебинаре разберём: ⚡ Что такое Яндекс Ритмβ и как он поможет вашему бизнесу ⚡ Как получить дополнительный трафик на вашу площадку продаж Спикер: Анна Свиязова — руководитель группы развития бизнеса Яндекс Ритмаβ. Поделится опытом и ответит на ваши вопросы в прямом эфире. Зарегистрируйтесь прямо сейчас — это бесплатно Узнать больше #реклама 16+ yandex.ru О рекламодателе

🤔 Какие проблемы решает 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();

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

Научим создавать карточки для WB и Ozon с нуля! Дизайнер карточек для маркетплейсов — востребованная и доходная профессия 💰 Научись ей бесплатно! - Бесплатный доступ к курсу - Разбор ДЗ от наставника - Мощные кейсы в портфолио Узнать больше #реклама 16+ yudaevschool24.online О рекламодателе

🤔 Для чего нужен CORS? Это механизм безопасности, позволяющий или запрещающий браузерам делать запросы к API с другого домена. Без CORS браузер блокирует такие запросы из-за политики одного источника (SOP, Same-Origin Policy). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Как навести порядок в бизнесе? — Работать в Битрикс24. Это бесплатный онлайн-сервис для совместной работы всей компании. В порядке будут не только задачи в таск-трекере, но и продажи в CRM, коммуникация в собственном мессенджере, планирование в календаре, обмен файлами и ИИ-помощник — всё для эффективной работы и порядка в процессах. Заберите бесплатно 10+ инструментов для работы и бизнеса. Зарегистрироваться #реклама 16+ office-online.bitrix24.ru О рекламодателе