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

🤔 Как мерить скорость работы и отзывчивость сайта? 1. Lighthouse (Chrome DevTools) – анализ производительности. 2. PageSpeed Insights – оценка скорости загрузки. 3. Web Vitals (FCP, LCP, CLS, TBT, FID) – ключевые метрики. 4. Performance API – измерение времени загрузки ресурсов. 5. GTmetrix – детальный анализ производительности. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Автоматизированное SEO-продвижение для бизнеса! Бесплатный тест 5 дней. Моментальный и понятный результат. Снимаем и прозрачно показываем все метрики. Попробовать #реклама умныйсервис.рф О рекламодателе

🤔 Зачем нужен nginx? Nginx — это мощный веб-сервер, который используется для раздачи статических файлов, балансировки нагрузки, проксирования запросов и обеспечения безопасности. 🟠Как Nginx раздаёт фронтенд-приложение? Когда мы билдим SPA-приложение (например, React/Vue/Angular), в папке dist появляются статические файлы (index.html, app.js, styles.css).

server {
    listen 80;
    server_name myapp.com;
    root /var/www/myapp/dist;
    index index.html;
    
    location / {
        try_files $uri /index.html;
    }
}

🟠Как Nginx проксирует запросы к бэкенду? Если фронтенд (myapp.com) и бэкенд (api.myapp.com) находятся на разных серверах, Nginx может перенаправлять запросы на API.

server {
    listen 80;
    server_name myapp.com;
    root /var/www/myapp/dist;
    index index.html;

    location / {
        try_files $uri /index.html;
    }

    # Проксирование API-запросов
    location /api/ {
        proxy_pass http://localhost:5000/; # Node.js, Python, PHP и т. д.
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

🟠Как Nginx балансирует нагрузку? Если у нас несколько бэкенд-серверов, Nginx может распределять нагрузку между ними.

upstream backend {
    server backend1.myapp.com;
    server backend2.myapp.com;
}

server {
    listen 80;
    server_name api.myapp.com;

    location / {
        proxy_pass http://backend;
    }
}

🟠Как Nginx ускоряет сайт с кэшем? Кэширование уменьшает нагрузку на сервер и ускоряет загрузку страниц.

location /static/ {
    expires 7d; # Кэшировать файлы на 7 дней
    add_header Cache-Control "public, max-age=604800";
}

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

UserGate Open Conf 17 / 04 / 2025 ⚡ ИТ-конференция про защиту в открытую. Здесь мы создаем площадку для открытого диалога между заказчиками, партнерами, экспертами и специалистами в сфере продуктов, технологий и услуг информационной безопасности. Что мы готовим для вас: - аналитические данные исследования рынка информационной безопасности; - обзор новых видов и эволюции киберугроз с разбором кейсов по борьбе с ними; - планы внедрения новых фич и обновлений продуктов экосистемы UserGate; - 30+ продуктовых, партнерских и клиентских докладов; - нетворкинг, продуктовые демо, обмен опытом и консультации экспертов ИБ; - ответы на любые вопросы и сбор обратной связи о работе продуктов и устройств UserGate. Зарегистрироваться #реклама openconf.usergate.com О рекламодателе

🤔 Как задать последовательность выполнения скриптов? - defer – выполняет скрипт после загрузки HTML. - async – выполняет скрипт сразу после загрузки, без ожидания HTML. - DOMContentLoaded – ждет построения DOM, но не загрузки стилей и картинок. - load – ждет загрузки всех ресурсов, включая изображения. - Promise и async/await – управление асинхронными операциями в коде. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

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

🤔 Что такое псевдоклассы? Это ключевые слова, добавляемые к селекторам, которые указывают на специальное состояние выбранного элемента. Псевдоклассы позволяют стилизовать элементы на основе их состояния в документе, без необходимости добавления дополнительных классов или ID напрямую в HTML-код. С их помощью можно, например, изменить внешний вид ссылок при наведении курсора, стилизовать четные и нечетные элементы списка, изменять стиль элементов при получении фокуса и многое другое. :hover — применяется к элементу, когда на него наводят курсор мыши.

a:hover {
  color: red; /* Ссылка станет красной при наведении /
}

:focus — применяется к элементу, когда он получает фокус (например, при переходе на элемент с помощью клавиатуры или при клике мыши).

input:focus {
  border-color: blue; / Граница инпута станет синей при фокусе /
}

:active — применяется к элементу в момент его активации пользователем (например, во время клика по кнопке).

button:active {
  transform: scale(0.98); / Кнопка немного уменьшится при клике /
}

:nth-child() — позволяет стилизовать элементы в зависимости от их порядка среди детей родительского элемента.

li:nth-child(odd) {
  background-color: gray; / Заливка каждого нечетного элемента списка /
}

:not() — исключает из выборки элементы, соответствующие указанному селектору.

div:not(.special) {
  color: green; / Применяется к каждому div, который не имеет класса special */
}

🚩Зачем нужны псевдоклассы? Они делают CSS более мощным и гибким, позволяя разработчикам применять стили к элементам на основе их состояния или положения в документе, без изменения HTML-структуры. Это особенно полезно для создания интерактивных и реактивных пользовательских интерфейсов, где визуальное состояние элемента должно меняться в ответ на действия пользователя. Ставь 👍 и забирай 📚 Базу знаний

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

🤔 Как строки кода преобразуются в сайт? 1. Запрос к серверу → браузер получает HTML. 2. Парсинг HTML → создается DOM-дерево. 3. Запрос CSS и JS → загружаются и исполняются стили и скрипты. 4. Создание CSSOM → объединение с DOM → рендер-дерево. 5. Рендеринг → вычисление позиций элементов. 6. Отрисовка → пиксели появляются на экране. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Когда подрядчик тележится, добавляйте его в Коллабу Битрикс24 Коллабы – платформа для эффективной работы с подрядчиками. Тут обсуждения превращаются в задачи, а видео созвон можно собрать одной кнопкой. Любой проект можно разложить по полочкам с понятным ТЗ и обозначенными сроками. Работайте в Битрикс24 и создавайте Коллабы с подрядчиками. Начать #реклама 16+ collabs.bitrix24.ru О рекламодателе

🤔 Как увеличить в размере при наведении элемент, не сдвигая соседние? Чтобы увеличить элемент в размере при наведении, не сдвигая при этом соседние элементы, можно использовать CSS свойство transform с функцией scale. Это позволяет изменять размер элемента, не влияя на его положение и соседние элементы, так как трансформация происходит в контексте самого элемента и не меняет его фактические размеры в документе.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Увеличение при наведении</title>
    <style>
        .container {
            display: flex;
            gap: 10px;
        }
        .item {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            text-align: center;
            line-height: 100px;
            transition: transform 0.3s;
        }
        .item:hover {
            transform: scale(1.2); /* Увеличение размера при наведении */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>
</html>

🚩Почему это важно? 🟠Эффективность пользовательского интерфейса Увеличение элементов при наведении может служить для привлечения внимания пользователя или для улучшения взаимодействия, например, при работе с интерактивными элементами. 🟠Стабильность макета Применение трансформации с transform: scale позволяет изменять размер элемента без изменения его фактического размера и расположения в документе, что сохраняет стабильность макета и не нарушает расположение соседних элементов. 🟠Плавные анимации Использование transition делает анимацию плавной и приятной для глаз, улучшая общее восприятие интерфейса. Ставь 👍 и забирай 📚 Базу знаний

Курс по мотивации сотрудников, которые ничего не хотят Сегодня в Школе Гендира открыт бесплатный трехдневный доступ к онлайн-курсу Ежедневная мотивация. Основа курса – практика руководителей российских компаний. После обучения вы сможете: 👍 распознавать конфликты в коллективе на начальной стадии и вовремя принимать меры 👍 определить точки роста своего лидерского потенциала 👍 построить систему грейдов в компании 👍 внедрить метод OKR для мотивации ключевых сотрудников 👍 адаптировать для себя один из алгоритмов постановки задач Оставьте заявку на бесплатный доступ на странице курса. Подать заявку #реклама 16+ gd.ru О рекламодателе

🤔 Как отрисовывать сайт для пользователя? Отрисовка сайта включает разметку (HTML), стилизацию (CSS) и логику (JavaScript). Браузер парсит код, загружает ресурсы, выполняет скрипты и рендерит страницу на основе DOM и CSSOM. Важно минимизировать блокирующие ресурсы для быстрой загрузки. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Как айтишнику быстро получить оффер Бесплатный воркшоп 20 марта Почему одному кандидату предлагают оффер после первого интервью, а другому говорят: «Мы вам перезвоним»? Причина в подаче своего опыта. Записывайся, чтобы узнать: — Как подготовиться к собеседованию — Как презентовать свой опыт так, чтобы тебя запомнили — Как проверяют hard skills и как к этому подготовиться — Как произвести хорошее впечатление, запомнится рекрутеру и сделать так, чтобы захотели работать именно с тобой Приходи на бесплатный воркшоп и узнай, как прокачать навык самопрезентации и получить работу мечты Зарегистрироваться #реклама 16+ my.mts-link.ru О рекламодателе

🤔 Почему методы жизненного цикла нельзя писать через прилоченную функцию? В Vue 2 и Vue 3 (Options API) методы жизненного цикла (mounted, created, beforeDestroy и др.) должны быть обычными функциями, а не стрелочными (() => {}). 🟠Как работает `this` в Vue? Когда Vue вызывает метод жизненного цикла, он автоматически привязывает this к экземпляру компонента.

export default {
  data() {
    return { message: "Привет!" };
  },
  mounted() {
    console.log(this.message); // ✅ Работает, this = { message: "Привет!" }
  }
};

🟠Почему стрелочная функция не работает? Стрелочные функции не создают свой собственный this, а берут this из внешнего контекста (того, что было при их создании).

export default {
  data() {
    return { message: "Привет!" };
  },
  mounted: () => {
    console.log(this.message); // ❌ Ошибка: this === undefined
  }
};

🟠Как стрелочные функции всё-таки можно использовать? Хотя стрелочные функции нельзя использовать для методов жизненного цикла, их можно применять внутри обычных методов:

export default {
  data() {
    return { message: "Привет!" };
  },
  mounted() {
    setTimeout(() => {
      console.log(this.message); // ✅ Работает, this берётся из `mounted()`
    }, 1000);
  }
};

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

Пройдите тест из вселенной Назад в будущее  Проверьте себя: попробуйте спасти мир и стать DevOps всех времён. 7 вопросов для инженеров и девопс инженеров. 🚀 Пройти тест в боте Всем участникам скидка на курсы Слёрма.

Почему вы не используете Битрикс24 CRM с AI-помощником? 1- не знал 2- забыл Рассказываем и напоминаем! ✅Битрикс24 CRM с AI помогает увеличивать продажи, работать с постоянными клиентами и сохранять все важные данные. AI-помощник CoPilot внутри сервиса расшифрует телефонные разговоры и автоматически заполнит карточки клиента в CRM. Битрикс24 можно использовать бесплатно для всех команд, независимо от их размера. ⚡Не тратьте время на рутину. Узнать больше #реклама 16+ bitrix24.ru О рекламодателе

🤔 Что такое доступность интерфейсов? Это принципы разработки, обеспечивающие удобство использования интерфейса людьми с ограниченными возможностями. Это включает: - Поддержку экранных читалок (ARIA-атрибуты). - Клавиатурную навигацию. - Контрастность и читаемость текста. - Альтернативный текст для изображений. - Упрощение форм и интерактивных элементов. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Онлайн-интенсив для ИТ-специалистов в Открытых школах Т1 Открытые школы — это возможность за месяц прокачать свои навыки и получить оффер в ИТ-холдинг Т1. С тебя — год опыта работы в ИТ, с нас — бесплатный онлайн-интенсив и топовые преподаватели. Что ты получишь? ✅ Уникальный рыночный опыт. Наши проекты ежегодно получают награды на ИТ-конкурсах: Global CIO, Национальной банковской премии и др. ✅ Быстрый рост в ИТ при экспертной поддержке. ✅ Материалы от HR, которые помогут прокачать резюме и подготовиться к интервью в Т1. ✅ Поддержка опытных преподавателей и уникальный карьерный фаст-трек до мидла в Т1 для выпускников интенсива. ✅ Реальный шанс получить оффер в Т1. Подавай заявку до 14 марта и приходи учиться! Старт ИТ-интенсива уже 17 марта. Подать заявку #реклама 16+ t1.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; } /* Всегда будет красным */

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