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

Завтра последний день! Успей купить пожизненный easyoffer PRO - по цене 1 года Покупаешь один раз — пользуешься всю жизнь. 👉 Акция до 31 марта: https://easyoffer.ru/pro

🤔 Чего стоит и не стоит избегать в оптимизации сайта? 🟠Оптимизация изображений Сжатие без потери качества: Используйте инструменты, такие как 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: Не блокируйте рендеринг страницы тяжелыми файлами. 🟠Не злоупотребляйте анимациями и большими скриптами Производительность: Сложные анимации и большие скрипты могут замедлить сайт, особенно на мобильных устройствах. 🟠Избегайте чрезмерного использования плагинов Нагрузки: Избыток плагинов может значительно замедлить сайт и создать проблемы с безопасностью. 🟠Не забывайте про оптимизацию для мобильных устройств Мобильная версия: Сайт должен быть оптимизирован для мобильных пользователей, так как большинство пользователей используют мобильные устройства. Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое props? Props (свойства) — это данные, передаваемые от родительского компонента к дочернему в React, которые используются для конфигурации и не могут быть изменены внутри дочернего компонента. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Можно ли перезапустить остановленный promise? Нет, Promise в JavaScript нельзя перезапустить. Промисы являются одноразовыми: после того как они переходят в одно из состояний — выполнен (resolved) или отклонён (rejected) — их состояние больше не может измениться. Это одно из ключевых свойств промисов. 🚩Почему нельзя перезапустить Promise? Промис, как только выполняется, становится иммутабельным. После выполнения (resolve) или отклонения (reject), он остаётся в этом состоянии навсегда. Промисы предназначены для представления единственного результата асинхронной операции. Их дизайн не предполагает повторного запуска той же самой асинхронной логики.

const myPromise = new Promise((resolve, reject) => {
  resolve('Done!');
});

myPromise.then((result) => console.log(result)); // "Done!"

// Даже если вы попытаетесь вызвать resolve или reject снова, ничего не произойдет
myPromise.then((result) => console.log(result)); // "Done!" (результат уже закеширован)

🚩Что делать, если нужно "перезапустить" асинхронную операцию? Если вы хотите выполнить операцию заново, вместо "перезапуска" Promise нужно создать новый Promise или использовать функцию, которая возвращает новый Promise каждый раз.

function createPromise() {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve('Я новый промис!'), 1000);
  });
}

// Первый вызов
createPromise().then((result) => console.log(result)); // "Я новый промис!"

// "Перезапуск"
createPromise().then((result) => console.log(result)); // "Я новый промис!" (новый промис создан)

🚩Как это сделать с использованием `async/await`? Это синтаксический сахар над промисами. Если вам нужно "перезапустить" асинхронную операцию, просто вызовите асинхронную функцию ещё раз.

async function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => resolve('Данные загружены!'), 1000);
  });
}

async function main() {
  const data1 = await fetchData();
  console.log(data1); // "Данные загружены!"

  const data2 = await fetchData(); // "Перезапуск" fetchData
  console.log(data2); // "Данные загружены!"
}

main();

🚩Повторная попытка выполнения промиса (ретрай) Если вам нужно повторно попытаться выполнить операцию (например, в случае неудачи), можно реализовать "ретрай". Это особенно полезно для операций вроде сетевых запросов.

function fetchDataWithRetry(retries) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (Math.random() > 0.7) { // 70% шансов на ошибку
        resolve('Данные успешно загружены!');
      } else {
        reject('Ошибка загрузки данных');
      }
    }, 1000);
  }).catch((error) => {
    if (retries > 0) {
      console.log(`Повторная попытка... Осталось: ${retries}`);
      return fetchDataWithRetry(retries - 1); // Рекурсивный вызов
    } else {
      throw error; // Если попытки исчерпаны, выбрасываем ошибку
    }
  });
}

fetchDataWithRetry(3)
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

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

🤔 Что такое классы? Классы — это шаблоны для создания объектов. Они объединяют данные (поля) и поведение (методы). В JavaScript, React и других языках классы помогают организовать код и создавать повторно используемые структуры. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как мы можем замерить скорость работы участка кода с date.Now? В JavaScript можно замерить скорость выполнения кода с помощью Date.now(), но есть более точные способы. Давайте разберём разные варианты. 🚩Использование `Date.now()` Метод Date.now() возвращает количество миллисекунд с 1 января 1970 года (Unix-время). Можно запомнить время до и после выполнения кода, а затем вычислить разницу.

const start = Date.now(); // Фиксируем время начала

// Код, время выполнения которого нужно измерить
for (let i = 0; i < 1e6; i++) { Math.sqrt(i); }

const end = Date.now(); // Фиксируем время окончания
console.log(`Время выполнения: ${end - start} мс`);

🚩Использование `performance.now()` (Более точный способ) Метод performance.now() возвращает время с микросекундной точностью (до тысячных долей миллисекунды). Он точнее, чем Date.now(), так как измеряет время с высокой детализацией.

const start = performance.now();

for (let i = 0; i < 1e6; i++) { Math.sqrt(i); }

const end = performance.now();
console.log(`Время выполнения: ${(end - start).toFixed(3)} мс`);

🚩Использование `console.time()` Если нужно просто измерить время выполнения блока кода, можно воспользоваться console.time() и console.timeEnd().

console.time("Мой код");

for (let i = 0; i < 1e6; i++) { Math.sqrt(i); }

console.timeEnd("Мой код"); // Выведет время выполнения

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

🤔 Какие плюсы от использования хуков? Хуки предоставляют: - Функциональность классов без классов — управление состоянием, эффектами и т. д. - Лучшую читаемость и компактность — без this, bind, конструкторов. - Переиспользуемость логики — через пользовательские хуки (useSomething). - Тестируемость — хуки легко выносить и покрывать тестами. - Функциональный стиль — ближе к декларативному, что делает код проще для понимания. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Как frontend-разработчику получить оффер в Big Tech? Платят как джуну, а спрашивают как с лида 🙄 Зарплата не растёт, задачи скучные. Пробуешь откликаться, но на резюме клюют только ноунейм компании, а на собесах валят на алгоритмах? При этом вокруг кто-то постоянно получает офферы в Яндекс или VK... Стабильность с маленькой зп, или дестрой рынка и выход на максимальную? Синяя или красная таблетка, Нео?! 👾

Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор.

Помогаю устроиться на хорошие позиции в Big Tech и сопровождаю на испытательном сроке. В своем канале: 👉Разбираю самые популярные и каверзные вопросы на собесах 👉Рассказываю как пройти фильтр HR 👉Борюсь с убеждениями, которые мешают развиваться 👉Делюсь лайфхаками, например как аккуратно “пинговать” рекрутеров Регулярно публикую полезные материалы: ▪️60 вопросов, которые точно помогут тебе на собеседовании ▪️Подборка из 100+ каналов с вакансиями для разработчиков ▪️10 задротских вопросов про JavaScript, после которых ты усомнишься, что вообще знаешь JS. Часть 1 ▪️Чек лист проверки своего резюме Подписывайся, нас уже 4500 🤓: ссылка Реклама, erid: 2W5zFJePVMj ИП Галактионов Тихон Витальевич, ИНН 771618975809

🤔 Как добавить слушатель события? Это важный аспект работы с веб-приложениями, так как позволяет реагировать на действия пользователя, такие как клики, ввод текста, прокрутка и другие. В современных фреймворках и библиотеке JavaScript есть несколько способов добавить слушатели событий. 🚩Почему это нужно? Слушатели событий позволяют интерактивно реагировать на действия пользователей, делая приложения динамичными и отзывчивыми. Например, при клике на кнопку можно вызвать определенную функцию, при вводе текста в поле — обновить состояние и так далее. 🚩Как это используется? Рассмотрим три основных подхода к добавлению слушателей событий: в чистом JavaScript, в React и с использованием jQuery. 🟠Чистый JavaScript Для добавления слушателя события используется метод addEventListener.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Event Listener Example</title>
</head>
<body>
  <button id="myButton">Click me</button>

  <script>
    const button = document.getElementById('myButton');
    
    button.addEventListener('click', () => {
      alert('Button was clicked!');
    });
  </script>
</body>
</html>

🟠React Обработчики событий добавляются непосредственно к JSX-элементам с использованием специальных атрибутов, таких как onClick, onChange и т.д.

import React from 'react';

function App() {
  const handleClick = () => {
    alert('Button was clicked!');
  };

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

export default App;

🟠jQuery Если вы используете его, добавление слушателей событий также очень просто и удобно.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Event Listener Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="myButton">Click me</button>

  <script>
    $(document).ready(function() {
      $('#myButton').on('click', function() {
        alert('Button was clicked!');
      });
    });
  </script>
</body>
</html>

🚩Почему это удобно и важно 🟠Интерактивность Позволяет создавать динамичные и отзывчивые интерфейсы. 🟠Гибкость Возможность реагировать на различные действия пользователей. 🟠Удобство В каждом подходе (чистый JavaScript, React, jQuery) есть свои удобства и особенности, которые помогают решать задачи более эффективно. Ставь 👍 и забирай 📚 Базу знаний

🤔 Какой HTTP-метод будет у эндпоинта? Зависит от действия. GET — для получения, POST — для создания, PUT — для обновления, DELETE — для удаления. Метод подбирается в соответствии с REST-архитектурой и логикой запроса. Вот подробные текстовые ответы на твои вопросы, оформленные структурированно и без таблиц: Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Пожизненный PRO доступ на easyoffer — по цене одного года! До 31 марта вы можете купить PRO навсегда. Запускаем акцию, чтобы ускорить развитие сервиса. Что добавим в PRO в ближайшие полгода: – Автоотклики – Агрегатор вакансий – Проход ATS без отсева – Уникальные резюме и письма под каждую вакансию Покупаешь один раз — пользуешься всю жизнь. 👉 Купить PRO со скидкой 70%: https://easyoffer.ru/pro

🤔 Что можешь рассказать об version? version (версия) – это числовой или текстовый идентификатор, который используется для обозначения определённого состояния кода, программы, библиотеки или API. Версия помогает понимать, какие изменения были внесены, и совместима ли текущая версия с предыдущими. 🟠Семантическое версионирование (SemVer) Наиболее распространённый стандарт версионирования – SemVer (Semantic Versioning). Он использует формат

MAJOR.MINOR.PATCH

Пример в package.json (Node.js-проекты):

{
  "name": "my-app",
  "version": "1.2.3"
}

Команда для обновления версии в package.json

npm version major   # 2.0.0
npm version minor   # 1.3.0
npm version patch   # 1.2.4

🟠Версионирование API При работе с REST API или GraphQL API тоже используют версии, чтобы не ломать старые клиенты.

https://api.example.com/v1/users
https://api.example.com/v2/users

🟠Версионирование в Git В Git версиями называют теги (tags), привязанные к коммитам.

git tag v1.0.0
git push origin v1.0.0

Чтобы посмотреть все версии

git tag

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

🤔 Как можно работать с датами в JS? - Нативный класс Date. - Библиотеки: moment.js, date-fns, luxon. - Методы: getFullYear(), toISOString(), getTimezoneOffset(). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как увеличить в размере при наведении элемент, не сдвигая соседние? Чтобы увеличить элемент в размере при наведении, не сдвигая при этом соседние элементы, можно использовать 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 делает анимацию плавной и приятной для глаз, улучшая общее восприятие интерфейса. Ставь 👍 и забирай 📚 Базу знаний

🤔 Почему flow может плохо влиять на перформанс страницы? Любое вмешательство в поток (например, добавление/удаление элементов, float, position: absolute) может привести к пересчёту стилей и ре-рендеру, что ухудшает производительность при больших объёмах DOM. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое inline стили, и какой они имеют приоритет? Inline стили — это способ применения CSS-правил непосредственно к HTML-элементу через атрибут style. Этот метод позволяет задать стили индивидуально для конкретного элемента, напрямую внутри его тега, без использования внешних или внутренних стилевых листов.

<p style="color: red; font-size: 20px;">Этот текст будет красного цвета и с размером шрифта 20px.</p>

🚩Приоритетность inline стилей Они имеют более высокий приоритет, чем стили, заданные через внешние или внутренние стилевые листы. Это означает, что если для одного и того же элемента заданы стили через CSS-классы или идентификаторы и через inline атрибут style, то они будут применены. 🚩Порядок приоритетов CSS Inline стили (наивысший приоритет) ID селекторы Классы, псевдоклассы и атрибуты Элементы и псевдоэлементы (наименьший приоритет) Стоит отметить, что существует способ переопределить даже их с помощью правила !important в CSS, однако его использование следует минимизировать, поскольку это может усложнить дальнейшее управление и обслуживание стилей. Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое нотация О-большое? Это математическая нотация, обозначающая оценку сложности алгоритма по времени или памяти. Например, O(n) означает, что сложность линейна, O(1) — константная, O(n²) — квадратичная. Используется для анализа производительности кода. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как защитить Cookie от JavaScript? Если cookie содержит чувствительную информацию (например, auth_token), важно защитить его от доступа через JavaScript. Иначе злоумышленник может украсть его через XSS-атаку (Cross-Site Scripting). 🟠Используем флаг `HttpOnly` (основная защита) HttpOnly делает cookie недоступным для JavaScript (document.cookie).

Set-Cookie: auth_token=abc123; HttpOnly; Secure; SameSite=Strict

🟠Используем `Secure`, чтобы cookie передавались только по HTTPS Флаг Secure запрещает передачу cookie через HTTP, только HTTPS.

Set-Cookie: auth_token=abc123; Secure

🟠Используем `SameSite`, чтобы защититься от CSRF-атак SameSite=Strict или SameSite=Lax защищает от подделки запросов (CSRF).

Set-Cookie: auth_token=abc123; SameSite=Strict

🟠Не храним токены в cookie (если можно) Если возможно, используйте Authorization: Bearer заголовки вместо cookie.

Authorization: Bearer abc123

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

🤔 Что передаётся вторым аргументом методам call, apply, bind? Вторым аргументом передаются аргументы вызываемой функции: - call — перечисленные через запятую; - apply — массив; - bind — сохраняет this и передаёт аргументы для будущего вызова. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Почему методы жизненного цикла нельзя писать через прилоченную функцию? В 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);
  }
};

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