TGViewer
Channel Public Channel
Frontend | Вопросы собесов

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

@easy_javascript_ru

Сайт: https://easyoffer.ru/
Все каналы: t.me/+xGeAw6ckJ4liYzQy

Контакт для рекламы: @easyoffer_adv
Subscribers
17.6K
Photos
39
Videos
2
Links
1.6K

Showing posts older than #2302 · Back to latest

Older Posts 20 shown
Post #2301 2.88K
🤔 В чем отличие атрибутов от свойств в html тегах?

Атрибуты — это то, что записано в HTML.
Свойства — это то, что появляется в JavaScript-объекте element.

Когда браузер загружает страницу, он парсит HTML и создает DOM-объекты, в которых атрибуты превращаются в свойства. Однако атрибуты и свойства не всегда совпадают!

🟠Атрибуты (`attributes`)
Хранятся в HTML.
Всегда являются строками.
Их можно получить с помощью .getAttribute() и изменить через .setAttribute().
Они не меняются динамически при изменении свойства элемента в JS.
<input id="myInput" type="text" value="Hello">

const input = document.getElementById("myInput");
console.log(input.getAttribute("value")); // "Hello"


🟠Свойства (`properties`)
Хранятся в объекте элемента (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;


Ставь 👍 и забирай 📚 Базу знаний
  • 👍 5
Post #2299 2.61K
🤔 Что происходит, когда мы запрашиваем веб-страницу?

1. Ввод URL → преобразование через DNS в IP.
2. Устанавливается соединение с сервером.
3. Отправляется HTTP-запрос.
4. Сервер обрабатывает запрос и возвращает HTML.
5. Браузер начинает разбор, построение DOM, загрузку ресурсов.


Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
  • 👍 20
  • 🔥 3
Post #2298 3.02K
🤔 Что такое git-flow?

Это рабочая модель ветвления, предложенная Винсентом Дриссеном в 2010 году. Эта модель определяет строгий набор правил для создания веток и их слияния, что помогает более организованно управлять процессом разработки, особенно в условиях, когда над проектом работает много людей. Он предназначен для упрощения процесса выпуска новых версий программного обеспечения и обеспечения стабильности кодовой базы.

🚩Основные ветки

🟠master
Содержит стабильную версию кода, готовую к выпуску (release).
🟠develop
Основная ветка для разработки, содержит последние изменения кода для следующего выпуска.

🚩Вспомогательные ветки

🟠feature
Для разработки новых функций. Каждая ветка создается для работы над определенной задачей и в конечном итоге сливается с develop.

🟠release
Предназначенные для подготовки новых выпусков продукта. В них может вестись работа по исправлению ошибок, документации и другим задачам, связанным с выпуском. После завершения подготовки ветка release сливается с master и с develop.

🟠hotfix
Для быстрого исправления ошибок в продакшен-версии. Создаются от ветки master, и после исправления сразу же сливаются обратно в master и develop.

Ставь 👍 и забирай 📚 Базу знаний
  • 👍 13
Post #2297 2.66K
🤔 Как следишь за код-стайлом?

- Использую линтеры: ESLint, Prettier;
- Соблюдаю командные code style гайды;
- Использую автоматические форматтеры в IDE;
- Настраиваю pre-commit хуки (через Husky, lint-staged).


Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
  • 👍 9
Post #2296 3.06K
🤔 Что такое inline стили, и какой они имеют приоритет?

Inline стили — это способ применения CSS-правил непосредственно к HTML-элементу через атрибут style. Этот метод позволяет задать стили индивидуально для конкретного элемента, напрямую внутри его тега, без использования внешних или внутренних стилевых листов.
<p style="color: red; font-size: 20px;">Этот текст будет красного цвета и с размером шрифта 20px.</p>


🚩Приоритетность inline стилей

Они имеют более высокий приоритет, чем стили, заданные через внешние или внутренние стилевые листы. Это означает, что если для одного и того же элемента заданы стили через CSS-классы или идентификаторы и через inline атрибут style, то они будут применены.

🚩Порядок приоритетов CSS

Inline стили (наивысший приоритет)
ID селекторы
Классы, псевдоклассы и атрибуты
Элементы и псевдоэлементы (наименьший приоритет)
Стоит отметить, что существует способ переопределить даже их с помощью правила !important в CSS, однако его использование следует минимизировать, поскольку это может усложнить дальнейшее управление и обслуживание стилей.

Ставь 👍 и забирай 📚 Базу знаний
  • 👍 10
  • 🔥 3
Post #2294 2.53K
🤔 Что значит type="submit"?

Атрибут type="submit" у тега <button> или <input> указывает, что элемент при нажатии должен отправить форму. Он запускает действие, определенное в action формы, и передаёт данные, собранные с полей.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
  • 👍 14
  • 💊 3
Post #2293 2.97K
🤔 В чём преимущество синтаксического сахара в виде async await над promise?

Оба способа позволяют работать с асинхронным кодом в JavaScript, но async/await делает код чище, проще и удобнее.

🟠`async/await` проще читать и писать

Код на Promise.then() часто становится вложенным и запутанным
fetch("https://api.example.com/user")
.then(response => response.json())
.then(user => {
return fetch(`https://api.example.com/orders/${user.id}`);
})
.then(response => response.json())
.then(orders => {
console.log("Заказы:", orders);
})
.catch(error => console.error("Ошибка:", error));


Решение: async/await
async function getUserOrders() {
try {
const response = await fetch("https://api.example.com/user");
const user = await response.json();

const ordersResponse = await fetch(`https://api.example.com/orders/${user.id}`);
const orders = await ordersResponse.json();

console.log("Заказы:", orders);
} catch (error) {
console.error("Ошибка:", error);
}
}

getUserOrders();


async/await лучше обрабатывает ошибки
fetch("https://api.example.com/data")
.then(response => response.json())
.then(data => {
throw new Error("Ошибка в обработке данных");
})
.catch(error => console.error("Ошибка:", error));


async/await + try/catch – мощная обработка ошибок
async function fetchData() {
try {
const response = await fetch("https://api.example.com/data");
if (!response.ok) throw new Error("Ошибка HTTP " + response.status);

const data = await response.json();
console.log(data);
} catch (error) {
console.error("Ошибка:", error);
}
}
fetchData();


async/await удобен в for и try/catch
const urls = ["url1", "url2", "url3"];
urls.forEach(url => {
fetch(url)
.then(response => response.json())
.then(data => console.log(data));
});


async/await в for of
async function fetchAll(urls) {
for (const url of urls) {
const response = await fetch(url);
const data = await response.json();
console.log(data);
}
}
fetchAll(["url1", "url2", "url3"]);


async/await работает с try/finally
async function fetchData() {
try {
console.log("Запрос данных...");
const response = await fetch("https://api.example.com");
const data = await response.json();
console.log("Данные:", data);
} catch (error) {
console.error("Ошибка:", error);
} finally {
console.log("Закрываем соединение...");
}
}
fetchData();


async/await можно использовать внутри Promise.all()
Иногда Promise.all() быстрее, потому что запускает промисы параллельно.
async function fetchMultiple() {
const [user, orders] = await Promise.all([
fetch("https://api.example.com/user").then(res => res.json()),
fetch("https://api.example.com/orders").then(res => res.json())
]);

console.log(user, orders);
}
fetchMultiple();


Ставь 👍 и забирай 📚 Базу знаний
  • 👍 14
  • 🔥 2
  • 💊 1
Post #2289 2.6K
🤔 Что такое flex-flow сокращение?

Свойство flex-flow — это шорткат для двух свойств: flex-direction и flex-wrap. Упрощает запись.


Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
  • 👍 7
  • 🔥 3
Post #2288 3.05K
🤔 Что такое нотация о-большое?

O-большое (Big O) — это способ описания эффективности алгоритма в зависимости от размера входных данных. Она показывает, как быстро растёт время выполнения или использование памяти при увеличении количества входных данных.

🚩Зачем нужна O-большое?

Когда мы пишем код, важно понимать, насколько он эффективен, особенно при работе с большими массивами или сложными вычислениями.
Big O помогает:
- Оценить время работы алгоритма.
- Понять, как алгоритм масштабируется.
- Сравнить разные алгоритмы и выбрать лучший.

🚩Примеры сложности алгоритмов

O(1) – Константное время
function getFirstElement(arr) {
return arr[0]; // Не зависит от размера массива
}


O(N) – Линейное время
function findElement(arr, target) {
for (let i = 0; i < arr.length; i++) {
if (arr[i] === target) return i;
}
return -1;
}


O(N²) – Квадратичное время (плохо)
function bubbleSort(arr) {
for (let i = 0; i < arr.length; i++) {
for (let j = 0; j < arr.length; j++) {
if (arr[i] > arr[j]) {
[arr[i], arr[j]] = [arr[j], arr[i]];
}
}
}
return arr;
}


O(log N) – Логарифмическое время (оптимально)
function binarySearch(arr, target) {
let left = 0, right = arr.length - 1;

while (left <= right) {
let mid = Math.floor((left + right) / 2);

if (arr[mid] === target) return mid;
if (arr[mid] < target) left = mid + 1;
else right = mid - 1;
}

return -1;
}


Ставь 👍 и забирай 📚 Базу знаний
  • 👍 7
Post #2287 2.54K
🤔 Чем отличаются между собой Shadow DOM, Virtual DOM и Regular DOM?

- Shadow DOM — изолированный мини-DOM внутри компонента;
- Virtual DOM — абстрактная копия DOM в памяти (используется React, Vue);
- Regular DOM — основной объект модели документа браузера.


Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
  • 🔥 10
Post #2286 2.74K
🤔 Как достигается изоляция при использовании бэм?

БЭМ (Блок, Элемент, Модификатор) достигает изоляции стилей с помощью уникальных имен классов. Это помогает избежать конфликтов между стилями и делает код более предсказуемым.

🚩Как БЭМ предотвращает конфликты?

🟠Все стили зависят только от конкретного блока
В БЭМ нет зависимостей от родительских элементов, поэтому стили блока не сломаются, если он окажется в другом месте.
<div class="button">Кнопка</div>

.button {
background: blue;
color: white;
}


Плохой пример без БЭМ
.container .button {
background: blue;
}


🟠Элементы (`__`) зависят только от своего блока
Стили элемента никогда не зависят от родителя — только от блока.
<div class="card">
<h2 class="card__title">Заголовок</h2>
<p class="card__text">Текст карточки</p>
</div>

.card__title {
font-size: 20px;
}

.card__text {
color: gray;
}


🟠Модификаторы (`--`) изменяют только нужные стили
Модификаторы позволяют изменять внешний вид без переписывания базовых стилей.
<button class="button button--red">Кнопка</button>
<button class="button button--blue">Кнопка</button>

.button {
padding: 10px;
border-radius: 5px;
}

.button--red {
background: red;
}

.button--blue {
background: blue;
}


🟠Имена классов уникальны, нет глобальных стилей
В БЭМ не используется tag {} или id {} — только классы. Это предотвращает конфликты стилей.
h1 {
color: red;
}


БЭМ-версия
.card__title {
color: red;
}


Ставь 👍 и забирай 📚 Базу знаний
  • 👍 9
Post #2285 2.41K
🤔 Какие семантические группы есть?

В HTML есть теги, которые несут семантическое значение, то есть описывают смысл содержимого, а не просто визуальное оформление.
Примеры групп:
- Структура страницы: <header>, <main>, <footer>, <section>, <article>, <aside>, <nav>
- Контент: <p>, <h1>–<h6>, <blockquote>, <figure>
- Формы и элементы управления: <form>, <input>, <button>, <label>
- Таблицы и списки: <ul>, <ol>, <table>, <thead>, <tbody>
Семантика помогает поисковикам, скринридерам и поддерживает доступность.


Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
  • 🔥 11
  • 👍 2
Post #2284 2.53K
🤔 В чем отличие атрибутов от свойств в html тегах?

Атрибуты — это то, что записано в HTML.
Свойства — это то, что появляется в JavaScript-объекте element.

Когда браузер загружает страницу, он парсит HTML и создает DOM-объекты, в которых атрибуты превращаются в свойства. Однако атрибуты и свойства не всегда совпадают!

🟠Атрибуты (`attributes`)
Хранятся в HTML.
Всегда являются строками.
Их можно получить с помощью .getAttribute() и изменить через .setAttribute().
Они не меняются динамически при изменении свойства элемента в JS.
<input id="myInput" type="text" value="Hello">

const input = document.getElementById("myInput");
console.log(input.getAttribute("value")); // "Hello"


🟠Свойства (`properties`)
Хранятся в объекте элемента (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;


Ставь 👍 и забирай 📚 Базу знаний
  • 👍 11
Post #2283 2.44K
🤔 Как работает передача по ссылке и по значению?

- По значению: копируется само значение (например, примитивы). Изменение копии не влияет на оригинал.
- По ссылке: копируется ссылка на объект в памяти. Изменения влияют на оригинал, т.к. оба указывают на одну область памяти.


Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
  • 👍 8
  • 🔥 2
  • 💊 1
Post #2282 2.71K
🤔 Что такое usecontext?

Это один из встроенных хуков, который позволяет компонентам подписываться на контекст и получать доступ к данным контекста. Используется для передачи данных через дерево компонентов без необходимости передавать пропсы на каждом уровне. Это особенно полезно для глобальных данных, таких как текущий авторизованный пользователь, тема (светлая/темная) или настройки локализации.

🚩Как он работает

🟠Создание контекста
Для создания контекста используется функция createContext. Она возвращает объект контекста, который содержит два компонента: Provider и Consumer.
      import React, { createContext, useState } from 'react';

const MyContext = createContext();


🟠Provider
Компонент Provider используется для предоставления значения контекста всем дочерним компонентам. Все компоненты внутри Provider могут получить доступ к значениям, переданным в value.
      const MyProvider = ({ children }) => {
const [state, setState] = useState('Hello World');

return (
<MyContext.Provider value={{ state, setState }}>
{children}
</MyContext.Provider>
);
};


🟠useContext
Используется для подписки на контекст в функциональных компонентах. Он принимает объект контекста, возвращаемый из createContext, и возвращает текущее значение контекста.
      import React, { useContext } from 'react';

const MyComponent = () => {
const { state, setState } = useContext(MyContext);

return (
<div>
<p>{state}</p>
<button onClick={() => setState('New Value')}>Change Value</button>
</div>
);
};


Полный пример
import React, { createContext, useState, useContext } from 'react';

// Создание контекста
const MyContext = createContext();

const MyProvider = ({ children }) => {
const [state, setState] = useState('Hello World');

return (
<MyContext.Provider value={{ state, setState }}>
{children}
</MyContext.Provider>
);
};

const MyComponent = () => {
const { state, setState } = useContext(MyContext);

return (
<div>
<p>{state}</p>
<button onClick={() => setState('New Value')}>Change Value</button>
</div>
);
};

const App = () => (
<MyProvider>
<MyComponent />
</MyProvider>
);

export default App;


Ставь 👍 и забирай 📚 Базу знаний
  • 👍 13
Post #2281 2.39K
🤔 Назови паттерны, которые относятся к порождающим.

- Singleton — единственный экземпляр;
- Factory Method — создание объектов через метод;
- Abstract Factory — фабрика для семейства объектов;
- Builder — пошаговое создание объекта;
- Prototype — копирование существующего объекта.


Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
  • 🔥 7
  • 👍 3
Post #2280 2.46K
🤔 Когда брать абсолютные величины а когда относительные?

Выбор между абсолютными и относительными единицами измерения зависит от контекста использования и целей, которые вы преследуете. Рассмотрим подробнее, когда и почему стоит использовать те или иные единицы.

🚩Абсолютные величины (например, px, pt, cm, in)

Имеют фиксированные размеры и не зависят от других элементов или размеров экрана. Они всегда остаются одинаковыми, независимо от контекста.

🚩Когда использовать

1⃣Пиксели (`px`)
Точные размеры: Когда вам нужно задать точные размеры элементов, например, для пиксельной точности в дизайне.
Фиксированные элементы: Для элементов, размеры которых не должны изменяться в зависимости от экрана или родительского элемента (например, логотипы или иконки).
Маленькие декоративные элементы: Когда размеры элементов настолько малы, что относительные единицы могут привести к неконтролируемому результату.
.logo {
width: 100px;
height: 50px;
}


🚩Относительные величины (например, %, em, rem, vw, vh)

Изменяются в зависимости от других элементов или размеров экрана. Они позволяют создавать более гибкие и адаптивные макеты.

🟠Проценты (`%`)
Адаптивные макеты: Когда нужно, чтобы элемент занимал определенный процент от размера родительского элемента.
Контейнеры и блоки: Для ширины и высоты блоков, которые должны изменяться вместе с размерами родителя.
.container {
width: 80%;
height: 50%;
}


🟠Эм (`em`)
Шрифты: Когда нужно задавать размер шрифта относительно размера шрифта родителя.
Внутренние отступы и поля: Для создания элементов, которые масштабируются вместе с текстом.
.text {
font-size: 1.2em;
margin: 1em;
}


🟠Рем (`rem`):
Глобальная консистентность: Когда нужно задавать размер относительно корневого элемента (обычно <html>), что обеспечивает более предсказуемое масштабирование.
Шрифты и отступы: Для элементов, которые должны быть пропорциональны базовому размеру шрифта
body {
font-size: 16px;
}

.header {
font-size: 2rem; /* 32px */
margin: 1rem; /* 16px */
}


🟠Вьюпорт (`vw`, `vh`):
Адаптивные размеры: Когда размеры элементов должны быть пропорциональны размеру вьюпорта (окна браузера).
Фоновые изображения и видео: Для элементов, которые должны занимать определенный процент от экрана.
.hero {
width: 100vw;
height: 100vh;
}


🚩Комбинированное использование

Иногда можно комбинировать абсолютные и относительные единицы для достижения наилучшего результата.
.container {
width: 80%; /* Относительная ширина */
padding: 20px; /* Абсолютный внутренний отступ */
}

.text {
font-size: 1.5rem; /* Относительный размер шрифта */
margin: 2em; /* Относительный внешний отступ */
}


Ставь 👍 и забирай 📚 Базу знаний
  • 👍 7
Post #2279 2.19K
🤔 Что делает box-sizing: border-box?

Изменяет модель расчёта размеров элемента:
1. Ширина и высота включают содержимое, padding и border.
2. Это упрощает управление размерами, так как итоговый размер элемента остаётся фиксированным.
Без border-box (по умолчанию content-box), padding и border увеличивают размеры элемента, что усложняет расчёты.


Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
  • 👍 9
  • 🔥 5
Post #2277 2.52K
🤔 Какие есть альтернативы ssr?

В современном веб-разработке существует несколько подходов к рендерингу веб-страниц, и помимо SSR (Server-Side Rendering), есть альтернативы, каждая из которых имеет свои особенности, преимущества и недостатки.

🚩CSR (Client-Side Rendering)

Вся логика рендеринга страницы осуществляется на стороне клиента (браузера) с помощью JavaScript. Сервер отправляет минимальный HTML (обычно пустой <div> с ID), а приложение загружается, рендерится и управляется на стороне клиента. Сервер отправляет статический HTML (например, через index.html), а JavaScript (чаще всего — библиотека/фреймворк, например React, Vue или Angular) загружает необходимые данные и динамически создает интерфейс.
<div id="app"></div>
<script src="bundle.js"></script>


🚩Плюсы

➕Быстрая работа после загрузки
Приложение становится очень интерактивным после инициализации.
➕Меньшая нагрузка на сервер
Основная работа выполняется на клиентской стороне.
➕Гибкость и модульность
Легко добавлять сложные интерактивные компоненты.

🚩Минусы

➖Медленная первая загрузка (Time to First Byte, TTFB)
Пользователь видит пустую страницу, пока загружается JavaScript и данные.
➕Проблемы с SEO
Поисковым системам сложнее индексировать страницы, так как контент рендерится только в браузере.
➖Требования к устройствам
Больше ресурсов требуется на стороне клиента.

🚩SSG (Static Site Generation)

Сайт полностью генерируется на этапе сборки (build time) и сервер отдает готовые HTML-страницы. Это популярный подход в JAMstack-приложениях (JavaScript, APIs, Markup). HTML генерируется один раз (обычно через фреймворк вроде Next.js, Gatsby, Nuxt.js) во время сборки. Сайт раздается пользователям как готовый статический контент.
npm run build


🚩Плюсы и минусы

➕Молниеносная загрузка
HTML статичен и отдается сервером без обработки.
➕SEO-дружелюбность
Поисковые системы могут легко индексировать готовый HTML.
➕Уменьшение нагрузки на сервер
Все вычисления выполняются заранее (во время сборки).
➖Ограничения при частых обновлениях контента
Для обновления нужно заново пересобирать сайт, что может занимать много времени.
➖Не подходит для динамических данных
Если страница сильно зависит от данных пользователя или часто меняется, SSG становится менее удобным.

🚩ISR (Incremental Static Regeneration)

Это гибрид между SSG и SSR. Вы создаете статический контент во время сборки, но некоторые страницы могут обновляться динамически при запросе, а сервер сохраняет их для следующих пользователей. Фреймворк (например, Next.js) генерирует страницы на этапе сборки, но для определенных страниц вы можете указать интервал обновления (revalidate). После этого сервер пересоберет страницу и кэширует ее.
export async function getStaticProps() {
return {
props: {
data: fetchData(),
},
revalidate: 60, // Обновлять страницу каждые 60 секунд
};
}


🚩Плюсы и минусы

➕Лучшая производительность
Страницы отдаются как статические, но обновляются при необходимости.
➕Гибкость
Удобно для контента, который редко обновляется.
➕SEO
Поисковики видят статические страницы.
➖Сложнее настроить
Нужно управлять кэшированием и интервалами обновления.
➖Не подходит для полностью динамических страниц
Если обновления контента слишком частые, ISR может не подойти.

🚩DPR (Dynamic Rendering / Hybrid Rendering)

Это подход, при котором разные версии страницы рендерятся для разных пользователей. Например, для пользователей с обычными браузерами вы используете CSR, а для поисковых ботов — SSR. Запросы от поисковых ботов обрабатываются сервером, который генерирует готовый HTML. Запросы от обычных пользователей обрабатываются через CSR. Этот подход используется с инструментами, такими как Prerender.io или встроенными решениями фреймворков.

🚩Плюсы и минусы

➕Оптимально для SEO
Боты получают готовый HTML.
➕Гибкость
Пользователи получают интерактивные страницы через CSR.
➖Усложнение архитектуры
Нужно отслеживать запросы и разделять их.
➖Задержки для ботов
Генерация страницы на сервере может занять время.

Ставь 👍 и забирай 📚 Базу знаний
  • 👍 6
  • 🔥 2
Post #2276 2.34K
🤔 Что известно про сложность алгоритмов?

Сложность алгоритма описывает, насколько быстро растёт время или память, необходимая для выполнения задачи при увеличении объёма данных. Обозначается как Big O:
- O(1) — константная;
- O(log n) — логарифмическая;
- O(n) — линейная;
- O(n²) — квадратичная и т.д.
Используется для анализа эффективности кода и оптимизации.


Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
  • 👍 16
  • 🔥 3
  • 💊 1
Older posts →
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →