Какие можете выделить этапы загрузки сайта?

2.2 Middle🔥 141 комментариев

#Архитектура и паттерны

Комментарии (1)

🐱

claude-haiku-4.5PrepBro AI22 мар. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Этапы загрузки сайта

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

1. DNS Lookup (Разрешение имён доменов)

Первый этап — браузер должен найти IP-адрес сервера по доменному имени.

# Пример DNS запроса
import socket

hostname = "example.com"
try:
    ip_address = socket.gethostbyname(hostname)
    print(f"{hostname} → {ip_address}")
except socket.gaierror:
    print(f"Не удалось разрешить {hostname}")

Время: 20-120 мс (может быть кеширован)

Что происходит:

Браузер проверяет кеш DNS
Если кеша нет, запрашивает рекурсивный резолвер
Рекурсивный резолвер запрашивает root nameserver
Root дает ссылку на TLD nameserver
TLD дает ссылку на авторитетный nameserver
Авторитетный nameserver возвращает IP-адрес

2. TCP Connection (TCP соединение)

Браузер устанавливает TCP соединение с сервером (three-way handshake).

Время: 10-300 мс (в зависимости от расстояния)

Процесс:

Клиент отправляет SYN пакет
Сервер отвечает SYN-ACK пакетом
Клиент отправляет ACK пакет
Соединение установлено

3. TLS Handshake (SSL/TLS рукопожатие)

Для HTTPS соединений требуется дополнительное рукопожатие для установки зашифрованного канала.

Время: 100-500 мс

Процесс:

Client Hello — клиент отправляет версию TLS и поддерживаемые шифры
Server Hello — сервер выбирает версию TLS и отправляет сертификат
Key Exchange — обе стороны согласуют ключ шифрования
Finished — обе стороны подтверждают успешное рукопожатие

4. HTTP Request (HTTP запрос)

Браузер отправляет HTTP запрос серверу.

GET /index.html HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0
Accept: text/html

Время: зависит от пинга, обычно 10-50 мс

5. Backend Processing (Обработка на сервере)

Сервер обрабатывает запрос: маршрутизация, логика приложения, запросы к БД.

# Пример обработки на сервере
from fastapi import FastAPI
import time

app = FastAPI()

@app.get("/")
async def root():
    # Здесь происходит основная работа
    start = time.time()
    
    # 1. Подготовка данных
    data = fetch_data_from_db()  # Может занять 50-500 мс
    
    # 2. Рендеринг HTML
    html = render_template(data)  # Может занять 10-100 мс
    
    # 3. Генерация ответа
    processing_time = time.time() - start
    return {"html": html, "time": processing_time}

Время: 50-2000+ мс (основная задержка часто здесь)

Что включает:

Маршрутизация запроса
Аутентификация и авторизация
Запросы к базе данных
Обработка логики приложения
Рендеринг HTML/JSON

6. HTTP Response (HTTP ответ)

Сервер отправляет ответ клиенту.

Время: 10-50 мс

Содержит:

HTML документ
Заголовки (Content-Type, Content-Length, и т.д.)
Опционально: cookies, кеш директивы

7. Parsing HTML (Парсинг HTML)

Браузер начинает парсить HTML документ построчно.

Время: 10-100 мс

// Пример хронологии парсинга
// 1. Браузер читает HTML
// 2. Встречает <head> — парсит метаданные
// 3. Встречает <link rel="stylesheet"> — загружает CSS (блокирует рендеринг)
// 4. Встречает <script> — загружает JS (блокирует парсинг)
// 5. Встречает <body> — начинает строить DOM

8. Download Resources (Загрузка ресурсов)

Браузер загружает CSS, JavaScript, изображения и другие ресурсы.

Время: 100-5000+ мс (основная задержка на фронте)

<!-- Эти ресурсы блокируют рендеринг -->
<link rel="stylesheet" href="styles.css">  <!-- Критический путь -->
<script src="app.js"></script>              <!-- Блокирует парсинг -->

<!-- Эти ресурсы загружаются параллельно -->
<img src="image.jpg">                      <!-- Асинхронно -->
<img src="image2.jpg">                     <!-- Асинхронно -->

Оптимизация:

CSS в head, JS в конце body
Загрузка асинхронных JS (async, defer)
Сжатие изображений
Минификация CSS/JS
Использование CDN

9. CSS Parsing (Парсинг CSS)

Браузер парсит CSS и применяет стили к элементам.

Время: 10-50 мс

Процесс:

Парсинг CSS правил
Создание CSSOM (CSS Object Model)
Объединение DOM + CSSOM = Render Tree

10. Layout (Вычисление макета)

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

Время: 50-200 мс

// Браузер вычисляет:
// 1. Размер видимой области (viewport)
// 2. Размер каждого элемента
// 3. Позицию каждого элемента
// 4. Сложные вычисления (flexbox, grid, float)

11. Paint (Рисование)

Браузер конвертирует Render Tree в пиксели.

Время: 50-200 мс

Процесс:

Определение Z-index слоев
Рисование фонов
Рисование границ
Рисование текста

12. Composite (Композитирование)

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

Время: 10-50 мс

13. JavaScript Execution (Выполнение JavaScript)

Браузер выполняет JavaScript код.

Время: 100-1000+ мс

// JavaScript может вызвать Reflow/Repaint
const element = document.getElementById('myDiv');
element.style.width = '100px';  // Layout (Reflow)
element.style.backgroundColor = 'red';  // Paint (Repaint)

// Или асинхронно:
setTimeout(() => {
    element.textContent = 'Updated';  // Reflow + Repaint
}, 1000);

14. DCL Event (DOMContentLoaded)

Этот событие срабатывает, когда весь HTML парсен и начальный JavaScript выполнен.

document.addEventListener('DOMContentLoaded', () => {
    console.log('DOM готов к использованию');
    // Обычно инициализируем приложение
});

Время: от начала загрузки до этого события

15. Load Event (Load)

Этот событие срабатывает, когда все ресурсы (включая изображения) загружены.

window.addEventListener('load', () => {
    console.log('Все ресурсы загружены');
});

16. FCP/LCP (First/Largest Contentful Paint)

Метрики производительности:

FCP (First Contentful Paint): когда браузер рисует первый контент
LCP (Largest Contentful Paint): когда загружается основной контент

// Мониторинг в браузере
const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
        console.log('LCP:', entry.renderTime || entry.loadTime);
    }
});

observer.observe({entryTypes: ['largest-contentful-paint']});

Схема полного процесса

ДНС (50мс) 
  ↓
TCP соединение (50мс)
  ↓
TLS рукопожатие (200мс для HTTPS)
  ↓
HTTP запрос (10мс)
  ↓
Обработка сервером (500мс) [ОСНОВНАЯ ЗАДЕРЖКА]
  ↓
HTTP ответ (10мс)
  ↓
Парсинг HTML (50мс)
  ↓
Загрузка CSS, JS, картинок (2000мс+) [ОСНОВНАЯ ЗАДЕРЖКА]
  ↓
Парсинг CSS (30мс)
  ↓
Выполнение JS (300мс)
  ↓
Layout (100мс)
  ↓
Paint (100мс)
  ↓
Composite (20мс)

ITOGO: 3-5 секунд типичный сайт

Оптимизация по этапам

Этап	Оптимизация
DNS	Используйте быстрый DNS провайдер, уменьшите количество домен
TCP/TLS	Используйте HTTP/2, HTTP/3, держите alive соединения
Backend	Кешируйте данные, оптимизируйте запросы к БД
Ресурсы	Минифицируйте, сжимайте, используйте CDN, ленивую загрузку
JS	Разделите на чанки, используйте Web Workers для CPU-задач
Критический путь	Загружайте критический CSS inline, загружайте JS асинхронно

Практический Python код для измерения

import time
import requests
from urllib.parse import urlparse

def measure_page_load(url):
    start = time.time()
    
    try:
        response = requests.get(url, timeout=10)
        ttfb = time.time() - start  # Time to First Byte
        
        return {
            'url': url,
            'status': response.status_code,
            'ttfb': ttfb,
            'size': len(response.content),
            'headers': dict(response.headers)
        }
    except Exception as e:
        return {'error': str(e)}

result = measure_page_load('https://example.com')
print(f"TTFB: {result['ttfb']:.2f}s")
print(f"Размер: {result['size'] / 1024:.1f}KB")

Вывод

Главные этапы загрузки сайта:

DNS и TCP/TLS — сетевые задержки
Backend processing — логика сервера (оптимизировать кешированием, БД)
Resource loading — загрузка CSS/JS/картинок (оптимизировать минификацией, CDN)
Rendering — парсинг, layout, paint
JavaScript — выполнение скриптов

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