🤔 Какие есть альтернативы SSR?

- SPA + пререндеринг (Scully, React Static, Nuxt generate) — хорош для статического контента.
- JAMStack + CDN — готовая сборка без сервера.
- Edge rendering — через CDN-функции (например, Cloudflare Workers).
- Hybrid rendering (ISR/SSG) — как в Next.js, где часть страниц SSR, часть — SSG.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Основные причины отказа от классовых компонентов в react?

С появлением 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>
  );
}

🟠Легче управлять жизненным циклом (useEffect vs componentDidMount)
В классах жизненный цикл* компонента состоит из нескольких методов (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.memo

const Button = React.memo(({ 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>
  );
}

🟠Легче переиспользовать логику (React Hooks vs HOC/Render Props)
Раньше в классах код переиспользовали через 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
React официально рекомендует использовать функциональные компоненты
Dan Abramov (разработчик React)
Новые фичи React (Suspense, Server Components) создаются для функциональных компонентов
Классы не работают в React Server Components
Большинство современных библиотек (Redux Toolkit, React Query) рассчитаны на хуки

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что известно про MobX?

MobX — библиотека управления состоянием, основанная на принципе реактивности. Изменения автоматически распространяются на подписчиков. Использует observable, computed, reaction, и autorun. Подходит для UI-приложений, где важна автоматическая синхронизация.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Какие есть альтернативы 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.
➖Усложнение архитектуры
Нужно отслеживать запросы и разделять их.
➖Задержки для ботов
Генерация страницы на сервере может занять время.

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое константа?

Константа — это переменная, значение которой нельзя изменить после инициализации. В JavaScript, const не позволяет переназначить ссылку, но если это объект — его внутренности могут изменяться.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Для чего скрипт подключают в концe body?

Основная причина – ускорение загрузки страницы и избежание блокировки рендеринга.

Когда браузер загружает HTML, он читает код сверху вниз. Если в <head> встречается <script>, браузер останавливает разбор HTML, загружает и выполняет скрипт, а только потом продолжает загружать страницу.

🟠Проблема: блокировка рендеринга
Если скрипт загружается в <head>, он останавливает отрисовку страницы до завершения загрузки.

<head>
  <script src="script.js"></script> <!-- ❌ Плохо: блокирует рендеринг -->
</head>
<body>
  <h1>Сайт загружается...</h1>
</body>

🟠Решение: подключение в конце `<body>`
Если разместить <script> перед закрывающим </body>, сначала загружается контент страницы, а потом выполняется JavaScript.

<body>
  <h1>Контент загрузился!</h1>
  <script src="script.js"></script> <!-- Хорошо: не блокирует рендеринг -->
</body>

🟠Альтернативы: `defer` и `async`
defer – отложенное выполнение после загрузки HTML

<head>
  <script src="script.js" defer></script>
</head>

async – загрузка и выполнение параллельно

<head>
  <script src="script.js" async></script>
</head>

Ставь 👍 и забирай 📚 Базу знаний

🤔 В каком случае нужно SPA?

SPA (Single Page Application) нужен, когда:
- требуется динамичный интерфейс без перезагрузки страницы;
- важен быстрый отклик UI;
- есть много интерактивных действий на клиенте;
- приложение похоже на десктопное по поведению (например, админки, CRM, почта).
Не нужен — для SEO-критичных лендингов и новостных сайтов.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Что такое псевдоэлемент?

Это специальный синтаксис, позволяющий стилизовать определенные части элемента или добавлять специальные элементы (как бы "элементы-призраки"), не создавая для этого дополнительные теги в HTML. Псевдоэлементы предоставляют удобный способ внесения изменений в структуру документа, не затрагивая HTML.

🚩Синтаксис

Начинается с двойного двоеточия (::), за которым следует название псевдоэлемента. Например, ::before или ::after.

🟠Распространенные псевдоэлементы
::before и ::after: Позволяют вставлять содержимое до или после содержимого выбранного элемента соответственно. Очень часто используются для добавления декоративных элементов.

    p::before {
    content: "«";
    color: blue;
  }
  
  p::after {
    content: "»";
    color: blue;
  }
  

::first-line: Применяет стили к первой строке текста в блочном элементе.

    p::first-line {
    font-weight: bold;
  }
  

::first-letter: Применяет стили к первой букве текста в блочном элементе.

    p::first-letter {
    font-size: 200%;
  }
  

::selection: Применяет стили к части текста, которую пользователь выделил.

    p::selection {
    background: yellow;
  }
  

🚩Особенности работы

Работают как часть документа, но на самом деле не существуют в DOM-дереве, а создаются стилями.
Чтобы псевдоэлементы ::before и ::after отображались, необходимо задать свойство content, даже если оно пустое (content: "";).
Могут быть стилизованы почти так же, как обычные элементы, но есть некоторые ограничения, например, связанные с взаимодействием с JavaScript.

Ставь 👍 и забирай 📚 Базу знаний

🤔 В чём плюсы SSR (Server-Side Rendering)?

- Быстрая первая загрузка (особенно на слабых устройствах);
- Лучшая индексация поисковыми системами (SEO);
- Меньше JavaScript-обработки на клиенте;
- Возможность передавать готовый HTML до загрузки JS, что делает сайт доступным быстрее.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Зачем нужен nginx?

Nginx — это мощный веб-сервер, который используется для раздачи статических файлов, балансировки нагрузки, проксирования запросов и обеспечения безопасности.

🟠Как 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;
    }
}

🟠Как Nginx проксирует запросы к бэкенду?
Если фронтенд (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 балансирует нагрузку?
Если у нас несколько бэкенд-серверов, Nginx может распределять нагрузку между ними.

upstream backend {
    server backend1.myapp.com;
    server backend2.myapp.com;
}

server {
    listen 80;
    server_name api.myapp.com;

    location / {
        proxy_pass http://backend;
    }
}

🟠Как Nginx ускоряет сайт с кэшем?
Кэширование уменьшает нагрузку на сервер и ускоряет загрузку страниц.

location /static/ {
    expires 7d; # Кэшировать файлы на 7 дней
    add_header Cache-Control "public, max-age=604800";
}

Ставь 👍 и забирай 📚 Базу знаний

🤔 Расскажи про event loop?

Event loop — это механизм в JavaScript, который позволяет асинхронное выполнение кода, несмотря на то что JavaScript — однопоточный язык. Он управляет порядком выполнения задач, отложенных вызовов и операций ввода-вывода, позволяя неблокирующую работу. Принцип работы event loop заключается в циклическом извлечении задач из очереди и их выполнении, пока очередь не опустеет. Так, даже операции, требующие значительного времени, не останавливают работу страницы, позволяя интерфейсу оставаться отзывчивым.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Что выбираешь ооп или функции?

Выбор между объектно-ориентированным программированием (ООП) и функциональным программированием (ФП) зависит от задачи, которую нужно решить. Оба подхода имеют свои плюсы и минусы.

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

Объектно-ориентированное программирование подходит, когда:
Нужно моделировать реальные объекты и их поведение
Приложение состоит из множества взаимодействующих сущностей
Важно инкапсулировать данные и защитить их от прямого изменения
Требуется повторное использование кода через наследование и полиморфизм

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} издает звук`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} лает`);
  }
}

const dog = new Dog("Бобик");
dog.speak(); // "Бобик лает"

🚩Когда использовать функциональное программирование?

Функциональный подход хорош, если
Код должен быть чистым и предсказуемым
Нужно избегать изменений состояния (иммутабельность)
Требуется много работы с массивами, коллекциями данных
Нужно легко писать асинхронный код

const double = num => num * 2;

const numbers = [1, 2, 3, 4];
const doubledNumbers = numbers.map(double);

console.log(doubledNumbers); // [2, 4, 6, 8]

Ставь 👍 и забирай 📚 Базу знаний

🤔 В чём отличие created от mounted?

- created вызывается сразу после создания экземпляра компонента, но до добавления его в DOM.
- mounted вызывается, когда компонент вставлен в DOM — именно в этом хук можно работать с реальным DOM-деревом.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Что такое относительная ссылка?

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

Относительная ссылка

<a href="../contact.html">Контакты</a>

Абсолютная ссылка

<a href="https://example.com/contact.html">Контакты</a>

🚩Типы относительных ссылок

🟠Простые относительные ссылки
Указывают путь к ресурсу, который находится в текущем каталоге или подкаталоге.

<a href="page.html">Страница</a> <!-- Ресурс в текущем каталоге -->

🟠Ссылки с подъемом вверх по дереву файловой структуры
Используются два символа точки (..) для перехода на уровень выше.

   <a href="../folder/page.html">Страница</a> <!-- Подъем на один уровень вверх -->
   

🟠Корневые ссылки
Указывают путь относительно корня веб-сайта, начиная с /.

<a href="/images/photo.jpg">Фото</a> <!-- Начало пути от корня сайта -->

🚩Зачем нужны относительные ссылки?

🟠Удобство при локальной разработке
Относительные ссылки работают независимо от домена. Если вы разрабатываете сайт локально (например, через localhost), вам не нужно указывать абсолютный путь с доменом.

🟠Проще поддерживать сайт
Если домен или структура сайта меняется, относительные ссылки автоматически адаптируются, если структура каталогов остается прежней.

🟠Экономия времени
Меньше текста в коде, особенно если проект содержит множество ссылок.

🚩Примеры использования относительных ссылок

Ссылка на файл в текущей папке

<a href="file.html">Файл в текущей папке</a>

Ссылка на файл в подкаталоге

<a href="subfolder/file.html">Файл в подкаталоге</a>

Ссылка на файл в родительской папке

<a href="../file.html">Файл в родительской папке</a>

Ссылка на файл относительно корня сайта

<a href="/folder/file.html">Файл в папке от корня</a>

Ставь 👍 и забирай 📚 Базу знаний

🤔 Какими способами мы можем получить картинку с сервера?

Через:
- HTML (<img>);
- CSS (background-image);
- JS (через fetch, Image()).

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Когда брать абсолютные величины а когда относительные?

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

🚩Абсолютные величины (например, 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; /* Относительный внешний отступ */
}

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое экшен?

Это объект в Redux, который описывает событие в приложении. Он содержит type (тип события) и payload (данные, если нужны). Экшены передаются в dispatch, вызывая редюсер.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Как бы повернул блок на 45 градусов?

Чтобы повернуть блок на 45 градусов, используется свойство CSS transform с функцией rotate. Это свойство позволяет применять различные трансформации к элементам, включая вращение, масштабирование, смещение и наклон.

🚩Пример использования

.rotated-box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    transform: rotate(45deg);
}

🚩Объяснение

Основной синтаксис
🟠Угол поворота элемента. Может быть положительным или отрицательным значением в градусах (deg), радианах (rad), градусах (grad) или оборотах (turn).

transform: rotate(угол);   

🟠Параметры
Угол поворота элемента. В данном случае элемент поворачивается на 45 градусов по часовой стрелке.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .rotated-box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <div class="rotated-box"></div>
</body>
</html>

🚩Пояснение

🟠Свойство `transform`
Позволяет применять различные визуальные эффекты к элементу, такие как вращение, масштабирование и смещение.
🟠Функция rotate
Используется для вращения элемента на заданный угол. Положительные значения поворачивают элемент по часовой стрелке, отрицательные — против часовой стрелки.

🚩Использование в реальных проектах

🟠Вращение элементов
Вращение элементов может использоваться для создания интересных визуальных эффектов, таких как поворот иконок, изображений или блоков текста.
🟠Анимация
В комбинации с анимацией (@keyframes и transition), вращение может создавать динамичные и интерактивные пользовательские интерфейсы.

Ставь 👍 и забирай 📚 Базу знаний

🤔 Как взаимодействовать с Vuex?

- Получать данные через mapState или this.$store.state;
- Читать вычисленные свойства через mapGetters;
- Изменять данные через commit('mutation');
- Выполнять асинхронные задачи через dispatch('action').

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Что происходит в момент запроса в браузере?

Когда пользователь вводит URL в адресную строку браузера и нажимает Enter, происходит ряд шагов для получения и отображения запрашиваемой веб-страницы. Этот процесс включает взаимодействие различных компонентов сети и веб-технологий.

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

🟠DNS-разрешение
Если ресурс не найден в кэше, браузер выполняет запрос к DNS-серверу для преобразования доменного имени (например, www.example.com) в IP-адрес сервера.

🟠Установление TCP-соединения
После получения IP-адреса браузер устанавливает TCP-соединение с сервером. Этот процесс включает в себя трехэтапное рукопожатие:
Браузер отправляет SYN-пакет серверу.
Сервер отвечает SYN-ACK пакетом.
Браузер отправляет ACK-пакет, подтверждая установление соединения.

🟠HTTPS и SSL/TLS
Если URL использует HTTPS, происходит дополнительный этап установки защищенного соединения с использованием SSL/TLS:
Браузер и сервер обмениваются сертификатами и выполняют шифрование данных.

🟠Отправка HTTP-запроса
Браузер отправляет HTTP-запрос на сервер. Например, для получения главной страницы сайта может быть отправлен следующий запрос:

          GET / HTTP/1.1
     Host: www.example.com

🟠Обработка запроса на сервере
Сервер принимает запрос, обрабатывает его, генерирует ответ и отправляет его обратно клиенту. Сервер может выполнять различные задачи, такие как доступ к базе данных, обработка логики приложения и рендеринг страниц.

🟠Получение и обработка HTTP-ответа
Браузер получает 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-запросы для их загрузки.

🟠Выполнение JavaScript
После парсинга HTML и CSS браузер начинает выполнение встроенных и внешних JavaScript-скриптов. JavaScript может изменять DOM и CSSOM (CSS Object Model), что приводит к изменениям в отображении страницы.
JavaScript также может отправлять асинхронные запросы (AJAX) для динамической загрузки данных и обновления страницы без перезагрузки.

Ставь 👍 и забирай 📚 Базу знаний

🤔 Для чего в условии нужна стрелочная функция?

Стрелочные функции удобны в однострочных условиях, особенно при фильтрации, поиске, сортировке. Они делают код компактным и читаемым, особенно в методах массива (filter, map, some).

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний