Для чего статика сайта запрашивается с нескольких доменов?

1.0 Junior🔥 61 комментариев

#Soft Skills и рабочие процессы

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

🐱

claude-haiku-4.5PrepBro AI2 апр. 2026 г.(ред.)

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

Для чего статика сайта запрашивается с нескольких доменов?

Это отличный вопрос о оптимизации производительности. Когда сайт запрашивает статику (CSS, JS, картинки) с разных доменов, это даёт несколько важных преимуществ для скорости загрузки.

1. Параллельные соединения (Connection Multiplexing)

Браузер имеет лимит на количество одновременных соединений к одному домену:

HTTP/1.1:
- Chrome позволяет ~6 одновременных соединений к одному домену
- Firefox позволяет ~6 соединений

HTTP/2:
- Один мультиплексированный поток
- Но всё равно есть ограничения

Пример без оптимизации:

Домен: https://example.com
Загружаем:
1. style.css        
2. script.js        
3. image1.jpg       
4. image2.jpg       
5. image3.jpg       
6. font.woff2       
7. image4.jpg       <- Ждёт, пока освободится соединение!

Картинка #7 должна ждать, пока одна из первых 6 загрузится.

Пример с оптимизацией (несколько доменов):

Домен 1: https://example.com
1. style.css        
2. script.js        
3. font.woff2       

Домен 2: https://cdn1.example.com
4. image1.jpg       
5. image2.jpg       
6. image3.jpg       

Домен 3: https://cdn2.example.com
7. image4.jpg       
8. image5.jpg

Теперь 9 ресурсов загружаются почти одновременно!

2. Обход ограничений пропускной способности

// 1. Одного домена недостаточно
const images = Array(20).fill("/images/pic.jpg");

// 2. Распределяем между несколькими доменами
const imageServers = [
  "https://cdn1.example.com",
  "https://cdn2.example.com",
  "https://cdn3.example.com"
];

const imageUrls = images.map((img, i) => {
  const server = imageServers[i % imageServers.length];
  return `${server}/images/pic-${i}.jpg`;
});

// Результат:
// cdn1.example.com/images/pic-0.jpg
// cdn2.example.com/images/pic-1.jpg
// cdn3.example.com/images/pic-2.jpg
// cdn1.example.com/images/pic-3.jpg
// ...

3. Избежание отправки Cookies

Важно: Статика (CSS, JS, картинки) обычно НЕ нуждается в cookies, но если они на одном домене с основным сайтом, браузер всё равно их отправляет:

<!-- На домене example.com -->
<!-- Каждый запрос включает cookies! -->
<link rel="stylesheet" href="https://example.com/style.css" />
<!-- Отправляется: Cookie: session=abc123; user=john -->

<!-- На отдельном домене (без cookies) -->
<!-- Cookies НЕ отправляются! -->
<img src="https://cdn.example.com/image.jpg" />
<!-- Отправляется только сам запрос, без cookies -->

Экономия трафика:

Сессионный cookie: ~100 bytes
Усер cookie: ~50 bytes
Другие cookies: ~150 bytes
Всего: ~300 bytes

Если загружаем 100 картинок:
100 * 300 bytes = 30 KB сэкономлено!

4. Кеширование браузером

Отдельный домен имеет отдельный кеш:

Домен example.com: Кеш (50 MB)
Домен cdn1.example.com: Кеш (50 MB)
Домен cdn2.example.com: Кеш (50 MB)

Общий доступный кеш: ~150 MB вместо 50 MB

При большом количестве статики браузер может хранить больше файлов.

Практический пример: современный сайт

<!DOCTYPE html>
<html>
<head>
  <!-- Основные стили с основного домена -->
  <link rel="stylesheet" href="https://example.com/styles/main.css" />
  
  <!-- Шрифты с Google Fonts CDN -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link href="https://fonts.googleapis.com/css2?family=Inter" rel="stylesheet" />
  
  <!-- Favicon -->
  <link rel="icon" href="https://example.com/favicon.ico" />
</head>
<body>
  <!-- Картинки с разных CDN серверов -->
  <img src="https://cdn1.example.com/images/hero.jpg" alt="Hero" />
  <img src="https://cdn2.example.com/images/feature-1.jpg" alt="Feature" />
  <img src="https://cdn3.example.com/images/feature-2.jpg" alt="Feature" />
  
  <!-- Скрипты -->
  <script src="https://example.com/js/main.js"></script>
  <script src="https://example.com/js/analytics.js"></script>
</body>
</html>

Real-world пример: Cloudflare, AWS CloudFront

Модерные CDN (Content Delivery Networks) автоматически распределяют статику:

// Конфигурация CDN
const cdnConfig = {
  images: {
    domain: "cdn-images.example.com",
    regions: ["eu", "us", "asia"] // Автоматическое распределение по регионам
  },
  css: {
    domain: "cdn-css.example.com"
  },
  js: {
    domain: "cdn-js.example.com"
  }
};

// Результат: каждый тип файла на отдельном домене/сервере

DNS Lookup и TCP Handshake

Краткосрочная стоимость новых доменов:

ДNS lookup:        ~100ms (первый раз)
TCP handshake:     ~50ms (первый раз)
TLS handshake:     ~100ms (для HTTPS)
Всего: ~250ms

Но это компенсируется:
- Параллельной загрузкой (экономия ~500ms)
- Уменьшением размера cookies (экономия ~100ms)

Как работает в реальной жизни

Сценарий загрузки сайта:

1. Браузер загружает HTML с example.com (200ms)
2. Парсит HTML, видит:
   - https://example.com/style.css
   - https://cdn1.example.com/hero.jpg
   - https://cdn2.example.com/logo.svg
   - https://cdn3.example.com/features.jpg

3. Параллельно загружает со всех 4 доменов (~300ms):
   - example.com -> 50ms
   - cdn1.example.com -> 50ms
   - cdn2.example.com -> 50ms  
   - cdn3.example.com -> 50ms

4. Всё готово! Вместо 200ms для каждого = 200ms для всех одновременно

Современный подход: HTTP/2 и HTTP/3

Важно: С HTTP/2 некоторые преимущества уменьшаются:

HTTP/1.1: Нужны несколько доменов для параллелизма
HTTP/2:   Мультиплексирование в одном соединении
HTTP/3:   Ещё быстрее, но всё равно может быть полезно

Однако отдельные домены всё ещё полезны:

Cookie-free:не отправляются cookies
Распределение нагрузки: разные серверы
Географическое распределение: CDN в разных регионах

Пример Next.js конфигурации

// next.config.js
module.exports = {
  images: {
    domains: [
      'example.com',
      'cdn1.example.com',
      'cdn2.example.com',
      'cdn3.example.com',
      'images.pexels.com'
    ],
    // Оптимизация картинок
    formats: ['image/avif', 'image/webp']
  },
  // Assetprefix для статики
  assetPrefix: process.env.CDN_URL || ''
};

// Использование в компоненте
import Image from 'next/image';

export function Hero() {
  return (
    <Image
      src="/images/hero.jpg"
      alt="Hero"
      width={1200}
      height={600}
      priority
      // Next.js автоматически оптимизирует и загружает с правильного домена
    />
  );
}

Итог

Статика запрашивается с нескольких доменов для:

Параллельной загрузки - браузер загружает 6+ файлов одновременно
Избежания cookies - экономия трафика на каждом запросе
Большего кеша - каждый домен имеет свой кеш браузера
Географического распределения - разные CDN серверы в разных странах
Надёжности - если один CDN упадёт, остальная статика загружается
Масштабируемости - можно добавить больше серверов

Типичная установка: 1-3 основных домена + 2-5 CDN доменов для оптимальной скорости.