Что происходит при загрузке страницы?

1. Пользователь вводит URL в адресную строку браузера или нажимает ссылку.
2. Браузер выполняет поиск IP-адреса хоста в DNS (Domain Name System).
3. Браузер устанавливает TCP-соединение с сервером веб-сайта по полученному IP-адресу.
4. Браузер отправляет HTTP-запрос на сервер, запрашивая HTML-документ.
5. Сервер обрабатывает запрос и отправляет HTTP-ответ с HTML-содержимым и метаданными (заголовками).
6. Браузер получает HTML-документ и начинает парсить его, строя Document Object Model (DOM).
7. При обнаружении в HTML ссылок на CSS-файлы, JavaScript-файлы и изображения, браузер делает дополнительные HTTP-запросы для их загрузки.
8. Браузер обрабатывает CSS, применяя стили к элементам DOM, создавая CSS Object Model (CSSOM).
9. После построения DOM и CSSOM, браузер объединяет их для создания Render Tree.
10. Браузер выполняет расчеты макета Render Tree (Layout/Reflow) для определения геометрических характеристик элементов.
11. Браузер раскрашивает (Paint) элементы на экране на основе Render Tree и информации о макете.
12. Браузер выполняет JavaScript-код, который может изменять DOM, CSSOM или запускать дополнительные HTTP-запросы (например, AJAX). Изменения приводят к повторному выполнению шагов 6-11.

// Пример простого HTTP-сервера на Node.js
const http = require('http');

const server = http.createServer((req, res) => {
  // Обработка входящего запроса
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/html');
  res.end('<h1>Привет, мир!</h1>'); // Отправка HTML-ответа
});

server.listen(3000, '127.0.0.1', () => {
  console.log('Сервер запущен на http://127.0.0.1:3000/');
});