Frontend | Вопросы собесов
СтатистикаСайт: https://easyoffer.ru/ Все каналы: t.me/+xGeAw6ckJ4liYzQy Контакт для рекламы: @easyoffer_adv
- Последний пост
- 23:37
- Последнее чтение
- 10:22
- Постов за неделю
- 15
- Всего постов
- 24
- Тип
- открытый
- Язык
- русский
- Категория
- Технологии (по похожим)
- В каталоге с
- 12 авг.
- 1/24сутки в ленте
- 816
- 1/48двое суток
- 898
- 1/72трое суток
- 968
Медиана по постам, которые мы застали свежими и померили через сутки.
Посты
видео или голосовое, без подписи
🤔 Как считается вес селектора? Вес селектора (специфичность) – это правило, по которому браузер определяет, какой стиль применить, если есть несколько конфликтующих селекторов. ( 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; } /* Всегда будет красным */ Ставь 👍 и забирай 📚 Базу знаний
видео или голосовое, без подписи
🤔 В каком случае нужно SPA? SPA (Single Page Application) нужен, когда: - требуется динамичный интерфейс без перезагрузки страницы; - важен быстрый отклик UI; - есть много интерактивных действий на клиенте; - приложение похоже на десктопное по поведению (например, админки, CRM, почта). Не нужен — для SEO-критичных лендингов и новостных сайтов. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний
🤔 Как уничтожить объект 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 автоматически уничтожаются браузером. Однако в рамках текущей сессии ответственность за уничтожение лежит на разработчике. Ставь 👍 и забирай 📚 Базу знаний
видео или голосовое, без подписи
🤔 Как следует оформлять страницу, в которой контент может быть на разных языках? - Указывать атрибут lang в <html> и в текстовых блоках; - Использовать hreflang в <link> и <a> для указания языковых версий; - Хранить переводы отдельно и подгружать в зависимости от языка (через i18n). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний
🤔 Зачем нужен ref? В React ref (сокращение от reference) используется для доступа к DOM-элементам или компонентам напрямую. Он позволяет взаимодействовать с элементами, которые были созданы в процессе рендеринга, предоставляя механизм для манипуляции с ними, получения их размеров, положения или вызова методов у компонент. Это особенно полезно в ситуациях, когда необходимо выполнить операции, которые не могут быть выполнены исключительно через декларативный подход React. 🚩Основные случаи использования `ref` Доступ к DOM-элементам: Использование в сторонних библиотеках: Сохранение состояния вне дерева компонентов: 🚩Примеры использования `ref` Доступ к DOM-элементам Установка фокуса на элемент import React, { useRef, useEffect } from 'react'; function TextInputWithFocusButton() { const inputEl = useRef(null); const onButtonClick = () => { // Установить фокус на текстовое поле inputEl.current.focus(); }; return ( <div> <input ref={inputEl} type="text" /> <button onClick={onButtonClick}>Установить фокус</button> </div> ); } export default TextInputWithFocusButton; Получение размеров элемента Измерение элемента: import React, { useRef, useEffect, useState } from 'react'; function MeasureDiv() { const divRef = useRef(null); const [dimensions, setDimensions] = useState({ width: 0, height: 0 }); useEffect(() => { if (divRef.current) { const { width, height } = divRef.current.getBoundingClientRect(); setDimensions({ width, height }); } }, []); return ( <div> <div ref={divRef} style={{ width: '100px', height: '100px', backgroundColor: 'lightblue' }}> Измеряемый элемент </div> <p>Ширина: {dimensions.width}px, Высота: {dimensions.height}px</p> </div> ); } export default MeasureDiv; Использование в классовых компонентах Доступ к методам компонента: import React, { Component } from 'react'; class CustomComponent extends Component { customMethod() { console.log('Метод компонента вызван'); } render() { return <div>Custom Component</div>; } } class ParentComponent extends Component { constructor(props) { super(props); this.customComponentRef = React.createRef(); } handleClick = () => { this.customComponentRef.current.customMethod(); }; render() { return ( <div> <CustomComponent ref={this.customComponentRef} /> <button onClick={this.handleClick}>Вызвать метод компонента</button> </div> ); } } export default ParentComponent; 🚩Важно помнить Прямое управление DOM может нарушить декларативный подход React, поэтому его следует использовать только тогда, когда это действительно необходимо. Когда необходимо использовать сторонние библиотеки, которые требуют прямого доступа к DOM-элементам. Состояние приложения и его логика должны по возможности управляться через состояния и пропсы React. ref следует использовать для случаев, которые не могут быть решены этим способом. Ставь 👍 и забирай 📚 Базу знаний
видео или голосовое, без подписи
🤔 Пример архитектурных решений для проектов на 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(); Ставь 👍 и забирай 📚 Базу знаний
видео или голосовое, без подписи
🤔 Как задать Flexbox? Нужно установить контейнеру свойство display: flex. Его содержимое становится flex-элементами, которые подчиняются гибкой системе распределения. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний
видео или голосовое, без подписи
🤔 Зачем создавались библиотеки 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; Ставь 👍 и забирай 📚 Базу знаний
видео или голосовое, без подписи
🤔 Какой формат видеофайлов сейчас поддерживается HTML5? Современные браузеры поддерживают: - MP4 (H.264/AAC) — наиболее универсальный; - WebM (VP8/VP9) — открыт и эффективен; - Ogg (Theora/Vorbis) — реже используется, поддерживается не везде. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний
🤔 Как браузер понимает что картинка является картинкой? Браузер понимает, что файл является картинкой, благодаря 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. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний