Что происходит когда ты вводишь example.com в браузере?

Что происходит когда ты вводишь example.com в браузере?

Полная цепочка событий (за ~500мс)

Шаг 1: DNS LOOKUP (50-200мс)
  └─ Браузер спрашивает: "Какой IP адрес у example.com?"
     ISP DNS resolver: "IP = 93.184.216.34"

Шаг 2: TCP CONNECTION (50-150мс)
  └─ Браузер подключается к серверу (93.184.216.34:80)
     3-way handshake (SYN, SYN-ACK, ACK)

Шаг 3: TLS HANDSHAKE (100-200мс, если HTTPS)
  └─ Браузер и сервер договариваются об encryption
     Обмен сертификатами

Шаг 4: HTTP REQUEST (instant)
  └─ Браузер отправляет:
     GET / HTTP/1.1
     Host: example.com
     User-Agent: Mozilla/5.0...

Шаг 5: SERVER PROCESSING (few мс - few сек)
  └─ Сервер обрабатывает запрос
     Логирует в log'и
     Возвращает HTML

Шаг 6: HTTP RESPONSE (instant)
  └─ Сервер отправляет:
     200 OK
     Content-Type: text/html
     [HTML content]

Шаг 7: PARSING & RENDERING (500мс - few сек)
  └─ Браузер парсит HTML
     Скачивает CSS, JavaScript, images
     Рендирует (paint) страницу

Шаг 8: EXECUTED JAVASCRIPT (if any)
  └─ Браузер выполняет JS код
     Может загружать дополнительные ресурсы

Результат: Видишь загруженную страницу

Детально каждый шаг

ШАГ 1: DNS LOOKUP

Что происходит:
  1. Ты вводишь example.com и нажимаешь Enter
  2. Браузер проверяет свой cache
     → Может быть там уже знает IP
  3. Если не в cache:
     → Спрашивает у OS
  4. OS проверяет свой DNS cache
     → Может быть там
  5. Если не там:
     → Спрашивает у ISP DNS resolver
  6. ISP resolver спрашивает у Root nameserver
     → Root: "Это .com домен, спроси у .com nameserver"
  7. Спрашивает у .com nameserver
     → Com: "example.com hosted на [authoritative nameserver]"
  8. Спрашивает у authoritative nameserver
     → "example.com = 93.184.216.34"
  9. Ответ кэшируется на каждом уровне
  10. Браузер получает IP адрес

Время: 50-200мс (зависит от cache hits и сетей)

Кэширование:
  - Browser cache: 5-30 min (зависит от TTL)
  - OS cache: varies
  - ISP cache: 24 часа

ШАГ 2: TCP CONNECTION (Three-way handshake)

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

Твой компьютер (Client)         Сервер (Server)
        |
        |──── SYN ────────────>  ("Hey, wanna talk?")
        |                        Сервер получает
        |                        |
        |<──── SYN-ACK ────────  ("Yes, let's talk")
        | Браузер получает       |
        |                        |
        |──── ACK ────────────>  ("Great!")
        |                        Сервер получает
        |
   Connection established
   Теперь можно отправлять HTTP request

Время: 50-150мс (зависит от задержки в сети)

Локальный сервер (localhost): <1мс
Сервер в другой стране: 100-300мс

ШАГ 3: TLS HANDSHAKE (если HTTPS)

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

Твой браузер (Client)           Сервер (Server)
        |
        |──── ClientHello ──────>  ("I support TLS 1.3...")
        |                          (Какие cipher suites знаю)
        |                          |
        |<──── ServerHello ──────  ("We'll use TLS 1.3")
        |<──── Certificate ──────  ("Вот мой сертификат")
        |<──── ServerKeyExchange─  ("Вот мой public key")
        |<──── ServerHelloDone ──  ("Твоя очередь")
        |
        |──── ClientKeyExchange──> ("Вот мой key")
        |──── ChangeCipherSpec ──> ("Меняю на шифрование")
        |──── Finished ──────────> (Проверочное сообщение)
        |                          |
        |<──── ChangeCipherSpec ─  ("Я тоже меняю")
        |<──── Finished ──────────  (Проверочное сообщение)
        |
   Secure connection established

Время: 100-200мс

Что проверяет браузер:
  ✓ Сертификат подписан доверенным CA
  ✓ Домен соответствует сертификату
  ✓ Сертификат не expired

ШАГ 4: HTTP REQUEST

Что браузер отправляет:

GET / HTTP/1.1
Host: example.com
Connection: keep-alive
Cache-Control: max-age=0
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) ...
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Cookie: [if any previous cookies]

(пустая строка обозначает конец headers)

Объяснение:
  GET /       - Запрос root path
  HTTP/1.1    - Версия HTTP
  Host        - Какой хост запрашиваем
  User-Agent  - Какой браузер
  Accept      - Какие форматы принимаем
  Accept-Encoding - Какую компрессию принимаем
  Cookie      - Куки для этого домена

ШАГ 5: SERVER PROCESSING

Что происходит на сервере:

1. Сервер логирует запрос
   Log line: 93.184.216.34 - - [date] "GET / HTTP/1.1" 200 1256
            (IP) (user) (datetime) (request) (status) (response_size)

2. Сервер обрабатывает запрос
   - Проверяет кэш (может быть уже есть ответ)
   - Если нет: выполняет бизнес-логику
   - Генерирует HTML

3. Сервер собирает ответ
   - Вычисляет Content-Length
   - Сжимает (gzip, brotli)
   - Готовит headers

Время: few мс (для статической страницы) до few сек (для динамической)

ШАГ 6: HTTP RESPONSE

Что сервер отправляет:

HTTP/1.1 200 OK
Server: Apache/2.4.1
Content-Type: text/html; charset=UTF-8
Content-Length: 1256
Content-Encoding: gzip
Cache-Control: max-age=3600
ETag: "3147526-1256-3e3073913b100"
Last-Modified: Wed, 21 Oct 2015 07:28:00 GMT
Connection: keep-alive
Set-Cookie: sessionid=abc123; Path=/; HttpOnly

(пустая строка)

[HTML содержимое, сжатое gzip'ом]

Объяснение:
  200 OK          - Статус (успешно)
  Content-Type    - Тип контента (HTML)
  Content-Length  - Размер ответа
  Content-Encoding- Как сжата (gzip)
  Cache-Control   - Кэш на 1 час
  ETag            - Версия контента
  Set-Cookie      - Куки для браузера

ШАГ 7: PARSING & RENDERING

Что браузер делает с HTML:

1. DECOMPRESS (if gzip)
   Распаковать HTML из gzip'а

2. PARSE HTML
   Браузер читает HTML линию за линией
   Создаёт DOM (Document Object Model) tree
   
   <html>
     <head>
       <title>Example</title>
       <link rel="stylesheet" href="style.css">
     </head>
     <body>
       <h1>Hello</h1>
       <img src="image.png">
     </body>
   </html>
   
   Становится:
   
   Document
   └─ html
      ├─ head
      │  ├─ title ("Example")
      │  └─ link (CSS файл)
      └─ body
         ├─ h1 ("Hello")
         └─ img

3. FETCH RESOURCES
   Браузер видит ссылки на ресурсы:
   - <link href="style.css"> → Скачать CSS
   - <img src="image.png"> → Скачать картинку
   - <script src="app.js"> → Скачать JS
   
   Все эти скачиваются параллельно (до 6 одновременно)

4. BUILD CSSOM
   CSS парсится и создаётся CSSOM tree
   (CSS Object Model)

5. RENDER TREE
   Браузер объединяет DOM + CSSOM
   Создаёт Render Tree (содержит только видимые элементы)
   
   Исключает:
   - display: none элементы
   - <head> элементы
   - <script> теги

6. LAYOUT
   Браузер рассчитывает положение каждого элемента
   Какой width, height, x, y координаты
   
   Это дорого computationally!
   Изменение DOM структуры = переделать layout

7. PAINT
   Браузер рисует (paint) каждый элемент
   Пиксель за пикселем на экран
   
   Это тоже дорого!
   Большой DOM = долгий paint

8. COMPOSITE
   Браузер объединяет слои в финальное изображение
   (GPU acceleration если поддерживается)

Время: 500мс - few сек (зависит от сложности страницы)

ШАГ 8: JAVASCRIPT EXECUTION

Если есть <script> теги:

1. Скачиваются JS файлы
2. JS выполняется (может быть дорого!)
3. JS может:
   - Изменить DOM
   - Загрузить дополнительные данные (AJAX)
   - Показать/скрыть элементы
   - Установить event listeners

Проблема: если JS долгий
  → Браузер "заморажен", не может обновить UI
  → Пользователь видит frozen экран
  → "Страница не отвечает"

Время: depends on code complexity

Оптимизация (что замедляет процесс)

1. DNS lookup: slow ISP DNS
   Решение: Use fast DNS (Cloudflare 1.1.1.1, Google 8.8.8.8)

2. TCP connection: high latency network
   Решение: CDN (сервер близко к user'у)

3. TLS handshake: slow certificate exchange
   Решение: Session resumption, TLS 1.3

4. Server processing: slow backend
   Решение: Caching, database optimization

5. HTML size: large HTML document
   Решение: Minification, remove unused code

6. CSS/JS/images: много ресурсов
   Решение: 
     - CSS в <head> (блокирует rendering)
     - JS в конце <body> (не блокирует rendering)
     - Compress images
     - Code splitting

7. Long parsing/rendering: сложная страница
   Решение: 
     - Меньше DOM элементов
     - Virtual scrolling для больших списков
     - Lazy loading для images

8. Heavy JavaScript: долгий JS
   Решение: 
     - Code splitting
     - Web Workers для heavy computation
     - Defer non-critical JS

Network Waterfall (визуализация)

Время →

DNS       [████] 100мс
TCP       [███] 50мс
TLS       [██████] 150мс
Request   [█] 10мс
Server    [█████] 100мс
Response  [█] 20мс

HTML Parse  [██████████] 500мс
  ├─CSS    [████████] 200мс
  ├─JS     [████████] 200мс
  └─Images [██████████████] 400мс (параллельно)

Render    [███████████] 600мс
JS Run    [████] 150мс

Тотально: ~1.5-2 сек (в зависимости от многого)

Практика для System Analyst'а

Понимание цепочки важно для:

1. Требования к performance "Page load time < 3 секунд" → знай где бутленек

2. API design JavaScript будет вызывать API → нужно fast responses

3. Caching strategy DNS caching, browser caching, CDN caching → ускорит loading

4. Infrastructure CDN нужен если пользователи в разных странах Database нужна быстрая

5. Monitoring Какие метрики отслеживать (First Paint, First Contentful Paint, Largest Contentful Paint)

Вывод

Ввод example.com → сложная цепочка событий

DNS lookup
  ↓
TCP connect
  ↓
TLS handshake
  ↓
HTTP request
  ↓
Server processing
  ↓
HTTP response
  ↓
Parse HTML
  ↓
Fetch resources (CSS, JS, images)
  ↓
Parse CSS → Build CSSOM
  ↓
Execute JavaScript (if any)
  ↓
Build Render Tree
  ↓
Layout
  ↓
Paint
  ↓
Composite
  ↓
You see the page

Время: 500мс - 5+ сек (в зависимости от сети, сервера, сложности страницы)

Для System Analyst: понимание этого процесса помогает:

• Ставить реалистичные требования к performance
• Выявлять bottleneck'и
• Оптимизировать систему
• Общаться с разработчиками на их языке