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

🤔 Как можно вставить svg в html документ? Вставить SVG в HTML можно несколькими способами, в зависимости от того, что вам нужно: просто отобразить изображение, стилизовать его через CSS или динамически изменять с помощью JavaScript. 🟠Прямой (inline) SVG-код в HTML Этот способ позволяет стилизовать и изменять SVG с помощью CSS и JavaScript. <svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> </svg> 🟠Через тег `<img>` Если SVG не нужно изменять, можно вставить его как обычное изображение. <img src="image.svg" alt="Описание изображения" width="100" height="100"> 🟠Через CSS `background-image` SVG можно использовать как фоновое изображение. <div class="icon"></div> <style> .icon { width: 100px; height: 100px; background-image: url('image.svg'); background-size: cover; } </style> 🟠Через тег `<object>` Позволяет загружать SVG-файлы и взаимодействовать с ними. <object type="image/svg+xml" data="image.svg" width="100" height="100"></object> 🟠Через тег `<iframe>` SVG можно загружать в iframe. <iframe src="image.svg" width="100" height="100"></iframe> Ставь 👍 и забирай 📚 Базу знаний

🤔 Для чего нуден key при работе со списками? В React при рендере списков (например, через .map()) каждому элементу необходимо передавать уникальный key. Это помогает React оптимизировать перерисовку и правильно отслеживать изменения в списке. 🚩Почему `key` важен? React использует виртуальный DOM и при обновлении сравнивает новый список с предыдущим. Без key React не понимает, какие элементы изменились, удалились или добавились. Это может привести к неожиданному поведению, например, сбросу состояния или неправильному рендеру. 🚩Как использовать `key` правильно? const users = ["Alice", "Bob", "Charlie"]; function UserList() { return ( <ul> {users.map((user, index) => ( <li key={user}>{user}</li> // Хорошо, если `user` уникален ))} </ul> ); } 🚩Что будет без `key`? Если не указать key, React выдаст предупреждение: Warning: Each child in a list should have a unique "key" prop. Кроме того, при изменении списка возможны проблемы с перерисовкой {users.map((user, index) => ( <input key={index} defaultValue={user} /> ))} Ставь 👍 и забирай 📚 Базу знаний

🤔 Как методы будут у api? В API (Application Programming Interface) обычно используются HTTP-методы, которые определяют, какое действие нужно выполнить с ресурсом (данными). 🚩Примеры использования 🟠`GET` – Получение данных Запрашиваем список пользователей: GET /users HTTP/1.1 Host: api.example.com Ответ (JSON) [ { "id": 1, "name": "Alice" }, { "id": 2, "name": "Bob" } ] 🟠`POST` – Создание нового ресурса Отправляем данные нового пользователя: POST /users HTTP/1.1 Host: api.example.com Content-Type: application/json { "name": "Charlie", "email": "charlie@example.com" } Ответ (201 Created) { "id": 3, "name": "Charlie", "email": "charlie@example.com" } 🟠`PUT` – Полное обновление ресурса Заменяем пользователя с ID 1: PUT /users/1 HTTP/1.1 Host: api.example.com Content-Type: application/json { "name": "Alice Smith", "email": "alice.smith@example.com" } 🟠`PATCH` – Частичное обновление ресурса Меняем только имя пользователя 1, не трогая email: PATCH /users/1 HTTP/1.1 Host: api.example.com Content-Type: application/json { "name": "Alice Johnson" } 🟠`DELETE` – Удаление ресурса Удаляем пользователя с ID 2: DELETE /users/2 HTTP/1.1 Host: api.example.com Ставь 👍 и забирай 📚 Базу знаний

🤔 Какое событие сработает при потери фокуса элементом формы? Событие, которое срабатывает при потере фокуса элементом формы, называется blur. 🚩Почему нужно событие `blur`? Событие blur используется для выполнения действий, когда пользователь перестает взаимодействовать с элементом ввода. Например: Проверка корректности данных (валидация) после того, как пользователь заполнил поле. Автоматическое сохранение введенных данных при переходе на другой элемент формы. Скрытие вспомогательной информации (например, подсказок) при уходе с элемента. blur помогает реализовать логику, связанную с завершением работы с конкретным элементом формы. 🚩Как оно работает? blur срабатывает, когда элемент теряет фокус, то есть пользователь: Кликнул на другой элемент. Нажал клавишу Tab, чтобы перейти на следующий элемент. В отличие от события focus, которое возникает при получении фокуса, blur позволяет отследить момент завершения работы с элементом. 🚩Как использовать `blur`? Событие можно обрабатывать с помощью: 1. HTML-атрибутов (например, onblur). 2. JavaScript через метод addEventListener. Пример на практике <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Пример blur</title> <script> function validateInput(event) { const input = event.target; if (input.value.trim() === "") { alert("Поле не должно быть пустым!"); } } document.addEventListener("DOMContentLoaded", () => { const inputElement = document.getElementById("name"); inputElement.addEventListener("blur", validateInput); }); </script> </head> <body> <form> <label for="name">Введите имя:</label> <input type="text" id="name" name="name" /> <button type="submit">Отправить</button> </form> </body> </html> 🚩Особенности события `blur` 🟠Не всплывает Событие blur не поддерживает всплытие (то есть не распространяется вверх по дереву DOM). Если нужно отслеживать потерю фокуса на уровне родительских элементов, используется делегирование с помощью события focusout. // Работает только для конкретного элемента element.addEventListener("blur", handler); // Для делегирования используют focusout parentElement.addEventListener("focusout", handler); 🟠Отличие от `change` Событие change срабатывает только после изменения значения элемента и потери фокуса, тогда как blur срабатывает в любом случае при потере фокуса, независимо от того, менялось ли значение. Ставь 👍 и забирай 📚 Базу знаний

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

🤔 Как браузер понимает что картинка является картинкой? Браузер понимает, что файл является картинкой, благодаря MIME-типу, расширению файла и контексту его использования в HTML. Рассмотрим подробнее. 🟠MIME-тип (Media Type) MIME-тип (Multipurpose Internet Mail Extensions) сообщает браузеру, какой тип контента загружается. Например: - image/png → PNG - image/jpeg → JPEG - image/svg+xml → SVG - image/gif → GIF - image/webp → WebP Content-Type: image/png 🟠Расширение файла Хотя MIME-тип важнее, браузер также может ориентироваться на расширение файла (.jpg, .png, .gif). <img src="picture.jpg" alt="Картинка"> 🟠HTML-теги и атрибуты Когда браузер встречает в коде такие теги, как <img>, <picture>, <canvas>, он ожидает, что внутри будет изображение. <img src="image.png" alt="Пример картинки"> 🟠Формат и сигнатура файла Даже если расширение и MIME-тип указаны неверно, браузер может проверить сигнатуру файла (первые байты). Например: - PNG-файл всегда начинается с байтов 89 50 4E 47 (что означает "PNG" в ASCII). - JPEG — FF D8 FF. - GIF — 47 49 46 38 (GIF89a). Ставь 👍 и забирай 📚 Базу знаний

🤔 Как отслеживаем активность пользователя? - События (click, scroll, mousemove). - Инструменты: Yandex.Metrika, Google Analytics, PostHog. - Собственные endpoint'ы POST /track. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Почему map используют чаще, чем объект? Хотя объекты {} исторически использовались как ассоциативные массивы (ключ-значение), у Map есть ряд преимуществ, которые делают его более удобным в большинстве случаев. 🟠`Map` может использовать любые типы данных в качестве ключей В объектах {} ключи всегда автоматически приводятся к строке. const obj = {}; const key1 = {}; const key2 = {}; obj[key1] = "value1"; obj[key2] = "value2"; console.log(obj); // { '[object Object]': 'value2' } console.log(obj[key1]); // "value2" (ключи перезаписались, потому что оба стали "[object Object]") Пример с Map: const map = new Map(); map.set(key1, "value1"); map.set(key2, "value2"); console.log(map.get(key1)); // "value1" console.log(map.get(key2)); // "value2" 🟠`Map` хранит порядок ключей В объекте {} порядок ключей не гарантируется (особенно для числовых ключей). const obj = { 2: "two", 1: "one", 3: "three" }; console.log(Object.keys(obj)); // ["1", "2", "3"] (порядок числовых ключей изменился!) Пример с Map const map = new Map(); map.set(2, "two"); map.set(1, "one"); map.set(3, "three"); console.log([...map.keys()]); // [2, 1, 3] (порядок сохраняется!) 🟠`Map` быстрее при частых добавлениях/удалениях Объекты {} оптимизированы для хранения структуры данных, но операции delete и Object.keys(obj).length могут быть медленными, потому что движок JavaScript выполняет дополнительные проверки. Разница в скорости В Map операции .set(), .get(), .delete() выполняются быстрее. В объекте {} delete obj[key] может работать медленнее, так как JavaScript оптимизирует объекты для других целей. 🟠У `Map` есть удобные методы Объект {} не имеет встроенных методов для работы с ключами и значениями. Чтобы, например, узнать размер объекта, приходится использовать Object.keys(obj).length. const map = new Map(); map.set("a", 1); map.set("b", 2); console.log(map.size); // 2 console.log(map.has("a")); // true console.log(map.delete("b")); // true (удалит "b") В объекте {} const obj = { a: 1, b: 2 }; console.log(Object.keys(obj).length); // 2 (нужно вызывать Object.keys()) console.log(obj.hasOwnProperty("a")); // true (менее удобный синтаксис) delete obj.b; // Удаление ключа 🟠`Map` не имеет проблем с прототипами В объекте {} могут быть неожиданные проблемы, если ключ совпадает с именем встроенного метода. const obj = {}; console.log(obj.toString); // [Function: toString] (унаследованное свойство!) console.log(obj["toString"]); // [Function: toString] (может вызвать баги) Чтобы обойти это, приходится делать так const obj = Object.create(null); // Теперь у объекта нет прототипа obj.toString = "custom"; console.log(obj.toString); // "custom" В Map таких проблем нет const map = new Map(); map.set("toString", "custom"); console.log(map.get("toString")); // "custom" (никаких багов!) Ставь 👍 и забирай 📚 Базу знаний

🤔 Какие ограничения накладываются на поток Web Worker? - Нет доступа к DOM напрямую; - Нет доступа к window, document, alert; - Обмен данными происходит через сообщения (postMessage); - Нужно отдельно импортировать зависимости. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Когда используются переменные var, let, const? - var: устаревший способ, имеет функцию как область видимости и может быть переопределён. - let: используется для переменных, которые могут изменяться, имеет блочную область видимости. - const: для неизменяемых переменных (значение не может быть переназначено). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как пользоваться линтером JS? Линтер – инструмент для анализа кода. Самый популярный – ESLint. 1. Установить: 2. npm install eslint --save-dev 3. Инициализировать: 4. npx eslint --init 5. Проверить код: 6. npx eslint script.js Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Какой формат видеофайлов сейчас поддерживается HTML5? Современные браузеры поддерживают: - MP4 (H.264/AAC) — наиболее универсальный; - WebM (VP8/VP9) — открыт и эффективен; - Ogg (Theora/Vorbis) — реже используется, поддерживается не везде. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Зачем создавались библиотеки react и другие? Библиотеки, такие как React, создавались для упрощения и оптимизации процесса разработки пользовательских интерфейсов (UI). Вот несколько ключевых причин, почему создавались React и другие библиотеки: 🟠Повышение эффективности разработки Написание большого количества кода вручную для создания динамических веб-страниц может быть громоздким и ошибочным. React позволяет разбивать интерфейс на отдельные компоненты, которые можно повторно использовать и комбинировать. Это снижает объем дублирующегося кода и упрощает его сопровождение. 🟠Улучшение производительности Постоянное обновление DOM (Document Object Model) может быть медленным и ресурсоемким. React использует виртуальный DOM, который минимизирует количество реальных изменений в DOM, обновляя только те элементы, которые действительно изменились. 🟠Облегчение работы с состоянием приложения Управление состоянием больших и сложных приложений может стать хаотичным. React предоставляет механизмы для удобного управления состоянием компонентов с помощью useState, useReducer, и других хуков. Это делает логику управления состоянием более ясной и предсказуемой. 🟠Улучшение масштабируемости и поддерживаемости кода По мере роста приложения, код может стать сложным для понимания и изменения. Подход к компонентам в React позволяет разработчикам легче разделять задачи и работать над отдельными частями приложения независимо друг от друга. Это улучшает масштабируемость и поддерживаемость кода. 🟠Сообщество и экосистема Наличие обширного сообщества и инструментов для разработки. React имеет большое сообщество разработчиков, множество библиотек и инструментов, которые упрощают разработку и интеграцию различных функций в приложения. import React, { useState } from 'react'; function Counter() { // Определение состояния count с начальным значением 0 const [count, setCount] = useState(0); return ( <div> <p>Вы кликнули {count} раз(а)</p> <button onClick={() => setCount(count + 1)}> Кликни меня </button> </div> ); } export default Counter; Ставь 👍 и забирай 📚 Базу знаний

🤔 Как задать Flexbox? Нужно установить контейнеру свойство display: flex. Его содержимое становится flex-элементами, которые подчиняются гибкой системе распределения. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Пример архитектурных решений для проектов на Node.js? - Layered architecture — с разделением на controller, service, repository; - Hexagonal architecture — с портами/адаптерами; - Microservices с gRPC/REST; - GraphQL gateway с Apollo; - Event-driven через Kafka/RabbitMQ; - Serverless архитектура (AWS Lambda, Firebase Functions). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Какие проблемы решает 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(); Ставь 👍 и забирай 📚 Базу знаний

без подписи

без подписи

без подписи

🤔 Как уничтожить объект 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 автоматически уничтожаются браузером. Однако в рамках текущей сессии ответственность за уничтожение лежит на разработчике. Ставь 👍 и забирай 📚 Базу знаний