Когда пользователь вводит URL в адресную строку браузера и нажимает Enter, происходит ряд шагов для получения и отображения запрашиваемой веб-страницы. Этот процесс включает взаимодействие различных компонентов сети и веб-технологий.
Пользователь вводит URL в адресную строку браузера.
Браузер проверяет кэш браузера для определения, есть ли сохраненная копия запрашиваемого ресурса. Если ресурс найден в кэше и он актуален, страница загружается из кэша, минуя сетевые запросы.
Если ресурс не найден в кэше, браузер выполняет запрос к DNS-серверу для преобразования доменного имени (например, www.example.com) в IP-адрес сервера.
После получения IP-адреса браузер устанавливает TCP-соединение с сервером. Этот процесс включает в себя трехэтапное рукопожатие:
Браузер отправляет SYN-пакет серверу.
Сервер отвечает SYN-ACK пакетом.
Браузер отправляет ACK-пакет, подтверждая установление соединения.
Если URL использует HTTPS, происходит дополнительный этап установки защищенного соединения с использованием SSL/TLS:
Браузер и сервер обмениваются сертификатами и выполняют шифрование данных.
Браузер отправляет HTTP-запрос на сервер. Например, для получения главной страницы сайта может быть отправлен следующий запрос:
GET / HTTP/1.1
Host: www.example.com
Сервер принимает запрос, обрабатывает его, генерирует ответ и отправляет его обратно клиенту. Сервер может выполнять различные задачи, такие как доступ к базе данных, обработка логики приложения и рендеринг страниц.
Браузер получает HTTP-ответ от сервера. Ответ включает в себя статусный код, заголовки и тело (содержимое) ответа. Пример HTTP-ответа:
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1234
<!DOCTYPE html>
<html>
<head>
<title>Пример страницы</title>
</head>
<body>
<h1>Добро пожаловать!</h1>
</body>
</html>
Браузер начинает парсинг HTML-документа. Этот процесс включает построение DOM (Document Object Model) — структуры дерева, представляющей элементы страницы.
В процессе парсинга HTML браузер может обнаруживать ссылки на другие ресурсы, такие как CSS, JavaScript, изображения и шрифты, и отправлять дополнительные HTTP-запросы для их загрузки.
После парсинга HTML и CSS браузер начинает выполнение встроенных и внешних JavaScript-скриптов. JavaScript может изменять DOM и CSSOM (CSS Object Model), что приводит к изменениям в отображении страницы.
JavaScript также может отправлять асинхронные запросы (AJAX) для динамической загрузки данных и обновления страницы без перезагрузки.
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍21🔥3💊2
Чтобы избежать лишнего рендера и повысить производительность:
- Использовать React.iss.onemo() — мемоизация компонента на основе пропсов.
- Применять useMemo() — мемоизация вычисляемых значений.
- Использовать useCallback() — мемоизация колбэков, чтобы не пересоздавать функции.
- Разбивать большие компоненты на мелкие.
- Следить за key в списках (в map), чтобы избежать полного пересоздания.
- Избегать анонимных функций в render, если они передаются в потомки.
- Использовать shouldComponentUpdate в классовых компонентах или React.PureComponent.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥12👍4
Чтобы удалить все элементы из массива в JavaScript, можно использовать несколько способов, в зависимости от ваших целей.
JavaScript позволяет вручную изменять длину массива. Если установить длину массива равной 0, все его элементы будут удалены.
let arr = [1, 2, 3, 4, 5];
arr.length = 0;
console.log(arr); // []
Можно просто присвоить переменной новый пустой массив.
let arr = [1, 2, 3, 4, 5];
arr = [];
console.log(arr); // []
Пример
let arr = [1, 2, 3, 4, 5];
let reference = arr;
arr = [];
console.log(arr); // []
console.log(reference); // [1, 2, 3, 4, 5]
Метод
splice позволяет удалять элементы из массива. Если указать удаление всех элементов, массив станет пустым.let arr = [1, 2, 3, 4, 5];
arr.splice(0, arr.length);
console.log(arr); // []
Хотя это не самый эффективный способ, можно очистить массив с помощью цикла.
let arr = [1, 2, 3, 4, 5];
while (arr.length > 0) {
arr.pop(); // Удаляем последний элемент
}
console.log(arr); // []
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13
- true → 1
- false → 0
Это часто используется при приведении типов, в логике, арифметике или при передаче булевых значений в числовой контекст.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍15🔥1
В Vue 2 и Vue 3 можно подключать миксины (
mixins), которые добавляют в компонент дополнительные методы, данные и хуки жизненного цикла. Миксин (
myMixin.js)export default {
created() {
console.log("🌍 Миксин: created");
}
};Компонент (
MyComponent.vue)<script>
import myMixin from "./myMixin.js";
export default {
mixins: [myMixin],
created() {
console.log("📦 Компонент: created");
}
};
</script>
Вывод в консоль при создании компонента
Миксин: created
Компонент: created
Vue 3: хуки вызываются так же
Если использовать
setup(), он выполнится после хуков миксина import { onMounted } from "vue";
export default {
mixins: [myMixin],
setup() {
console.log("🚀 setup()");
},
mounted() {
console.log("📦 Компонент: mounted");
}
};Вывод в консоль
Миксин: mounted
setup()
Компонент: mounted
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
💊6🤔4
float — CSS-свойство, которое позволяет обтекать элемент другими элементами (чаще всего — текстом). Использовался для верстки до появления flex и grid. Сейчас float чаще применяется для обтекания картинок.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10🔥5💊1
Вес селектора (специфичность) – это правило, по которому браузер определяет, какой стиль применить, если есть несколько конфликтующих селекторов.
( 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; } /* Всегда будет красным */Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8🔥4
CSS-спрайты – это метод объединения нескольких изображений в один файл для оптимизации загрузки и отображения на веб-странице.
Уменьшают количество HTTP-запросов → вместо 10 изображений браузер загружает 1 файл
Ускоряют загрузку сайта → меньше сетевой нагрузки
Кэшируются в браузере → реже загружаются заново
Допустим, у нас есть 3 иконки:
icon-home.png icon-user.png icon-settings.png Мы объединяем их в один файл (
sprite.png): ![sprite]
Теперь нам нужно показать нужную часть изображения с помощью
background-position. .sprite {
background: url("sprite.png") no-repeat;
display: inline-block;
width: 32px;
height: 32px;
}
/* Позиции каждой иконки */
.icon-home { background-position: 0 0; } /* Первая иконка */
.icon-user { background-position: -32px 0; } /* Вторая иконка */
.icon-settings { background-position: -64px 0; } /* Третья иконка */Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13💊4🤔1
Статус кода зависит от результата обработки запроса. Если запрос успешен — это обычно код 200. Если создан новый ресурс — 201. При ошибках клиентской стороны — 4xx, а при сбоях на сервере — 5xx. Точный код подбирается в зависимости от логики работы API и ситуации.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11💊7🔥2
Миксины в препроцессорах CSS, таких как Sass, LESS и Stylus, представляют собой переиспользуемые блоки кода, которые можно вставлять в другие блоки стилей. Они позволяют группировать наборы стилей, которые можно повторно использовать по всему CSS-файлу. Это помогает уменьшить дублирование кода и упростить его поддержку.
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
} .box {
@include border-radius(10px);
}
.button {
@include border-radius(5px);
} .border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}.box {
.border-radius(10px);
}
.button {
.border-radius(5px);
}border-radius(radius)
-webkit-border-radius: radius
-moz-border-radius: radius
border-radius: radius
.box
border-radius(10px)
.button
border-radius(5px
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11
JavaScript использует прототипное наследование: объекты наследуют свойства и методы от других объектов через цепочку прототипов. Современный синтаксис class является синтаксическим сахаром над этой моделью.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10🔥5
Это инструмент для создания, развертывания и управления контейнерами. Контейнер – это изолированная среда, которая содержит всё необходимое для работы приложения: код, зависимости, библиотеки, конфигурации.
В разных средах могут быть разные версии зависимостей (Node.js, Python, базы данных). С Docker всё упаковано в контейнер, и приложение работает одинаково на любом сервере.
Без Docker развертывание – это настройка сервера, установка зависимостей, конфигурация окружения. С Docker – просто запускаем контейнер.
Docker-контейнеры можно клонировать и запускать на разных серверах (например, в Kubernetes).
Каждое приложение работает в изолированной среде, и конфликты библиотек исключены.
Контейнер можно запустить где угодно, где установлен Docker.
Пример для Node.js-приложения
# Базовый образ с Node.js
FROM node:18
# Устанавливаем рабочую директорию
WORKDIR /app
# Копируем файлы проекта
COPY package.json ./
RUN npm install
COPY . .
# Запускаем приложение
CMD ["node", "server.js"]
Собираем образ Docker (создаем "упакованный" контейнер)
docker build -t my-app .
Запускаем контейнер
docker run -p 3000:3000 my-app
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍19
setInterval — это встроенный метод JavaScript, который повторяет выполнение функции через определённые интервалы времени.
- Первый запуск происходит после задержки.
- Работает до тех пор, пока не будет явно остановлен через clearInterval.
- Используется для периодических операций: таймеров, анимаций, опроса сервера и т.д.
Важно: если выполнение функции занимает дольше, чем интервал, может начаться накопление вызовов.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍16🔥1
В JavaScript, чтобы уничтожить объект
Web Worker, необходимо использовать метод terminate(). Этот метод останавливает выполнение worker'а, освобождает связанные с ним ресурсы и завершает его работу. После вызова terminate() объект worker больше не может быть использован.Web Worker позволяет выполнять тяжелые операции в фоновом потоке, не блокируя основной поток (UI-поток). Однако, если worker больше не нужен, он продолжает существовать и занимает ресурсы (память, процессорное время). Чтобы избежать утечек памяти и оптимизировать работу приложения, важно уничтожать worker, когда он больше не используется.
Вы вызываете метод
terminate() на экземпляре объекта worker. Это мгновенно останавливает выполнение фонового скрипта.// Создаем worker
const myWorker = new Worker('worker.js');
// Выполняем какие-то операции через worker
myWorker.postMessage('Hello, worker!');
// Завершаем работу worker, когда он больше не нужен
myWorker.terminate();
terminate() worker полностью уничтожается и больше не может отправлять или получать сообщения.onmessage), они автоматически удаляются.terminate() не приведет к ошибке, но никакие операции через него больше работать не будут.const worker = new Worker('worker.js');
// Отправляем сообщение
worker.postMessage('Start working');
// Завершаем работу worker
worker.terminate();
// Попытка отправить сообщение после уничтожения worker
worker.postMessage('Will this work?'); // Ничего не произойдет, worker уже завершенЕсли вы перезагружаете страницу или закрываете вкладку, все web worker автоматически уничтожаются браузером. Однако в рамках текущей сессии ответственность за уничтожение лежит на разработчике.
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11
KISS (Keep It Simple, Stupid) — делай просто. Не усложняй архитектуру и код без необходимости.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍26🔥15
Существует несколько основных типов данных, которые можно разделить на две категории: примитивные типы и объекты.
представляет как целые числа, так и числа с плавающей точкой. Например,
42 или 3.14.представляет текстовые данные. Строки неизменяемы. Пример:
"Привет, мир!".имеет два значения,
true и false, и используется для работы с логическими операциями.переменная имеет тип
undefined, если она была объявлена, но ей не было присвоено никакого значения.специальное значение, которое представляет собой "ничего" или "пустое значение". Важно отметить, что
null является объектом из-за ошибки в ранних версиях JavaScript.уникальное и неизменяемое значение, используемое как ключ для свойств объекта. Создают уникальные идентификаторы в объектах.
тип данных, позволяющий работать с целыми числами произвольной точности. Введен для представления чисел, которые больше, чем максимальное значение, которое может представить тип
Number.могут содержать наборы пар ключ-значение, где ключи - строки или символы, а значения — любой тип данных. Используются для представления коллекций данных, сложных структур или для создания пользовательских типов данных с помощью классов и прототипов.
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍20💊2
Чтобы сделать код быстрее, легче, безопаснее и надёжнее. Оптимизация уменьшает нагрузку на сервер, улучшает UX, снижает энергопотребление, ускоряет загрузку и делает систему масштабируемой и устойчивой.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11🔥6💊1
Макро- и микро-задачи являются частью механизма асинхронного программирования и внутренней модели выполнения, которые помогают управлять порядком выполнения асинхронных операций. Эти понятия связаны с циклом событий (event loop) и очередью задач. Давайте разберемся, что они собой представляют и как работают.
Это задачи, которые запланированы для выполнения сразу после текущего выполненного скрипта, но до того, как event loop продолжит обрабатывать следующую макро-задачу.
then, catch, finallyqueueMicrotask()Это задачи, которые обрабатываются event loop, каждая макро-задача извлекается из очереди и выполняется до конца, прежде чем event loop перейдет к следующей макро-задаче.
setTimeoutsetIntervalsetImmediate (Node.js)I/O операции
Интерактивные действия, такие как клики мыши и нажатия клавиш
Основное различие между макро- и микро-задачами заключается в их приоритете выполнения:
После каждой макро-задачи, перед тем как переходить к следующей макро-задаче, event loop обрабатывает все микро-задачи в очереди микро-задач. Это означает, что микро-задачи выполняются чаще и имеют более высокий приоритет по сравнению с макро-задачами. Если во время выполнения микро-задач добавляются новые микро-задачи, они также будут выполнены в текущем цикле, перед переходом к следующей макро-задаче. Это может привести к "голоданию" макро-задач, если микро-задачи постоянно добавляются.
setTimeout(() => console.log('Макро-задача 1'), 0);
Promise.resolve().then(() => console.log('Микро-задача 1'));
setTimeout(() => console.log('Макро-задача 2'), 0);
Promise.resolve().then(() => console.log('Микро-задача 2'));Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍15💊3
Область видимости — это контекст, в котором доступна переменная. В JavaScript есть глобальная, функциональная и блочная области видимости. Она определяет, где можно использовать переменную или функцию.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍21🔥3💊1