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

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

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

1. Инициализация запроса

Когда пользователь вводит URL или кликает на ссылку, браузер начинает процесс:

# С точки зрения Python backend'а, это HTTP запрос
from flask import Flask, request

app = Flask(__name__)

@app.route('/')
def home():
    # К этому моменту браузер уже прошёл несколько стадий
    client_ip = request.remote_addr
    return 'HTML страница'

2. DNS разрешение

Браузер должен преобразовать доменное имя в IP адрес:

• Проверяется локальный кеш браузера (часто 1 минута)
• Проверяется кеш ОС (могут быть часы)
• Запрос к DNS рекурсивному резолверу (обычно ISP)
• Резолвер спрашивает корневой DNS сервер → TLD сервер → авторитарный DNS

Этот процесс может занять 20-300мс.

3. Установление TCP соединения

После получения IP браузер инициирует трёхстороннее TCP рукопожатие (three-way handshake):

Клиент → Сервер: SYN
Сервер → Клиент: SYN-ACK
Клиент → Сервер: ACK

Типичное время: 50-100мс для локальной сети.

4. TLS/SSL handshake (для HTTPS)

Для защищённого соединения требуется дополнительное рукопожатие:

• ClientHello: браузер сообщает поддерживаемые версии и шифры
• ServerHello + Certificate: сервер отправляет сертификат
• Key Exchange: обмен ключами для шифрования
• Finished: проверка целостности

Это добавляет 100-300мс.

5. Отправка HTTP запроса

Браузер формирует и отправляет HTTP запрос с заголовками и параметрами. Браузер может одновременно открывать 6-8 соединений для загрузки ресурсов параллельно.

6. Обработка на сервере (Python backend)

Сервер получает запрос и обрабатывает его:

# Пример Django
from django.http import HttpResponse
from django.views import View

class HomePage(View):
    def get(self, request):
        # Маршрутизация (routing)
        # Аутентификация
        # Авторизация
        # Обработка бизнес-логики
        # Запросы к БД
        # Рендеринг шаблона
        
        user = request.user
        data = get_user_data(user.id)
        return HttpResponse(render_template('home.html', data))

Время обработки: 50мс-2сек (зависит от сложности).

7. Отправка ответа с сервера

Сервер отправляет HTTP ответ с заголовками и телом в сжатом виде.

8. Прием и парсинг HTML

Браузер получает данные и начинает их парсить:

• Создаёт DOM дерево (Document Object Model)
• Останавливается при встрече с script тегом без async/defer
• Загружает и выполняет синхронные скрипты

9. Загрузка CSS, JS, изображений

По мере парсинга HTML браузер обнаруживает ресурсы и загружает их параллельно:

# Оптимизация с point of view Python backend'а
# Минификация и сжатие
from django.middleware.gzip import GZipMiddleware

Оптимизация: использование async и defer для скриптов.

10. Построение CSSOM и Render Tree

Браузер объединяет DOM и CSS в Render Tree (дерево рендеринга).

11. Layout (Reflow)

Браузер вычисляет позицию и размер каждого элемента на экране.

12. Paint (Repaint)

Браузер рисует пиксели на экране (цвета, тени, градиенты).

13. Composite

Браузер объединяет слои в финальное изображение.

Полное время загрузки

Общее время может быть:

• DNS: 100мс
• TCP: 75мс
• TLS: 150мс
• Обработка сервером: 300мс
• Передача: 50мс
• Браузер парсинг: 200мс
• Загрузка ресурсов: 500мс

ИТОГО: примерно 1.3-5 секунд в реальной жизни.

Оптимизация с Python backend'а:

1. Кеширование: Redis, memcached
2. Минификация и сжатие: GZIP, Brotli
3. CDN: раздача статики из множества locations
4. Асинхронная обработка: Celery, asyncio
5. Database оптимизация: индексы, кеширование запросов
6. Lazy loading: загрузка контента по требованию
7. Server-side rendering: SSR vs CSR выбор