Channel: Frontend | Вопросы собесов
Основная причина – ускорение загрузки страницы и избежание блокировки рендеринга.
Когда браузер загружает HTML, он читает код сверху вниз. Если в
<head>
встречается <script>
, браузер останавливает разбор HTML, загружает и выполняет скрипт, а только потом продолжает загружать страницу. Если скрипт загружается в
<head>
, он останавливает отрисовку страницы до завершения загрузки. <head>
<script src="script.js"></script> <!-- ❌ Плохо: блокирует рендеринг -->
</head>
<body>
<h1>Сайт загружается...</h1>
</body>
Если разместить
<script>
перед закрывающим </body>
, сначала загружается контент страницы, а потом выполняется JavaScript. <body>
<h1>Контент загрузился!</h1>
<script src="script.js"></script> <!-- Хорошо: не блокирует рендеринг -->
</body>
defer
– отложенное выполнение после загрузки HTML<head>
<script src="script.js" defer></script>
</head>
async
– загрузка и выполнение параллельно <head>
<script src="script.js" async></script>
</head>
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
При разработке frontend-приложений, которые в будущем будет проще поддерживать и масштабировать, я придерживаюсь ряда ключевых подходов.
Это значит, что код должен быть разделен по зонам ответственности. В frontend-разработке это проявляется в:
Чистом разделении логики, представления и данных (например, с помощью архитектуры MVC, MVVM или FLUX).
Использовании компонентов в React/Vue или шаблонов в Angular.
Разделении CSS, JS и HTML, либо использовании методологий, где стили хранятся рядом с компонентом (CSS Modules, Styled Components).
Вместо того, чтобы писать всю логику и разметку в одном файле:
function App() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}
Я разделяю бизнес-логику и представление
// CounterLogic.js
export function useCounter() {
const [count, setCount] = useState(0);
const increment = () => setCount(count + 1);
return { count, increment };
}
// Counter.js
import { useCounter } from "./CounterLogic";
function Counter() {
const { count, increment } = useCounter();
return <button onClick={increment}>Count: {count}</button>;
}
Frontend-приложения должны строиться из переиспользуемых и изолированных компонентов. Это уменьшает дублирование кода и делает его понятным.
// Button.js (переиспользуемый компонент)
function Button({ onClick, children }) {
return <button onClick={onClick}>{children}</button>;
}
// Counter.js (использует Button)
function Counter() {
const [count, setCount] = useState(0);
return <Button onClick={() => setCount(count + 1)}>Count: {count}</Button>;
}
Код должен быть понятным не только мне, но и другим разработчикам.
Понятные имена переменных и функций. Вместо
x
→ userAge
, вместо doSmth()
→ calculateTotalPrice()
. Меньше вложенности. Вместо кучи
if
и else
, лучше использовать early return
. Разбиение кода на модули. Один файл = одна зона ответственности.
function getDiscountedPrice(price, discount) {
if (discount <= 0) return price;
return price - price * (discount / 100);
}
В зависимости от сложности приложения нужно правильно управлять состоянием:
Локальное состояние –
useState
(React), ref
(Vue) для простых данных внутри компонента. Глобальное состояние – Redux, MobX, Zustand, Pinia, Context API – когда данные нужны многим компонентам.
Серверное состояние – React Query, SWR – когда данные приходят с API и их нужно кешировать.
DRY (Don't Repeat Yourself) – не повторяем код, используем функции, хуки, компоненты.
SOLID – например, принцип единственной ответственности (Single Responsibility Principle) гласит, что каждый компонент или функция должны решать только одну задачу.
function sendEmailAndSaveToDB(user) {
sendEmail(user.email);
saveUserToDatabase(user);
}
Лучше разделить логику
function sendEmail(email) { /* отправка письма */ }
function saveUserToDatabase(user) { /* сохранение в БД */ }
function registerUser(user) {
sendEmail(user.email);
saveUserToDatabase(user);
}
TypeScript помогает избежать ошибок и делать код предсказуемым.
type User = {
id: number;
name: string;
};
function getUserName(user: User): string {
return user.name;
}
ESLint + Prettier → автоформатирование и проверка стиля.
JSDoc/TypeScript → документация функций и типов данных.
Storybook → для документирования UI-компонентов.
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Атрибуты — это то, что записано в HTML.
Свойства — это то, что появляется в JavaScript-объекте
element
. Когда браузер загружает страницу, он парсит HTML и создает DOM-объекты, в которых атрибуты превращаются в свойства. Однако атрибуты и свойства не всегда совпадают!
Хранятся в HTML.
Всегда являются строками.
Их можно получить с помощью
.getAttribute()
и изменить через .setAttribute()
. Они не меняются динамически при изменении свойства элемента в JS.
<input id="myInput" type="text" value="Hello">
const input = document.getElementById("myInput");
console.log(input.getAttribute("value")); // "Hello"
Хранятся в объекте элемента (
HTMLElement
).Имеют разные типы данных (строки, числа, булевые и т. д.).
Меняются динамически при взаимодействии с DOM.
console.log(input.value); // "Hello"
input.value = "New text"; // Меняем свойство
console.log(input.getAttribute("value")); // "Hello" (атрибут НЕ поменялся)
console.log(input.value); // "New text" (свойство изменилось)
Пример с
checked
у чекбокса<input type="checkbox" id="myCheckbox" checked>
const checkbox = document.getElementById("myCheckbox");
console.log(checkbox.getAttribute("checked")); // "checked" (атрибут есть, значит включен)
console.log(checkbox.checked); // true (свойство JS - boolean)
checkbox.checked = false; // Меняем состояние чекбокса
console.log(checkbox.getAttribute("checked")); // "checked" (атрибут не поменялся!)
console.log(checkbox.checked); // false (свойство изменилось)
Если хотите работать с DOM → используйте свойства (
element.value
, element.checked
и т. д.).Если хотите работать с атрибутами в HTML → используйте
.getAttribute()
и .setAttribute()
. const img = document.querySelector("img");
// Меняем атрибут src
img.setAttribute("src", "new-image.jpg");
// Меняем свойство width
img.width = 300;
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Хотя объекты
{}
исторически использовались как ассоциативные массивы (ключ-значение), у 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"
В объекте
{}
порядок ключей не гарантируется (особенно для числовых ключей). 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] (порядок сохраняется!)
Объекты
{}
оптимизированы для хранения структуры данных, но операции delete
и Object.keys(obj).length
могут быть медленными, потому что движок JavaScript выполняет дополнительные проверки.Разница в скорости
В
Map
операции .set()
, .get()
, .delete()
выполняются быстрее.В объекте
{}
delete obj[key]
может работать медленнее, так как JavaScript оптимизирует объекты для других целей.Объект
{}
не имеет встроенных методов для работы с ключами и значениями. Чтобы, например, узнать размер объекта, приходится использовать 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; // Удаление ключа
В объекте
{}
могут быть неожиданные проблемы, если ключ совпадает с именем встроенного метода.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" (никаких багов!)
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
color
– одно из самых базовых CSS-свойств, которое отвечает за цвет текста и текста в элементах (например, градиентных фонах и SVG). p {
color: red;
}
CSS позволяет задавать цвета несколькими способами
Наследование
color
наследуется потомками по умолчанию, в отличие от многих других свойств CSS (например, background
). body {
color: blue;
}
p {
color: inherit; /* Явное наследование */
}
currentColor
— скрытое золотоЭто специальное значение, которое означает "используй текущее значение
color
". Очень полезно для стилизации border
, box-shadow
, outline
и SVG. button {
color: red;
border: 2px solid currentColor; /* Использует color */
}
transparent
— особый цветp {
color: transparent;
}
Когда
rgba()
или hsla()
лучшеp {
color: rgba(255, 0, 0, 0.5); /* Полупрозрачный красный */
}
color
и mix-blend-mode
Можно заставить текст взаимодействовать с фоном с помощью
mix-blend-mode
h1 {
color: white;
mix-blend-mode: difference;
}
color
в ::selection
и ::placeholder
Некоторые элементы (например, выделенный текст или placeholder в input) требуют отдельного указания
color
::selection {
background: blue;
color: white;
}
input::placeholder {
color: gray;
}
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from easyoffer
💡 В EasyOffer 2.0 появится фильтрация вопросов по грейдам и типам интервью!
📊 Например, вот вероятности ТОП-30 вопросов, которые задают на HR-скрининге Python-разработчику уровня Middle/Senior. Данные основаны на 53 реальных интервью.
97% Какие у тебя зарплатные ожидания
73% Какие у тебя есть вопросы
44% Какие критерии при выборе будущей работы
41% Расскажи о себе
38% Почему ищешь работу
35% Расскажи про свой опыт
35% Расскажи про проект на предыдущей работе
32% Почему уволился с предыдущей работы
29% Где территориально сейчас живешь/находишься
23% Есть ли другие предложения по работе
17% Есть ли военный билет
17% Почему хочешь сменить работу
17% Как проводишь свободное время
17% Расскажи про задачи на предыдущей работе
17% Сколько коммерческого опыта работы с Python
17% С какими БД работал
14% Находишься ли в активном поиске работы
14% С каким стеком работаешь
14% Почему решил откликнуться на нашу вакансию
14% Какой текущий статус поиска работы
11% Почему решил стать программистом
11% С какими фреймворками работал
11% Какую зарплату получал на предыдущей работе
11% Работаешь ли в настоящий момент
11% На какой грейд себя оцениваешь
11% Как быстро можешь приступить к работе после получения офера
11% Расскажи про свои pet-проекты
8% Какие знаешь типы данных в Python
8% Что такое декоратор в Python
8% Что ищешь на новой работе
🚀 Скоро стартует краудфандинговая кампания, которая поможет ускорить разработку EasyOffer 2.0.
Первые спонсоры получат уникальные лимитированные награды!
📢 Если вам это интересно, подписывайтесь на канал 👉 этот телеграм канал
📊 Например, вот вероятности ТОП-30 вопросов, которые задают на HR-скрининге Python-разработчику уровня Middle/Senior. Данные основаны на 53 реальных интервью.
97% Какие у тебя зарплатные ожидания
73% Какие у тебя есть вопросы
44% Какие критерии при выборе будущей работы
41% Расскажи о себе
38% Почему ищешь работу
35% Расскажи про свой опыт
35% Расскажи про проект на предыдущей работе
32% Почему уволился с предыдущей работы
29% Где территориально сейчас живешь/находишься
23% Есть ли другие предложения по работе
17% Есть ли военный билет
17% Почему хочешь сменить работу
17% Как проводишь свободное время
17% Расскажи про задачи на предыдущей работе
17% Сколько коммерческого опыта работы с Python
17% С какими БД работал
14% Находишься ли в активном поиске работы
14% С каким стеком работаешь
14% Почему решил откликнуться на нашу вакансию
14% Какой текущий статус поиска работы
11% Почему решил стать программистом
11% С какими фреймворками работал
11% Какую зарплату получал на предыдущей работе
11% Работаешь ли в настоящий момент
11% На какой грейд себя оцениваешь
11% Как быстро можешь приступить к работе после получения офера
11% Расскажи про свои pet-проекты
8% Какие знаешь типы данных в Python
8% Что такое декоратор в Python
8% Что ищешь на новой работе
🚀 Скоро стартует краудфандинговая кампания, которая поможет ускорить разработку EasyOffer 2.0.
Первые спонсоры получат уникальные лимитированные награды!
📢 Если вам это интересно, подписывайтесь на канал 👉 этот телеграм канал
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
В JavaScript можно перемещаться вперед и назад по истории браузера с помощью объекта
window.history
. Эти методы аналогичны кнопкам "Назад" и "Вперед" в браузере.
history.back(); // Перемещение на одну страницу назад
history.forward(); // Перемещение на одну страницу вперед
Пример кнопок "Назад" и "Вперед"
<button onclick="history.back()">⬅️ Назад</button>
<button onclick="history.forward()">Вперед ➡️</button>
Этот метод позволяет перемещаться на определенное количество шагов:
history.go(-1)
– назад на 1 страницу history.go(1)
– вперед на 1 страницу history.go(-2)
– назад на 2 страницы history.go(-2); // Перейти на две страницы назад
history.go(3); // Перейти на три страницы вперед
Если нужно узнать, сколько страниц в истории текущей сессии:
console.log(history.length); // Количество записей в истории
Если нужно изменить URL без перезагрузки страницы, можно использовать:
history.pushState(state, title, url)
Добавляет новый URL в историю (как будто пользователь перешел по ссылке).
history.pushState({ page: 1 }, "Title 1", "/page1");
history.replaceState(state, title, url)
Заменяет текущий URL (не добавляет новую запись в историю).
history.replaceState({ page: 2 }, "Title 2", "/page2");
Пример динамического изменения истории:
document.querySelector("button").addEventListener("click", () => {
history.pushState({ page: "about" }, "About Page", "/about");
});
Когда пользователь нажимает "Назад" или "Вперед", можно реагировать с помощью события
popstate
window.addEventListener("popstate", (event) => {
console.log("Текущий state:", event.state);
});
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Свойство z-index в CSS определяет порядок расположения элементов на оси Z (перекрытие). Элементы с более высоким z-index располагаются поверх элементов с более низким значением. Однако свойство работает только для элементов с установленным position отличным от static.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Делегирование событий (Event Delegation) — это техника, при которой мы не навешиваем обработчик на каждый элемент, а ставим один обработчик на родителя и отслеживаем события его потомков.
Обычный способ (без делегирования)
Если у нас есть 10 кнопок, мы можем повесить обработчик на каждую
document.querySelectorAll("button").forEach((btn) => {
btn.addEventListener("click", () => {
console.log("Кнопка нажата");
});
});
Если кнопок 1000, это создаст 1000 обработчиков, что неэффективно.
Если кнопки добавляются динамически (например, из API), обработчик на новые кнопки не сработает.
Вместо того чтобы вешать обработчик на каждую кнопку, ставим один обработчик на родительский элемент и проверяем, кто вызвал событие:
document.getElementById("container").addEventListener("click", (event) => {
if (event.target.tagName === "BUTTON") {
console.log("Кнопка нажата:", event.target.textContent);
}
});
Если мы добавляем кнопки динамически, обработчик все равно будет работать
document.getElementById("container").addEventListener("click", (event) => {
if (event.target.classList.contains("btn")) {
console.log("Нажата кнопка:", event.target.textContent);
}
});
// Добавляем новую кнопку динамически
setTimeout(() => {
const newButton = document.createElement("button");
newButton.classList.add("btn");
newButton.textContent = "Новая кнопка";
document.getElementById("container").appendChild(newButton);
}, 2000);
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Методы call, apply и bind принадлежат к функциональному объекту
Function
и используются для указания контекста this
при вызове функции. Хотя все три метода позволяют контролировать значение this
внутри функции, между ними существуют ключевые различия в способе использования и поведении.Вызывает функцию, явно устанавливая
this
в первом аргументе. Остальные аргументы передаются в вызываемую функцию как есть.function greet(message, name) {
console.log(${message}, ${name}. This is ${this});
}
greet.call("Earth", "Hello", "Alice"); // "Hello, Alice. This is Earth"
Очень похож на
call
, но принимает аргументы в виде массива, а не по отдельности.function greet(message, name) {
console.log(
${message}, ${name}. This is ${this}
);
}
greet.apply("Earth", ["Hello", "Alice"]); // "Hello, Alice. This is Earth"
Создаёт новую функцию, которая, когда она вызывается, имеет установленный контекст
this
, указанный в первом аргументе. В отличие от call
и apply
, bind
не вызывает функцию сразу, а возвращает новую функцию, которую можно вызвать позже.function greet(message, name) {
console.log(
${message}, ${name}. This is ${this}
);
}
const greetEarth = greet.bind("Earth", "Hello", "Alice");
greetEarth(); // "Hello, Alice. This is Earth"
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
В JavaScript есть три основных способа создания анимаций:
CSS-анимации (
transition
, @keyframes
) + изменение классов через JSМетод
requestAnimationFrame()
Использование библиотек (GSAP, Anime.js, Velocity.js)
Самый простой способ — использовать CSS-анимации, а в JS только добавлять или убирать классы.
<button onclick="toggleBox()">Анимировать</button>
<div id="box"></div>
<style>
#box {
width: 100px;
height: 100px;
background: red;
transition: transform 0.5s ease-in-out;
}
.move {
transform: translateX(200px);
}
</style>
<script>
function toggleBox() {
document.getElementById("box").classList.toggle("move");
}
</script>
Если нужно более гибкое управление анимацией, используем
requestAnimationFrame()
. <button onclick="startAnimation()">Старт</button>
<div id="box"></div>
<style>
#box {
width: 50px;
height: 50px;
background: blue;
position: absolute;
}
</style>
<script>
let position = 0;
let animationId;
function animate() {
position += 5; // Двигаем на 5px за кадр
document.getElementById("box").style.transform = `translateX(${position}px)`;
if (position < 300) { // Останавливаем, когда достигнет 300px
animationId = requestAnimationFrame(animate);
}
}
function startAnimation() {
cancelAnimationFrame(animationId); // Останавливаем предыдущую анимацию
position = 0;
animate();
}
</script>
Если нужно делать мощные анимации с минимальным кодом, лучше использовать библиотеку.
<button onclick="animateBox()">Анимировать</button>
<div id="box"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script>
function animateBox() {
gsap.to("#box", { x: 300, rotation: 360, duration: 2, ease: "elastic.out(1,0.3)" });
}
</script>
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Изучение функционального языка помогает понять ключевые концепции функционального программирования, такие как чистые функции, каррирование, иммутабельность данных и рекурсия. Эти знания полезны для написания эффективного и предсказуемого кода.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
Функция setTimeout используется для выполнения кода или функции спустя заданный интервал времени, однократно. Она является частью Web API в браузерах и глобального объекта
global
в Node.js, что делает её доступной для использования в любом окружении.let timeoutID = setTimeout(function[, delay, arg1, arg2, ...]);
let timeoutID = setTimeout(functionCode[, delay]);
function: Будет вызвана после задержки.
functionCode: Строка кода для выполнения (использование этой формы не рекомендуется по соображениям безопасности).
delay: Задержка в миллисекундах, после которой будет выполнена функция. Если не указать, по умолчанию будет использовано значение 0.
arg1, arg2, ...: Аргументы, которые будут переданы в функцию при её вызове.
function sayHello() {
console.log('Привет!');
}
// Вызывает функцию sayHello после задержки в 2000 миллисекунд (2 секунды)
setTimeout(sayHello, 2000);
setTimeout
Вызов ее возвращает идентификатор таймера, который можно использовать для отмены выполнения с помощью функции
clearTimeout
.let timerId = setTimeout(sayHello, 2000);
// Отменяет выполнение
clearTimeout(timerId);
В HTML5 спецификация предусматривает минимальную задержку в
4ms
для вложенных таймеров и в некоторых других случаях, что может повлиять на ожидаемое время выполнения.Браузеры могут изменять поведение таймеров для неактивных вкладок для оптимизации производительности и энергопотребления. Это может привести к значительно большей задержке, чем указано.
setTimeout
не блокирует выполнение кода, который следует за ним. Он лишь запланирует выполнение функции на будущее, позволяя остальному коду продолжать выполняться без ожидания.Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
HTML Embed Code: