Channel: Frontend | Вопросы собесов
Очистку следует выполнять в момент, когда компонент удаляется со страницы. В Vue этот этап называется «размонтирование». Именно в этот момент ты должен завершать таймеры, отписываться от событий или отменять запросы, чтобы избежать утечек памяти и лишней нагрузки.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Выбор между абсолютными и относительными единицами измерения зависит от контекста использования и целей, которые вы преследуете. Рассмотрим подробнее, когда и почему стоит использовать те или иные единицы.
Имеют фиксированные размеры и не зависят от других элементов или размеров экрана. Они всегда остаются одинаковыми, независимо от контекста.
Точные размеры: Когда вам нужно задать точные размеры элементов, например, для пиксельной точности в дизайне.
Фиксированные элементы: Для элементов, размеры которых не должны изменяться в зависимости от экрана или родительского элемента (например, логотипы или иконки).
Маленькие декоративные элементы: Когда размеры элементов настолько малы, что относительные единицы могут привести к неконтролируемому результату.
.logo {
width: 100px;
height: 50px;
}Изменяются в зависимости от других элементов или размеров экрана. Они позволяют создавать более гибкие и адаптивные макеты.
Адаптивные макеты: Когда нужно, чтобы элемент занимал определенный процент от размера родительского элемента.
Контейнеры и блоки: Для ширины и высоты блоков, которые должны изменяться вместе с размерами родителя.
.container {
width: 80%;
height: 50%;
}Шрифты: Когда нужно задавать размер шрифта относительно размера шрифта родителя.
Внутренние отступы и поля: Для создания элементов, которые масштабируются вместе с текстом.
.text {
font-size: 1.2em;
margin: 1em;
}Глобальная консистентность: Когда нужно задавать размер относительно корневого элемента (обычно <html>), что обеспечивает более предсказуемое масштабирование.
Шрифты и отступы: Для элементов, которые должны быть пропорциональны базовому размеру шрифта
body {
font-size: 16px;
}
.header {
font-size: 2rem; /* 32px */
margin: 1rem; /* 16px */
}Адаптивные размеры: Когда размеры элементов должны быть пропорциональны размеру вьюпорта (окна браузера).
Фоновые изображения и видео: Для элементов, которые должны занимать определенный процент от экрана.
.hero {
width: 100vw;
height: 100vh;
}Иногда можно комбинировать абсолютные и относительные единицы для достижения наилучшего результата.
.container {
width: 80%; /* Относительная ширина */
padding: 20px; /* Абсолютный внутренний отступ */
}
.text {
font-size: 1.5rem; /* Относительный размер шрифта */
margin: 2em; /* Относительный внешний отступ */
}Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Замыкание и область видимости — это два фундаментальных концепта в JavaScript, связанных с работой переменных, но они решают разные задачи. Давайте разберёмся в их отличиях.
Область видимости определяет, где в коде можно обращаться к переменной. В JavaScript есть три основные области видимости:
Глобальная область видимости – переменные доступны в любом месте кода.
Область видимости функции (функциональная) – переменные доступны только внутри функции, где они были объявлены.
Блочная область видимости (с
let и const) – переменные доступны только внутри блока {}. function testScope() {
let x = 10; // x доступна только внутри testScope
console.log(x); // 10
}
console.log(x); // Ошибка: x не определенаЗамыкание – это функция, которая запоминает область видимости, в которой была создана, даже после выхода из неё. То есть, если внутренняя функция использует переменные внешней функции, она "захватывает" их и может использовать даже после завершения работы внешней функции.
function outer() {
let count = 0;
return function inner() {
count++;
console.log(count);
};
}
const counter = outer(); // outer выполняется, но переменная count остается в памяти
counter(); // 1
counter(); // 2
counter(); // 3Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Они возвращают значение:
- 1 + 2
- a === b
- function(){}
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Тип
any в TypeScript позволяет отключить проверку типов и использовать любую структуру данных, как в обычном JavaScript. Но
any убирает всю защиту TypeScript, поэтому его нужно использовать только в крайних случаях. Иногда сервер может вернуть разные структуры данных, и невозможно заранее определить точный тип.
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 может сломать код.
any помогает постепенно вводить строгую типизацию. function log(value: any) {
console.log(value);
}В
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 };
}Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Используются:
- колбэки — старый способ;
- промисы — современная модель с .then()/.catch();
- async/await — синтаксический сахар над промисами, читаемость как у синхронного кода.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Проверить правильную иерархию HTML-заголовков важно для улучшения доступности (Accessibility) и SEO. Правильная структура заголовков помогает пользователям (включая тех, кто использует скринридеры) и поисковым системам лучше понимать содержание страницы.
Заголовки задают структуру страницы, разбивая контент на разделы и подразделы. Это как оглавление книги.
Люди, использующие вспомогательные технологии (например, скринридеры), полагаются на правильные заголовки для навигации по странице.
Поисковые системы оценивают структуру заголовков для индексации и понимания ключевых тем страницы.
Заголовок страницы (должен быть уникальным и только один на странице).
Подразделы
<h1>.Подразделы
<h2>, и так далее.<h1>Главный заголовок страницы</h1>
<h2>Раздел 1</h2>
<h3>Подраздел 1.1</h3>
<h3>Подраздел 1.2</h3>
<h2>Раздел 2</h2>
<h3>Подраздел 2.1</h3>
<h4>Подраздел 2.1.1</h4>
Вручную просмотрите HTML-код страницы и убедитесь, что заголовки идут в порядке. Например,
<h1> → <h2> → <h3> и так далее, без "перескакивания". Избегайте "пропуска уровней" (например, от <h2> сразу к <h4>).В браузере откройте DevTools (например, в Chrome нажмите
F12 или Ctrl+Shift+I). Перейдите на вкладку "Elements" (Элементы). Найдите заголовки (<h1>, <h2> и так далее) и проверьте их последовательность.Используйте расширения или инструменты для оценки доступности, такие как: Lighthouse (встроено в Chrome DevTools). Выполните аудит доступности и посмотрите рекомендации. WAVE (Web Accessibility Evaluation Tool) — онлайн-инструмент для анализа доступности. Эти инструменты покажут ошибки или пропуски в структуре заголовков.
Если вы работаете над большим проектом, можно написать скрипт для проверки иерархии заголовков.
const headings = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')];
headings.forEach((heading, index) => {
console.log(`${index + 1}: ${heading.tagName} - ${heading.textContent.trim()}`);
});Для популярных CMS (например, WordPress) существуют плагины, которые проверяют структуру заголовков, например, Yoast SEO.
Ошибка: Пропуск уровней заголовков
<h1>Главный заголовок</h1>
<h3>Подраздел</h3> <!-- Пропущен <h2> -->
Исправление
<h1>Главный заголовок</h1>
<h2>Подраздел</h2>
Ошибка: Несколько
<h1> на одной странице<h1>Главный заголовок</h1>
<h1>Еще один заголовок</h1>
Исправление
<h1>Главный заголовок</h1>
<h2>Еще один заголовок</h2>
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Flexbox (Flexible Box Layout) — система расположения элементов в контейнере:
- выравнивание по оси;
- растягивание/сжатие;
- распределение пространства;
- управление направлением.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Нет, Promise в JavaScript нельзя перезапустить. Промисы являются одноразовыми: после того как они переходят в одно из состояний — выполнен (resolved) или отклонён (rejected) — их состояние больше не может измениться. Это одно из ключевых свойств промисов.
Промис, как только выполняется, становится иммутабельным. После выполнения (
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 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));Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
rebase в Git применяется для:
- переписывания истории коммитов, чтобы сделать её «чище».
- Переноса текущих коммитов на новую базу, например, на обновлённую ветку main.
- Помогает избежать лишних merge-коммитов и поддерживать линейную историю.
Он особенно полезен, если ты хочешь «подстроиться» под чужие изменения до merge.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Nginx — это мощный веб-сервер, который используется для раздачи статических файлов, балансировки нагрузки, проксирования запросов и обеспечения безопасности.
Когда мы билдим SPA-приложение (например, React/Vue/Angular), в папке
dist появляются статические файлы (index.html, app.js, styles.css). server {
listen 80;
server_name myapp.com;
root /var/www/myapp/dist;
index index.html;
location / {
try_files $uri /index.html;
}
}Если фронтенд (
myapp.com) и бэкенд (api.myapp.com) находятся на разных серверах, Nginx может перенаправлять запросы на API. server {
listen 80;
server_name myapp.com;
root /var/www/myapp/dist;
index index.html;
location / {
try_files $uri /index.html;
}
# Проксирование API-запросов
location /api/ {
proxy_pass http://localhost:5000/; # Node.js, Python, PHP и т. д.
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
}Если у нас несколько бэкенд-серверов, Nginx может распределять нагрузку между ними.
upstream backend {
server backend1.myapp.com;
server backend2.myapp.com;
}
server {
listen 80;
server_name api.myapp.com;
location / {
proxy_pass http://backend;
}
}Кэширование уменьшает нагрузку на сервер и ускоряет загрузку страниц.
location /static/ {
expires 7d; # Кэшировать файлы на 7 дней
add_header Cache-Control "public, max-age=604800";
}Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Поток (flow) — это естественный порядок расположения элементов на странице: сверху вниз, слева направо. Влияет на поведение и позиционирование элементов в HTML-документе.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Это ключевые слова, добавляемые к селекторам, которые указывают на специальное состояние выбранного элемента. Псевдоклассы позволяют стилизовать элементы на основе их состояния в документе, без необходимости добавления дополнительных классов или ID напрямую в HTML-код. С их помощью можно, например, изменить внешний вид ссылок при наведении курсора, стилизовать четные и нечетные элементы списка, изменять стиль элементов при получении фокуса и многое другое.
:hover — применяется к элементу, когда на него наводят курсор мыши.a:hover {
color: red; /* Ссылка станет красной при наведении /
}:focus — применяется к элементу, когда он получает фокус (например, при переходе на элемент с помощью клавиатуры или при клике мыши).input:focus {
border-color: blue; / Граница инпута станет синей при фокусе /
}:active — применяется к элементу в момент его активации пользователем (например, во время клика по кнопке).button:active {
transform: scale(0.98); / Кнопка немного уменьшится при клике /
}:nth-child() — позволяет стилизовать элементы в зависимости от их порядка среди детей родительского элемента.li:nth-child(odd) {
background-color: gray; / Заливка каждого нечетного элемента списка /
}:not() — исключает из выборки элементы, соответствующие указанному селектору.div:not(.special) {
color: green; / Применяется к каждому div, который не имеет класса special */
}Они делают CSS более мощным и гибким, позволяя разработчикам применять стили к элементам на основе их состояния или положения в документе, без изменения HTML-структуры. Это особенно полезно для создания интерактивных и реактивных пользовательских интерфейсов, где визуальное состояние элемента должно меняться в ответ на действия пользователя.
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Относительная ссылка указывает путь относительно текущего документа или директории. Удобна для работы внутри сайта или проекта.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
ECMAScript 6 (или ES6), также известный как ECMAScript 2015, представил множество новых возможностей для JavaScript, которые сделали язык более удобным, мощным и современным. Я знаком с большинством нововведений, и ниже я подробно расскажу о самых популярных из них.
До ES6 переменные создавались с помощью
var. Однако у него были проблемы, такие как отсутствие блочной области видимости и возможность повторного объявления. С введением let и const эти проблемы решены.let — для переменных, которые могут изменяться.const — для переменных, которые нельзя переназначить (но можно изменять содержимое, если это объект или массив).let a = 10;
a = 20; // Работает
const b = 30;
// b = 40; // Ошибка: Нельзя переназначить
Стрелочные функции дают более лаконичный синтаксис для объявления функций. Они также не создают собственный
this, а используют this из окружающего контекста.// Обычная функция
function add(a, b) {
return a + b;
}
// Стрелочная функция
const add = (a, b) => a + b;
console.log(add(2, 3)); // 5
Раньше строки приходилось склеивать с помощью конкатенации (
+). Шаблонные строки (обозначаются обратными кавычками ``) позволяют вставлять переменные и выражения прямо в текст.const name = "Alice";
const message = `Привет, ${name}! Добро пожаловать.`;
console.log(message); // Привет, Alice! Добро пожаловать.
Деструктуризация позволяет извлекать значения из массивов или объектов и присваивать их переменным.
// Деструктуризация массива
const arr = [1, 2, 3];
const [first, second] = arr;
console.log(first, second); // 1, 2
// Деструктуризация объекта
const user = { name: "Alice", age: 25 };
const { name, age } = user;
console.log(name, age); // Alice 25
ES6 добавил встроенную поддержку модулей через
import и export. Теперь код можно организовывать и повторно использовать более эффективно.// В модуле user.js
export const greet = (name) => `Привет, ${name}`;
// В другом файле
import { greet } from './user.js';
console.log(greet("Alice")); // Привет, Alice
Оператор
... используется для работы с массивами, объектами и функциями.Spread — для разворачивания массивов и объектов.
Rest — для сбора оставшихся элементов в массив или объект.
// Spread
const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4];
console.log(arr2); // [1, 2, 3, 4]
// Rest
const [first, ...rest] = [1, 2, 3, 4];
console.log(first); // 1
console.log(rest); // [2, 3, 4]
Классы добавляют объектно-ориентированный стиль программирования. Это синтаксический сахар над прототипами.
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} говорит.`);
}
}
const dog = new Animal("Собака");
dog.speak(); // Собака говорит.Обещания (
Promises) упрощают работу с асинхронным кодом, заменяя вложенные колбэки (callback hell).const fetchData = () => {
return new Promise((resolve, reject) => {
setTimeout(() => resolve("Данные получены"), 1000);
});
};
fetchData().then((data) => console.log(data)); // Данные полученыИтераторы дают возможность обходить коллекции (например, массивы) шаг за шагом.
Генераторы — функции, которые можно приостанавливать и возобновлять.
function* numbers() {
yield 1;
yield 2;
yield 3;
}
const gen = numbers();
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
- 4xx — ошибка на стороне клиента (неправильный запрос, авторизация и т.п.);
- 5xx — ошибка на стороне сервера (внутренние сбои, отказ логики).
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Это процесс снижения количества лишних перерисовок компонентов, что улучшает производительность приложения. React повторно рендерит компоненты, когда их состояние (
state) или свойства (props) изменяются. Однако часто это приводит к ненужным рендерам, которые можно избежать.Чем больше компонентов рендерится без необходимости, тем больше времени тратится на вычисления и обновления DOM.
Избегая лишних рендеров, приложение работает быстрее, а пользовательский интерфейс становится более отзывчивым.
Плавная работа интерфейса критична для сложных приложений с большим количеством данных.
React предоставляет утилиту
React.memo, чтобы предотвращать ререндеринг компонента, если его props не изменились.import React from 'react';
const MyComponent = React.memo(({ count }) => {
console.log('Рендер компонента');
return <div>Счётчик: {count}</div>;
});
// Использование
export default function App() {
const [count, setCount] = React.useState(0);
return (
<div>
<MyComponent count={count} />
<button onClick={() => setCount(count + 1)}>Увеличить</button>
</div>
);
}
Эти хуки используются для предотвращения повторных вычислений и создания функций при каждом рендере.
import React, { useMemo } from 'react';
function ExpensiveCalculationComponent({ number }) {
const calculatedValue = useMemo(() => {
console.log('Выполняются сложные вычисления...');
return number ** 2;
}, [number]); // Пересчитывается только если `number` изменился
return <div>Результат: {calculatedValue}</div>;
}Пример
useCallbackimport React, { useCallback, useState } from 'react';
const Child = React.memo(({ onClick }) => {
console.log('Рендер дочернего компонента');
return <button onClick={onClick}>Кликни меня</button>;
});
function Parent() {
const [count, setCount] = useState(0);
const handleClick = useCallback(() => {
console.log('Кнопка нажата');
}, []); // Создаётся одна и та же функция между рендерами
return (
<div>
<Child onClick={handleClick} />
<button onClick={() => setCount(count + 1)}>Увеличить {count}</button>
</div>
);
}Использование
React.lazy и Suspense позволяет загружать компоненты только тогда, когда они необходимы.import React, { Suspense } from 'react';
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function App() {
return (
<Suspense fallback={<div>Загрузка...</div>}>
<LazyComponent />
</Suspense>
);
}Избегайте запуска побочных эффектов, если зависимости не изменились.
React.useEffect(() => {
console.log('Эффект сработал!');
}, [/* следите только за нужными зависимостями */]);Передача новых объектов и функций через
props вызывает лишние рендеры.<ChildComponent data={{ key: 'value' }} />Лучше так
const data = { key: 'value' };
<ChildComponent data={data} />;Если компонент слишком сложный, разделите его на более мелкие, чтобы React мог эффективно управлять состоянием и перерисовкой.
Каждый элемент списка должен иметь уникальный ключ, чтобы React мог правильно отслеживать изменения.
{items.map(item => (
<div key={item.id}>{item.name}</div>
))}Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Dependency Injection (DI) — это паттерн, который упрощает управление зависимостями, но у него есть свои сложности и недостатки.
При использовании DI код может стать излишне сложным, особенно если внедрение зависимостей реализуется вручную или через сложные контейнеры.
class Service {
constructor(repository) {
this.repository = repository;
}
}Если DI используется через контейнеры, они могут замедлять выполнение программы, так как:
Создание объектов может занимать больше времени (особенно при ленивой инициализации).
Поиск зависимостей в контейнере тоже требует времени.
В Angular, NestJS и других фреймворках DI может потреблять больше ресурсов, чем обычное создание объектов.
Когда зависимости внедряются автоматически через контейнер, код становится менее очевидным.
@Injectable()
class Service {
constructor(private readonly repository: Repository) {}
}
Хотя DI часто называют удобным для тестирования, на практике могут возникнуть сложности:
Если контейнер создаёт объекты динамически, тесты могут работать нестабильно.
Нужно явно мокать зависимости, что может усложнять настройку тестов.
class Service {
constructor(repository) {
this.repository = repository;
}
}
const service = new Service(new Repository()); // Проблема при тестировании – жестко задана зависимостьЗдесь тестировать
Service сложно, потому что Repository создаётся вручную. Приходится использовать мок-объектыconst mockRepository = { getData: () => "mock data" };
const service = new Service(mockRepository);В маленьких проектах использование DI может быть излишним. Простое создание объектов может быть проще и понятнее, чем настройка DI-контейнера.
const repository = new Repository();
const service = new Service(repository);
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
HTML Embed Code: