Основная причина – ускорение загрузки страницы и избежание блокировки рендеринга.
Когда браузер загружает 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
👍7
Media is too big
VIEW IN TELEGRAM
На программиста, тестировщика, аналитика, проджекта и другие IT профы.
Есть собесы от ведущих компаний: Сбер, Яндекс, ВТБ, Тинькофф, Озон, Wildberries и т.д.
🎯 Переходи по ссылке и присоединяйся к базе, чтобы прокачать свои шансы на успешное трудоустройство!
Please open Telegram to view this post
VIEW IN TELEGRAM
React.iss.onemo — это HOC (Higher-Order Component), который позволяет избежать лишнего рендера, если пропсы не изменились.
React.iss.onemo сравнивает предыдущие и новые пропсы (shallow comparison) и перерисовывает компонент только при их изменении. Можно передать кастомную функцию сравнения как второй аргумент для тонкой настройки.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥9👍3
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
💊2👍1🔥1
Да, Web Workers — часть HTML5. Это механизм для многопоточности в браузере: выполнение кода в фоновом потоке, без блокировки UI.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7👍2💊1
С появлением React Hooks в версии 16.8 (2019 год) классовые компоненты стали устаревшим способом создания компонентов. Сегодня функциональные компоненты с хуками заменяют классы. Давайте разберем почему.
Функциональные компоненты короче, читаются легче, а код становится чище.
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
increment = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<button onClick={this.increment}>
Счетчик: {this.state.count}
</button>
);
}
}Функциональный компонент (хуки делают код проще)
function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Счетчик: {count}
</button>
);
}В классах жизненный цикл* компонента состоит из нескольких методов (
componentDidMount, componentDidUpdate, componentWillUnmount). class Timer extends React.Component {
constructor(props) {
super(props);
this.state = { time: 0 };
}
componentDidMount() {
this.timer = setInterval(() => {
this.setState({ time: this.state.time + 1 });
}, 1000);
}
componentWillUnmount() {
clearInterval(this.timer);
}
render() {
return <p>Время: {this.state.time} секунд</p>;
}
}Функциональный компонент (хуки делают все проще)
function Timer() {
const [time, setTime] = useState(0);
useEffect(() => {
const timer = setInterval(() => setTime(t => t + 1), 1000);
return () => clearInterval(timer);
}, []);
return <p>Время: {time} секунд</p>;
}Классовые компоненты используют экземпляры классов, а функциональные компоненты – просто функции.
Создают экземпляры
this Обрабатывают
setState Хранят лишние связи и контексты
Не создают
this Используют только нужные данные
Оптимизируются через React.iss.onemo
const Button = React.iss.onemo(({ onClick }) => {
console.log("Ререндер кнопки");
return <button onClick={onClick}>Нажми</button>;
});
function App() {
const [count, setCount] = useState(0);
const increment = useCallback(() => setCount(c => c + 1), []);
return (
<div>
<p>Счетчик: {count}</p>
<Button onClick={increment} />
</div>
);
}Раньше в классах код переиспользовали через HOC и Render Props, но это делало код сложным.
function withLogging(WrappedComponent) {
return class extends React.Component {
componentDidMount() {
console.log("Компонент монтирован");
}
render() {
return <WrappedComponent {...this.props} />;
}
};
}Хуки (
useEffect) делают код чище function useLogger() {
useEffect(() => console.log("Компонент монтирован"), []);
}
function MyComponent() {
useLogger();
return <p>Привет, мир!</p>;
}React официально рекомендует использовать функциональные компоненты
Dan Abramov (разработчик React)
Новые фичи React (Suspense, Server Components) создаются для функциональных компонентов
Классы не работают в React Server Components
Большинство современных библиотек (Redux Toolkit, React Query) рассчитаны на хуки
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7
Это подход, при котором контент страницы отрисовывается по мере загрузки, а не дожидаясь полной загрузки всех ресурсов. Улучшает скорость восприятия и пользовательский опыт.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥8
React.iss.onemo — это функция в React, которая используется для оптимизации производительности функциональных компонентов. Она предотвращает ненужные повторные рендеры, если пропсы компонента не изменились. В React каждый раз, когда родительский компонент обновляется, все его дочерние компоненты тоже ререндерятся, даже если их пропсы остались неизменными. Это может негативно сказаться на производительности, особенно если дочерний компонент выполняет сложные вычисления или рендерит большое количество данных.
React.iss.onemo решает эту проблему, запоминая (мемоизируя) предыдущий результат рендера и сравнивая его с новыми пропсами. Если пропсы не изменились, компонент просто использует закэшированное представление, а не ререндерится. React.iss.onemo — это функция высшего порядка (HOC), которая оборачивает функциональный компонентimport React from "react";
const MyComponent = ({ value }) => {
console.log("Рендер компонента!");
return <div>Значение: {value}</div>;
};
// Оборачиваем компонент в React.iss.onemo
const MemoizedComponent = React.iss.onemo(MyComponent);
export default MemoizedComponent;
React.iss.onemo vs. с React.iss.onemo Допустим, у нас есть родительский компонент, который изменяет состояние при каждом клике
import React, { useState } from "react";
import MemoizedComponent from "./MyComponent";
const Parent = () => {
const [count, setCount] = useState(0);
return (
<div>
<button onClick={() => setCount(count + 1)}>Увеличить</button>
<MemoizedComponent value="Привет, мир!" />
</div>
);
};
export default Parent;Если компонент всегда ререндерится из-за изменения пропсов – смысла в
memo нет. Если компонент рендерится быстро – оптимизация может быть ненужной, а проверка пропсов даже замедлит работу.
Если пропсы часто изменяются – кэширование теряет смысл, так как все равно ререндерится.
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5💊1
- В CSS
- В препроцессорах
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9🔥4
Это структура данных, которая представляет собой упорядоченный список элементов. В JavaScript массивы могут содержать любые типы данных: числа, строки, объекты, другие массивы и даже функции.
Массивы помогают удобно хранить и обрабатывать наборы данных. Вместо того чтобы создавать множество переменных, можно использовать массив, чтобы хранить сразу несколько значений и работать с ними с помощью специальных методов.
Массивы позволяют:
Хранить несколько значений в одной переменной
Перебирать элементы с помощью циклов
Добавлять, удалять, изменять элементы
Выполнять операции, например, сортировку и фильтрацию
В JavaScript массив можно создать разными способами:
С использованием литерала массива
let fruits = ["яблоко", "банан", "апельсин"];
С использованием конструктора
Array let numbers = new Array(1, 2, 3, 4, 5);
Доступ к элементу массива осуществляется по индексу (начинается с 0):
let fruits = ["яблоко", "банан", "апельсин"];
console.log(fruits[0]); // "яблоко"
console.log(fruits[1]); // "банан"
Добавление элемента в конец
push() let arr = [1, 2, 3];
arr.push(4);
console.log(arr); // [1, 2, 3, 4]
Удаление последнего элемента
pop() arr.pop();
console.log(arr); // [1, 2, 3]
Добавление элемента в начало
unshift() arr.unshift(0);
console.log(arr); // [0, 1, 2, 3]
Удаление первого элемента
shift() arr.shift();
console.log(arr); // [1, 2, 3]
Перебор массива
forEach() arr.forEach(item => console.log(item));
Фильтрация элементов
filter() let evenNumbers = arr.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2]
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6
Элемент сдвинется вниз на 5px от своего исходного положения, при этом останется в потоке документа.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8💊3🔥2
SPA (Single Page Application) и классический сайт (MPA – Multi Page Application) — это два разных подхода к созданию веб-приложений. Они отличаются по способу загрузки данных, навигации и производительности.
Каждый раз при переходе на новую страницу браузер запрашивает HTML с сервера. Сервер формирует страницу и отправляет готовый HTML.
<?php
echo "<h1>Добро пожаловать!</h1>";
?>
<a href="/about">О нас</a>
При первом заходе загружается одна HTML-страница и весь JavaScript. Дальше контент подгружается динамически через AJAX или Fetch API.
import React, { useState, useEffect } from "react";
function App() {
const [data, setData] = useState(null);
useEffect(() => {
fetch("/api/products")
.then(res => res.json())
.then(data => setData(data));
}, []);
return <div>{data ? JSON.stringify(data) : "Загрузка..."}</div>;
}
export default App;Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11💊1
Canvas:
- Рисование происходит в пикселях;
- Не интерактивно по умолчанию;
- Быстрее при большом количестве объектов;
- После отрисовки графика теряет «знание» о нарисованном.
SVG:
- Основан на DOM-элементах;
- Каждый элемент доступен и интерактивен;
- Удобен для меньшего числа элементов;
- Можно легко изменять стили и навешивать события.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
💊12
В JavaScript у событий есть специальные модификаторы, которые позволяют изменять поведение события, управлять его распространением, обработкой и связанной с ним логикой.
Этот метод предотвращает всплытие события вверх по дереву DOM.
По умолчанию, события в DOM распространяются по фазам: погружение (capturing) → цель (target) → всплытие (bubbling). Если вы хотите остановить обработку события на текущем элементе и не позволить ему "подняться" выше по дереву DOM, используйте
stopPropagation.<div id="parent" style="padding: 20px; background: lightblue;">
Родительский элемент
<button id="child">Дочерний элемент</button>
</div>
<script>
document.getElementById("parent").addEventListener("click", () => {
alert("Событие всплыло до родителя");
});
document.getElementById("child").addEventListener("click", (event) => {
alert("Событие на кнопке");
event.stopPropagation(); // Остановим всплытие
});
</script>
Этот метод, помимо остановки всплытия (как
stopPropagation), предотвращает выполнение других обработчиков на том же элементе. Если у одного и того же элемента есть несколько обработчиков для одного события, stopImmediatePropagation гарантирует, что после его вызова остальные обработчики не будут выполнены.<button id="myButton">Нажми меня</button>
<script>
const button = document.getElementById("myButton");
button.addEventListener("click", () => {
alert("Обработчик 1");
});
button.addEventListener("click", (event) => {
alert("Обработчик 2");
event.stopImmediatePropagation(); // Остановим все остальные обработчики
});
button.addEventListener("click", () => {
alert("Обработчик 3"); // Этот обработчик не выполнится
});
</script>
Этот метод отменяет поведение элемента по умолчанию.
Некоторые элементы (например, ссылки или формы) имеют стандартное поведение. Например:
- Клик по ссылке ведет на новый URL.
- Отправка формы перезагружает страницу.
С помощью
preventDefault можно предотвратить это поведение.<a href="https://example.com" id="link">Перейти на сайт</a>
<script>
const link = document.getElementById("link");
link.addEventListener("click", (event) => {
event.preventDefault(); // Останавливаем переход по ссылке
alert("Поведение ссылки отменено");
});
</script>
Это модификатор, который не является методом, а используется в настройках обработчика событий. Он указывает, что обработчик не вызывает
preventDefault. Этот модификатор помогает оптимизировать обработку событий, таких как прокрутка (scroll), делая их более производительными. Некоторые браузеры при обработке событий (например, touchstart или wheel) предполагают, что вы можете использовать preventDefault. Это замедляет прокрутку, так как браузеру нужно ждать завершения вашего обработчика. Указав passive: true, вы говорите браузеру, что не собираетесь отменять поведение.window.addEventListener("scroll", () => {
console.log("Скролл работает");
}, { passive: true });Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5💊4
CSS Grid — это двумерная система размещения элементов. Позволяет задавать строки и колонки, управлять размерами, промежутками и позиционированием контента по сетке.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6🔥1