\n \n\n```\n\n### 7. Парсинг HTML (Parsing)\n\nБраузер парсит HTML построчно и создаёт **DOM-дерево**:\n\n```\nHTML\n ├── head\n │ ├── title\n │ └── link (stylesheet)\n └── body\n ├── h1\n └── script\n```\n\n### 8. Загрузка ресурсов (Resources)\n\nКак только браузер находит ссылки на ресурсы, он начинает их загружать параллельно:\n\n- CSS файлы: `/styles.css`\n- JavaScript файлы: `/app.js`\n- Изображения: `/logo.png`\n- Шрифты: `/font.woff2`\n\nДля каждого ресурса повторяются шаги DNS → TCP → HTTP запрос → ответ.\n\n### 9. Построение CSSOM и Render Tree\n\nПока загружаются CSS файлы, браузер создаёт **CSSOM (CSS Object Model)**:\n\n```python\n# Концептуально\ncssom = {\n 'h1': {'color': 'black', 'font-size': '32px'},\n 'body': {'background': 'white', 'font-family': 'Arial'}\n}\n```\n\nЗатем браузер объединяет DOM и CSSOM в **Render Tree** (дерево отрисовки), исключая скрытые элементы.\n\n### 10. Layout (Расчёт макета)\n\nБраузер вычисляет позицию и размер каждого элемента:\n\n```\nЭлемент: h1\nПозиция: x=10px, y=20px\nРазмер: width=300px, height=32px\n```\n\nЭтот процесс называется **Layout** или **Reflow**.\n\n### 11. Paint (Отрисовка)\n\nБраузер рисует визуальные элементы на экран:\n\n```\n1. Отрисовка фона\n2. Отрисовка текста\n3. Отрисовка границ\n4. Наложение слоёв\n```\n\n### 12. Compositing (Композитинг)\n\nБраузер объединяет слои в финальное изображение и выводит на экран.\n\n### 13. Выполнение JavaScript\n\nБраузер загружает и выполняет JavaScript блокирующим образом (если не использованы `defer` или `async`):\n\n```html\n\n\n\n\n\n\n\n\n```\n\n### Полная временная шкала\n\n```\nвремя →\n├─ 100ms: DNS-запрос\n├─ 200ms: TCP-соединение\n├─ 300ms: TLS-рукопожатие\n├─ 350ms: HTTP-запрос отправлен\n├─ 500ms: HTTP-ответ получен\n├─ 510ms: Начало парсинга HTML\n├─ 520ms: Обнаружены ресурсы\n├─ 600ms: CSS загружен, CSSOM построен\n├─ 650ms: Render Tree готов\n├─ 700ms: Layout завершён\n├─ 750ms: Paint завершена\n├─ 800ms: JavaScript выполнен\n└─ 850ms: Страница готова (onload)\n```\n\n### Оптимизация процесса\n\nДля ускорения можно:\n\n1. **DNS-prefetch:** ``\n2. **Preconnect:** ``\n3. **Минификация:** уменьшать размеры файлов\n4. **Кэширование:** использовать браузерный кэш и CDN\n5. **Ленивая загрузка:** `loading=\"lazy\"` для изображений\n6. **HTTP/2:** приоритизация ресурсов\n\nЭтот процесс происходит в миллисекундах, но каждый миллисекунд имеет значение для пользовательского опыта.","dateCreated":"2026-03-22T11:53:05.414127","upvoteCount":0,"author":{"@type":"Person","name":"claude-haiku-4.5"}}}}
PrepBro
← Назад к вопросам

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

1.7 Middle🔥 191 комментариев
#REST API и HTTP

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

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

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

Что происходит при переходе на адрес в браузере

Это один из самых фундаментальных процессов в веб-разработке. Давайте разберём все этапы от ввода адреса до отрисовки страницы.

1. Разбор URL и DNS-запрос

Когда вы вводите URL в адресную строку и нажимаете Enter, браузер сначала разбирает адрес:

https://www.example.com:443/path?query=1#hash
│       │              │   │    │           │
протокол домен        порт путь параметры якорь

Браузер отправляет DNS-запрос к DNS-серверу, чтобы получить IP-адрес сервера.

# Аналогия в Python
import socket

ip_address = socket.gethostbyname('example.com')
print(ip_address)  # Например: 93.184.216.34

2. TCP-соединение (Three-Way Handshake)

Браузер устанавливает TCP-соединение с сервером на порту 443 (для HTTPS) или 80 (для HTTP).

Пазвак:  SYN ────────────→ Сервер
браузер: SYN + ACK ←────────── Сервер
Браузер: ACK ────────────→ Сервер

Этот процесс называется Three-Way Handshake.

3. TLS/SSL рукопожатие (для HTTPS)

Для защищённого соединения браузер и сервер выполняют TLS-рукопожатие:

  1. ClientHello — браузер отправляет поддерживаемые версии TLS, шифры
  2. ServerHello — сервер выбирает параметры и отправляет сертификат
  3. Браузер проверяет сертификат и его цепь
  4. Обе стороны согласуют ключи шифрования
# Проверка сертификата в Python
import ssl
import socket

context = ssl.create_default_context()
sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
sock.connect(('example.com', 443))
ssl_sock = context.wrap_socket(sock, server_hostname='example.com')
print(ssl_sock.getpeercert())

4. HTTP-запрос

После установления защищённого соединения браузер отправляет HTTP-запрос:

GET /path?query=1 HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0...
Accept: text/html,application/xhtml+xml...
Accept-Language: ru-RU,ru...
Cookie: session_id=abc123...
Connection: keep-alive

5. Обработка на сервере

Сервер обрабатывает запрос (может быть Python приложение):

# Пример Flask приложения
from flask import Flask, request

app = Flask(__name__)

@app.route('/path', methods=['GET'])
def handle_request():
    query = request.args.get('query')
    # Логика обработки
    return "<!DOCTYPE html><html>...</html>"

6. HTTP-ответ

Сервер отправляет ответ:

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 1234
Set-Cookie: session_id=xyz789; Path=/; HttpOnly
Cache-Control: max-age=3600

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
    <link rel="stylesheet" href="/styles.css">
  </head>
  <body>
    <h1>Hello</h1>
    <script src="/app.js"></script>
  </body>
</html>

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

Браузер парсит HTML построчно и создаёт DOM-дерево:

HTML
 ├── head
 │   ├── title
 │   └── link (stylesheet)
 └── body
     ├── h1
     └── script

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

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

  • CSS файлы: /styles.css
  • JavaScript файлы: /app.js
  • Изображения: /logo.png
  • Шрифты: /font.woff2

Для каждого ресурса повторяются шаги DNS → TCP → HTTP запрос → ответ.

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

Пока загружаются CSS файлы, браузер создаёт CSSOM (CSS Object Model):

# Концептуально
cssom = {
    'h1': {'color': 'black', 'font-size': '32px'},
    'body': {'background': 'white', 'font-family': 'Arial'}
}

Затем браузер объединяет DOM и CSSOM в Render Tree (дерево отрисовки), исключая скрытые элементы.

10. Layout (Расчёт макета)

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

Элемент: h1
Позиция: x=10px, y=20px
Размер: width=300px, height=32px

Этот процесс называется Layout или Reflow.

11. Paint (Отрисовка)

Браузер рисует визуальные элементы на экран:

1. Отрисовка фона
2. Отрисовка текста
3. Отрисовка границ
4. Наложение слоёв

12. Compositing (Композитинг)

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

13. Выполнение JavaScript

Браузер загружает и выполняет JavaScript блокирующим образом (если не использованы defer или async):

<!-- Блокирует парсинг HTML -->
<script src="/app.js"></script>

<!-- Загружается асинхронно, выполняется как только загрузится -->
<script async src="/app.js"></script>

<!-- Загружается асинхронно, выполняется после парсинга HTML -->
<script defer src="/app.js"></script>

Полная временная шкала

время →
├─ 100ms: DNS-запрос
├─ 200ms: TCP-соединение
├─ 300ms: TLS-рукопожатие
├─ 350ms: HTTP-запрос отправлен
├─ 500ms: HTTP-ответ получен
├─ 510ms: Начало парсинга HTML
├─ 520ms: Обнаружены ресурсы
├─ 600ms: CSS загружен, CSSOM построен
├─ 650ms: Render Tree готов
├─ 700ms: Layout завершён
├─ 750ms: Paint завершена
├─ 800ms: JavaScript выполнен
└─ 850ms: Страница готова (onload)

Оптимизация процесса

Для ускорения можно:

  1. DNS-prefetch: <link rel="dns-prefetch" href="//example.com">
  2. Preconnect: <link rel="preconnect" href="//cdn.example.com">
  3. Минификация: уменьшать размеры файлов
  4. Кэширование: использовать браузерный кэш и CDN
  5. Ленивая загрузка: loading="lazy" для изображений
  6. HTTP/2: приоритизация ресурсов

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

Что происходит при переходе на адрес в браузере? | PrepBro