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

Тест цифрового двойника — done А еще разработка системы для пиковых нагрузок, продуктов для ритейла, общения и обучения — вот чем уже занимаются молодые специалисты Т1. Потому что понять, в чем твоя суперспособность в ИТ, можно только в деле. Т1 — это бигтех для бизнеса, который реализует масштабные проекты для ключевых игроков рынка, и одна из крупнейших аккредитованных ИТ-компаний России. 💻 Здесь ты можешь пройти стажировку онлайн из любой точки страны, погрузиться в работу вместе с опытным наставником и решать реальные задачи. Более 4 000 студентов из 300+ вузов уже выбрали Т1 для старта карьеры. ⚡ Присоединяйся и открывай свои суперспособности в ИТ! Перейти на сайт #реклама 16+ career.t1.ru О рекламодателе

🤔 Что такое шаблонные литералы, и для чего они нужны? Были введены в ECMAScript 2015 (ES6) и представляют собой улучшение стандартных строк в JavaScript. Они облегчают работу с строками, предоставляя более удобный синтаксис для создания многострочных строк, интерполяции переменных и встроенных выражений. 🚩Примеры использования 🟠Интерполяция переменных и выражений Шаблонные литералы позволяют встраивать переменные и выражения внутрь строк с помощью синтаксиса ${}.

const name = 'Alice';
const age = 25;

const greeting = `Hello, my name is ${name} and I am ${age} years old.`;

console.log(greeting);
// Вывод: Hello, my name is Alice and I am 25 years old.

🟠Многострочные строки Шаблонные литералы позволяют создавать многострочные строки без необходимости использования символов переноса строки (\n).

const multiLineString = `This is a string
that spans across
multiple lines.`;

console.log(multiLineString);
// Вывод:
// This is a string
// that spans across
// multiple lines.

🟠Встроенные выражения Внутри шаблонных литералов можно использовать любые JavaScript-выражения.

const a = 5;
const b = 10;

const result = `The sum of ${a} and ${b} is ${a + b}.`;

console.log(result);
// Вывод: The sum of 5 and 10 is 15.

🟠Вызов функций внутри шаблонных литералов Можно вызывать функции и методы внутри шаблонных литералов.

function toUpperCase(str) {
    return str.toUpperCase();
}

const name = 'Alice';

const loudGreeting = `Hello, ${toUpperCase(name)}!`;

console.log(loudGreeting);
// Вывод: Hello, ALICE!

🟠Тегированные шаблонные литералы Тегированные шаблонные литералы позволяют обработать строку с помощью функции перед ее окончательной интерпретацией.

function tag(strings, ...values) {
    console.log(strings);
    console.log(values);
    return 'Tagged template';
}

const name = 'Alice';
const age = 25;

const taggedResult = tag`Name: ${name}, Age: ${age}`;

console.log(taggedResult);
// Вывод:
// [ 'Name: ', ', Age: ', '' ]
// [ 'Alice', 25 ]
// Tagged template

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

Курс «Rust-разработчик. Продвинутый уровень» со скидкой Старт: 30 сентября Продолжительность: 5 месяцев Скидка10% по промокоду: RUST_09 Курс по разработке на Rust: работа с памятью, многопоточность, архитектура и создание надёжных систем. Практика, реальные задачи и развитие до уровня инженера. Узнать больше #реклама 16+ otus.ru О рекламодателе

🤔 Почему у нас в css нет селектора на родителе? В CSS нет селектора родителя, потому что это нарушило бы оптимизацию и производительность рендеринга. 🚩Как работают селекторы в CSS? Обычные селекторы идут от родителя к дочерним элементам.

.parent .child {
  color: red;
}

Что было бы с селектором родителя?

.child:has-parent(.parent) { 
  color: red;
}

🚩Использовать `:has()` (в современных браузерах) В CSS4 появился :has(), который позволяет изменять родителя, если в нём есть определённый потомок.

.parent:has(.child) {
  border: 2px solid red;
}

🚩Использовать Flexbox/Grid вместо селектора родителя Иногда можно поменять структуру HTML и стилизацию, чтобы избежать проблемы.

.parent {
  display: flex;
  gap: 10px;
}

🚩Использовать JavaScript Если нужно изменить родителя динамически, можно использовать JavaScript.

document.querySelectorAll(".child").forEach(child => {
  child.parentElement.classList.add("has-child");
});

.has-child {
  border: 2px solid blue;
}

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

Квартиры Петербург Новостройка Рассрочка от застройщика Жилой комплекс "Квартал Заречье" Санкт-Петербург. Колпино. 4 девятиэтажных жилых корпуса 8-этажный крытый гараж на 496 парковочных мест В живописном месте у реки Ижора. На первых этажах будут размещены магазины, кофейни, поликлиника и зона коворкинга. Перейти на сайт Финансовые услуги оказывает: ПАО «Сбербанк». Проектная декларация на сайте https://наш.дом.рф/. Застройщик: ООО «СЗ «ЗАГОРОДНАЯ, 71». #реклама квартал-заречье.рф О рекламодателе

🤔 Что такое SOLID? SOLID — это принципы ООП для создания гибкого кода: единая ответственность, открытость для расширения, замена подклассов, узкие интерфейсы, зависимости от абстракций. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Когда стоит использовать тип any? Тип any в TypeScript позволяет отключить проверку типов и использовать любую структуру данных, как в обычном JavaScript. Но any убирает всю защиту TypeScript, поэтому его нужно использовать только в крайних случаях. 🚩Если тип данных неизвестен заранее (например, ответ от API) Иногда сервер может вернуть разные структуры данных, и невозможно заранее определить точный тип.

async function fetchData(url: string): Promise<any> {
  const response = await fetch(url);
  return response.json();
}

Лучший вариант — использовать интерфейсы вместо any:

interface User {
  id: number;
  name: string;
}

async function fetchUser(url: string): Promise<User> {
  const response = await fetch(url);
  return response.json() as User;
}

🚩При миграции JavaScript в TypeScript Если проект на чистом JavaScript, добавление TypeScript может сломать код. any помогает постепенно вводить строгую типизацию.

function log(value: any) {
  console.log(value);
}

🚩Когда работаем с динамическими структурами (например, `localStorage`) В localStorage можно сохранить что угодно, поэтому при чтении данных тип неизвестен.

const data: any = localStorage.getItem("user");

Лучше сразу привести any к нужному типу

const user = JSON.parse(localStorage.getItem("user") || "{}") as { id: number; name: string };

🚩Когда пишем универсальную библиотеку Если функция должна работать с разными типами, any может быть временным решением.

function mergeObjects(obj1: any, obj2: any): any {
  return { ...obj1, ...obj2 };
}

Лучший вариант с generic (T вместо any)

function mergeObjects<T, U>(obj1: T, obj2: U): T & U {
  return { ...obj1, ...obj2 };
}

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

Аренда VPS/VDS-сервера. Виртуальные выделенные серверы в дата-центрах уровня Tier III — 7 готовых конфигураций от 200 ₽/мес. Преимущества аренды: - Выделенные ресурсы без переплаты; - KVM-виртуализация; - Быстрые NVMe SSD; - Бесплатная защита от DDoS; - Управление через панель, API и Terraform; - Техподдержка 24/7. Запустите сервер за несколько минут! Попробовать #реклама 16+ selectel.ru О рекламодателе

🤔 Какая основная причина для использования SSR? SSR (Server-Side Rendering): - Улучшает скорость загрузки первого экрана (первая отрисовка приходит сразу с сервера). - Обеспечивает SEO-оптимизацию, поскольку поисковики получают готовый HTML. - Полезен для динамического контента, где важна предзагрузка. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Аренда и размещение серверов в дата-центрах Москвы ITSOFT оказывает услуги коммерческого дата-центра в Москве. 👌Аренда физических выделенных серверов (Dedicated Servers) в готовых конфигурациях и в рамках индивидуальных сборок. 👌Colocation и аренда серверных стоек. 👌Предоставление инфраструктурных ИТ-решений для физических лиц и корпоративных клиентов. 👌Предоставление высокоскоростных каналов передачи данных. Узнать цену #реклама 16+ itsoft.ru О рекламодателе

🤔 Расскажи про области видимости В JavaScript область видимости (scope) определяет доступность переменных, функций и объектов в разных частях кода. Это фундаментальная концепция, которая управляет тем, какие данные могут быть доступны или недоступны в различных частях программы. 🚩Глобальная область видимости Переменные и функции, объявленные вне любых функций или блоков, находятся в глобальной области видимости. Они доступны из любой части программы.

var globalVar = 'Я глобальная переменная';

function testFunction() {
  console.log(globalVar); // Доступно
}

testFunction();
console.log(globalVar); // Доступно

🚩Функциональная область видимости Переменные, объявленные с помощью var внутри функции, имеют область видимости, ограниченную этой функцией. Они недоступны за её пределами.

function testFunction() {
  var functionVar = 'Я внутри функции';
  console.log(functionVar); // Доступно
}

testFunction();
console.log(functionVar); // Ошибка: переменная functionVar недоступна

🚩Блочная область видимости Переменные, объявленные с помощью let и const, имеют область видимости, ограниченную ближайшим блоком {}.

if (true) {
  let blockVar = 'Я внутри блока';
  console.log(blockVar); // Доступно
}

console.log(blockVar); // Ошибка: переменная blockVar недоступна

🚩Область видимости модуля (Module Scope) При использовании модулей (например, import и export в ES6), все переменные и функции в модуле имеют собственную область видимости. Они не попадают в глобальную область видимости.

export const myVar = 'Я переменная из модуля';

import { myVar } from './module1.js';
console.log(myVar); // "Я переменная из модуля"

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

Капсульная коллекция в Т-Шопе Повод порадовать себя и разнообразить гардероб. Смотри, какие вещи созданы для плавного перехода из будней в выходные. Посмотреть каталог #реклама tbank.ru О рекламодателе

Разберём фронтенд слой за слоем 🥐 30 сентября встречаемся на VK Frontend Meetup SPB. Разберёмся в том, что видит пользователь, а дальше перейдём к архитектуре, инструментам и процессам, которые помогают масштабировать разработку.  В программе 3 доклада:  🔵Как в MAX разработали собственную архитектуру для стабильных анимированных стикеров 🔵Как в Одноклассниках учат AI работать с реальной дизайн-системой и существующими компонентами 🔵Как в Почте Mail запускают 300 промо в год После докладов — фуршет и неформальное общение. Можно будет задать вопросы спикерам, обсудить выступления и поспорить о том, какой слой фронтенда самый сложный. 🗓 30 сентября, 19:00 📍Санкт-Петербург, офис VK у Красного моста Встреча пройдёт только офлайн, записей докладов не будет.  Регистрация — по ссылке

🤔 Что такое git-flow? Это рабочая модель ветвления, предложенная Винсентом Дриссеном в 2010 году. Эта модель определяет строгий набор правил для создания веток и их слияния, что помогает более организованно управлять процессом разработки, особенно в условиях, когда над проектом работает много людей. Он предназначен для упрощения процесса выпуска новых версий программного обеспечения и обеспечения стабильности кодовой базы. 🚩Основные ветки 🟠master Содержит стабильную версию кода, готовую к выпуску (release). 🟠develop Основная ветка для разработки, содержит последние изменения кода для следующего выпуска. 🚩Вспомогательные ветки 🟠feature Для разработки новых функций. Каждая ветка создается для работы над определенной задачей и в конечном итоге сливается с develop. 🟠release Предназначенные для подготовки новых выпусков продукта. В них может вестись работа по исправлению ошибок, документации и другим задачам, связанным с выпуском. После завершения подготовки ветка release сливается с master и с develop. 🟠hotfix Для быстрого исправления ошибок в продакшен-версии. Создаются от ветки master, и после исправления сразу же сливаются обратно в master и develop. Ставь 👍 и забирай 📚 Базу знаний

Ethernet коммутаторы ELTEX от дилера №1 ⚡1110 м2 склады в Москве и Новосибирске ⚡Отправка в день заказа ⚡Скидки с 1-го заказа! ⚡Видеообзоры, комплектация, скачать новое ПО Получить консультацию #реклама 16+ eltexcm.ru О рекламодателе

🤔 Расскажи про memo в react React.memo — это функция в React, которая используется для оптимизации производительности функциональных компонентов. Она предотвращает ненужные повторные рендеры, если пропсы компонента не изменились. 🚩Зачем нужен `React.memo`? В React каждый раз, когда родительский компонент обновляется, все его дочерние компоненты тоже ререндерятся, даже если их пропсы остались неизменными. Это может негативно сказаться на производительности, особенно если дочерний компонент выполняет сложные вычисления или рендерит большое количество данных. React.memo решает эту проблему, запоминая (мемоизируя) предыдущий результат рендера и сравнивая его с новыми пропсами. Если пропсы не изменились, компонент просто использует закэшированное представление, а не ререндерится. 🚩Как использовать `React.memo`? React.memo — это функция высшего порядка (HOC), которая оборачивает функциональный компонент

import React from "react";

const MyComponent = ({ value }) => {
  console.log("Рендер компонента!");
  return <div>Значение: {value}</div>;
};

// Оборачиваем компонент в React.memo
const MemoizedComponent = React.memo(MyComponent);

export default MemoizedComponent;

🚩Пример без React.memo vs. с React.memo Допустим, у нас есть родительский компонент, который изменяет состояние при каждом клике

import React, { useState } from "react";
import MemoizedComponent from "./MyComponent";

const Parent = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Увеличить</button>
      <MemoizedComponent value="Привет, мир!" />
    </div>
  );
};

export default Parent;

🚩Когда НЕ стоит использовать `React.memo`? Если компонент всегда ререндерится из-за изменения пропсов – смысла в memo нет. Если компонент рендерится быстро – оптимизация может быть ненужной, а проверка пропсов даже замедлит работу. Если пропсы часто изменяются – кэширование теряет смысл, так как все равно ререндерится. Ставь 👍 и забирай 📚 Базу знаний

YaC/e 2026: кто и как будет учить в 2030 году Обсудим будущее преподавания на онлайн-конференции Яндекса YaC/e 2026. 30 сентября. Участие бесплатно, вышлем сертификат участника! Регистрируйтесь до 29 сентября. Узнать больше #реклама 16+ yace.yandex.ru О рекламодателе

🤔 Как уничтожить объект web worker? В JavaScript, чтобы уничтожить объект Web Worker, необходимо использовать метод terminate(). Этот метод останавливает выполнение worker'а, освобождает связанные с ним ресурсы и завершает его работу. После вызова terminate() объект worker больше не может быть использован. 🚩Зачем уничтожать Web Worker? Web Worker позволяет выполнять тяжелые операции в фоновом потоке, не блокируя основной поток (UI-поток). Однако, если worker больше не нужен, он продолжает существовать и занимает ресурсы (память, процессорное время). Чтобы избежать утечек памяти и оптимизировать работу приложения, важно уничтожать worker, когда он больше не используется. 🚩Как использовать `terminate()`? Вы вызываете метод terminate() на экземпляре объекта worker. Это мгновенно останавливает выполнение фонового скрипта.

// Создаем worker
const myWorker = new Worker('worker.js');

// Выполняем какие-то операции через worker
myWorker.postMessage('Hello, worker!');

// Завершаем работу worker, когда он больше не нужен
myWorker.terminate();

🚩Важно помнить 1⃣После вызова terminate() worker полностью уничтожается и больше не может отправлять или получать сообщения. 2⃣Если есть обработчики событий, привязанные к worker (например, onmessage), они автоматически удаляются. 3⃣Доступ к worker после вызова terminate() не приведет к ошибке, но никакие операции через него больше работать не будут.

const worker = new Worker('worker.js');

// Отправляем сообщение
worker.postMessage('Start working');

// Завершаем работу worker
worker.terminate();

// Попытка отправить сообщение после уничтожения worker
worker.postMessage('Will this work?'); // Ничего не произойдет, worker уже завершен

🚩 Когда еще уничтожается worker? Если вы перезагружаете страницу или закрываете вкладку, все web worker автоматически уничтожаются браузером. Однако в рамках текущей сессии ответственность за уничтожение лежит на разработчике. Ставь 👍 и забирай 📚 Базу знаний

Tauri 2: как связать Rust и UI безопасно Десктопное приложение — это не только красивый интерфейс. Важно контролировать, какие системные возможности доступны UI и как приложение взаимодействует с ОС. 📅 23 сентября в 20:00 на открытом вебинаре разберём разработку GUI на Rust с Tauri 2. Покажем permissions и capabilities, безопасные системные вызовы, взаимодействие Rust с HTML/CSS/JS, работу с данными и асинхронность. Также разберём организацию проекта, отладку и сборку под Windows, macOS и Linux. 💻 Подойдёт фронтенд-разработчикам, Rust-разработчикам и тем, кто ищет альтернативу Electron. ✅ Научитесь строить кроссплатформенные приложения с контролируемым доступом к системным возможностям. Записаться #реклама 16+ otus.ru О рекламодателе

🤔 Чего стоит и не стоит избегать в оптимизации сайта? 🟠Оптимизация изображений Сжатие без потери качества: Используйте инструменты, такие как TinyPNG или ImageOptim. Использование современных форматов: WebP и AVIF обеспечивают лучшее сжатие и качество. Lazy Loading: Загружайте изображения по мере их появления в области видимости пользователя. 🟠Минификация и объединение файлов Минификация: Уменьшайте размеры CSS, JavaScript и HTML-файлов с помощью инструментов, таких как UglifyJS и CSSNano. Объединение: Сокращайте количество HTTP-запросов, объединяя несколько файлов в один. 🟠Использование CDN (Content Delivery Network) Размещайте копии вашего сайта на серверах по всему миру, чтобы уменьшить задержки для пользователей из разных регионов. 🟠Кэширование На стороне клиента: Настройте заголовки кэширования HTTP. На стороне сервера: Используйте технологии, такие как Varnish или Nginx. 🟠Асинхронная загрузка и критический CSS Асинхронная загрузка: Используйте атрибуты async и defer для JavaScript. Критический CSS: Встраивайте важные стили прямо в HTML, чтобы ускорить начальную отрисовку страницы. 🟠Улучшение производительности сервера Сжатие данных: Включите gzip или Brotli. HTTP/2: Переходите на HTTP/2 для мультиплексирования запросов. 🟠Использование современных технологий Service Workers: Для офлайн-работы и улучшенного кэширования. Prefetching и Preloading: Предзагрузка и предзапросы ресурсов. 🟠Мониторинг и анализ Google Lighthouse, PageSpeed Insights: Используйте для анализа производительности. Реальное время: Применяйте Google Analytics, New Relic. 🚩Чего стоит избегать при оптимизации сайта 🟠Избегайте чрезмерной минимизации Читаемость кода: Минимизация без генерации карт кода (source maps) может усложнить отладку. 🟠Не используйте большие, несжатые изображения Размер файлов: Это замедляет загрузку и увеличивает потребление трафика пользователем. 🟠Не загружайте все ресурсы сразу Асинхронная загрузка: Используйте техники lazy loading и асинхронной загрузки. 🟠Не пренебрегайте кэшированием Отсутствие кэширования: Увеличивает время загрузки для повторных посещений. 🟠Избегайте блокирующих ресурсов JavaScript и CSS: Не блокируйте рендеринг страницы тяжелыми файлами. 🟠Не злоупотребляйте анимациями и большими скриптами Производительность: Сложные анимации и большие скрипты могут замедлить сайт, особенно на мобильных устройствах. 🟠Избегайте чрезмерного использования плагинов Нагрузки: Избыток плагинов может значительно замедлить сайт и создать проблемы с безопасностью. 🟠Не забывайте про оптимизацию для мобильных устройств Мобильная версия: Сайт должен быть оптимизирован для мобильных пользователей, так как большинство пользователей используют мобильные устройства. Ставь 👍 и забирай 📚 Базу знаний