Frontend | Вопросы собесов
описание
Сайт: https://easyoffer.ru/ Все каналы: t.me/+xGeAw6ckJ4liYzQy Контакт для рекламы: @easyoffer_adv
17 955
подписчиков
Охват к подписчикам
6,9%
ERR
Реакции к просмотрам
0,42%
143 на 30 постов
Пересылки к просмотрам
0,40%
134
Постов в день
2,3
всего 26
Где отзываются чаще
доля реакций к просмотрам- 11:05🤔 Что такое семантические коммиты? Семантические коммиты – это соглашение о формате сообщений коммитов в системе контроля версий (обычно Git), которое помогает делать историю изменений более понятной и удобной для автоматического анализа. Обычно используется стандарт Conventional Commits, который вводит строгую структуру сообщений коммитов. 🚩Формат семантического коммита Коммит должен начинаться с типа изменения, а затем кратко описывать суть правки. Основной шаблон <тип>(<область>): <краткое описание> 🚩Основные типы коммитов 🟠feat добавление новой функциональности 🟠fix исправление ошибки 🟠docs изменение документации 🟠style исправления, не влияющие на логику (например, форматирование) 🟠refactor переработка кода без изменения функциональности 🟠test добавление или обновление тестов 🟠chore изменения, не влияющие на код (например, обновление зависимостей) 🚩Примеры 1⃣Добавление новой функции feat(auth): добавлена аутентификация через Google 2⃣Исправление ошибки fix(login): исправлен баг с неверным редиректом 3⃣Улучшение кода без изменения refactor(api): оптимизирован алгоритм фильтрации данных 4⃣Обновление документации docs(readme): добавлены инструкции по развертыванию Ставь 👍 и забирай 📚 Базу знаний1,08%
- 8 авг.🤔 Когда используются переменные var, let, const? - var: устаревший способ, имеет функцию как область видимости и может быть переопределён. - let: используется для переменных, которые могут изменяться, имеет блочную область видимости. - const: для неизменяемых переменных (значение не может быть переназначено). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний0,82%
- 12 авг.🤔 Какие проблемы решает 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(); Ставь 👍 и забирай 📚 Базу знаний0,73%
- 8 авг.🤔 Почему 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" (никаких багов!) Ставь 👍 и забирай 📚 Базу знаний0,73%
- 5 авг.🤔 Какие ограничения накладываются на поток Web Worker? - Нет доступа к DOM напрямую; - Нет доступа к window, document, alert; - Обмен данными происходит через сообщения (postMessage); - Нужно отдельно импортировать зависимости. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний0,66%
- 9 авг.🤔 Как отслеживаем активность пользователя? - События (click, scroll, mousemove). - Инструменты: Yandex.Metrika, Google Analytics, PostHog. - Собственные endpoint'ы POST /track. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний0,64%
- 10 авг.🤔 Как браузер понимает что картинка является картинкой? Браузер понимает, что файл является картинкой, благодаря 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). Ставь 👍 и забирай 📚 Базу знаний0,63%
- 14 авг.🤔 В каком случае нужно SPA? SPA (Single Page Application) нужен, когда: - требуется динамичный интерфейс без перезагрузки страницы; - важен быстрый отклик UI; - есть много интерактивных действий на клиенте; - приложение похоже на десктопное по поведению (например, админки, CRM, почта). Не нужен — для SEO-критичных лендингов и новостных сайтов. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний0,63%
- 9 авг.🤔 Как методы будут у 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 Ставь 👍 и забирай 📚 Базу знаний0,56%
- 7 авг.🤔 Как пользоваться линтером JS? Линтер – инструмент для анализа кода. Самый популярный – ESLint. 1. Установить: 2. npm install eslint --save-dev 3. Инициализировать: 4. npx eslint --init 5. Проверить код: 6. npx eslint script.js Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний0,54%
- 7 авг.🤔 Как можно вставить 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> Ставь 👍 и забирай 📚 Базу знаний0,53%
- 13 авг.🤔 Как следует оформлять страницу, в которой контент может быть на разных языках? - Указывать атрибут lang в <html> и в текстовых блоках; - Использовать hreflang в <link> и <a> для указания языковых версий; - Хранить переводы отдельно и подгружать в зависимости от языка (через i18n). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний0,49%