Как работает браузер при заполнении адресной строки?

1.7 Middle🔥 201 комментариев

#JavaScript Core

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

🐱

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

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

Как работает браузер при заполнении адресной строки

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

Этап 1: Ввод URL и DNS resolutions

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

// ПРИМЕР: вводишь 'google.com'

// 1. БРАУЗЕР НАЧИНАЕТ ПРЕДПОЛАГАТЬ (suggestion)
// Если есть история или сохранённые закладки, браузер покажет подсказки

// 2. DNS LOOKUP (поиск IP адреса)
// Браузер преобразует 'google.com' в IP адрес (например 142.250.185.46)

// 3. ПРОВЕРКА КЭША
// Браузер проверит несколько уровней кэша:
const dnsCacheHierarchy = [
  'Кэш браузера',           // самый быстрый
  'Кэш операционной системы',
  'Кэш сетевого оператора',
  'Рекурсивный DNS resolver', // может быть Google 8.8.8.8
];

// Время DNS lookup: обычно 50-300 мс

Этаг 2: TCP connection и TLS handshake

// После получения IP адреса браузер устанавливает соединение

// 1. TCP THREE-WAY HANDSHAKE (для HTTP)
// Шаг 1: Браузер отправляет SYN пакет
// Шаг 2: Сервер отвечает SYN-ACK
// Шаг 3: Браузер отправляет ACK
// Время: ~50-100 мс в зависимости от задержки сети

// 2. TLS HANDSHAKE (для HTTPS) — дополнительная безопасность
// Шаг 1: Client Hello (какие версии TLS поддерживает браузер)
// Шаг 2: Server Hello (выбор версии и сертификат)
// Шаг 3: Key Exchange (установка шифрованного канала)
// Шаг 4: Finished (соединение готово)
// Время: ~100-200 мс

// ИТОГО на соединение: 200-300 мс (даже прежде чем отправить содержимое)

Этап 3: HTTP Request

// Когда соединение установлено, браузер отправляет HTTP запрос

const httpRequest = {
  method: 'GET',
  url: 'https://google.com/',
  headers: {
    'Host': 'google.com',
    'User-Agent': 'Mozilla/5.0...',
    'Accept': 'text/html,application/xhtml+xml,...',
    'Accept-Language': 'en-US,en;q=0.9',
    'Accept-Encoding': 'gzip, deflate, br', // сжатие
    'Cookie': 'session=abc123def456', // если были до этого
    'Cache-Control': 'max-age=0', // требовать свежие данные
  }
};

// Браузер также проверит кэш:
if (browserCache.hasValidEntry('google.com')) {
  // Вернуть из кэша (очень быстро)
  return browserCache.get('google.com');
}

// Если не в кэше — отправить запрос на сервер
// Время отправки: 1-2 мс
// Время ответа сервера: 100-500 мс

Этап 4: Парсинг HTML и загрузка ресурсов

// Сервер отправляет HTML документ

// ВАЖНО: браузер НЕ ждёт полной загрузки документа перед парсингом
// Он начинает парсить и рендерить по мере получения

// Парсинг HTML:
// 1. Браузер читает HTML построчно
// 2. Строит DOM (Document Object Model)
// 3. Когда встречает <link rel="stylesheet"> — загружает CSS
// 4. Когда встречает <script> — загружает и выполняет JS
// 5. Когда встречает <img> — загружает изображение

// ЭТО КРИТИЧНО: <script> в <head> БЛОКИРУЕТ парсинг HTML
// Поэтому рекомендуется ставить <script> в конце <body>

// ПЛОХО:
// <head>
//   <script src="heavy-script.js"></script> <!-- блокирует парсинг -->
// </head>
// <body>
//   <!-- HTML не будет парсен до загрузки скрипта -->
// </body>

// ХОРОШО:
// <head>
//   <link rel="stylesheet" href="style.css">
// </head>
// <body>
//   <!-- контент -->
//   <script src="script.js"></script> <!-- загружается после HTML -->
// </body>

// ЕЩЁ ЛУЧШЕ:
// <script src="script.js" async></script>  <!-- параллельная загрузка -->
// <script src="script.js" defer></script>  <!-- загружает, но выполняет после парсинга -->

Этап 5: Критический путь отрисовки (Critical Rendering Path)

const renderingSteps = [
  {
    step: 1,
    name: 'Parse HTML',
    time: 'parallel to resource loading',
    creates: 'DOM tree'
  },
  {
    step: 2,
    name: 'Parse CSS',
    time: 'blocks rendering',
    creates: 'CSSOM (CSS Object Model)'
  },
  {
    step: 3,
    name: 'DOM + CSSOM combination',
    time: 'immediate',
    creates: 'Render tree'
  },
  {
    step: 4,
    name: 'Layout (Reflow)',
    time: 'compute positions and sizes',
    creates: 'Layout tree'
  },
  {
    step: 5,
    name: 'Paint (Repaint)',
    time: 'convert layout to pixels',
    creates: 'Pixels on screen'
  },
  {
    step: 6,
    name: 'Compositing',
    time: 'combine layers',
    creates: 'Final image'
  }
];

// ВАЖНО: CSS блокирует рендеринг!
// Браузер не начнёт отрисовку, пока не получит весь CSS
// Поэтому CSS в <head> очень важен

Этап 6: JavaScript выполнение

// Когда браузер встречает <script>:

// 1. PARSING (разбор кода)
// Время: зависит от размера скрипта

// 2. COMPILATION (компиляция в машинный код)
// JavaScript движок компилирует в машинный код
// Время: может быть длительным для больших скриптов

// 3. EXECUTION (выполнение)
// Скрипт выполняется и может модифицировать DOM

// ПРОБЛЕМА: JavaScript может модифицировать DOM
// Если это происходит до загрузки CSS — будут проблемы
// Если это происходит на больших документах — медленно

const jsExecutionExample = () => {
  // Это выполнится когда браузер встретит этот скрипт
  const element = document.querySelector('h1');
  if (element) {
    element.style.color = 'red';
  }
};

Этап 7: DOMContentLoaded и Load события

// СОБЫТИЯ ЖИЗНЕННОГО ЦИКЛА СТРАНИЦЫ:

// 1. DOMContentLoaded
// Срабатывает когда весь HTML РАСПАРСЕН и исполнен весь скрипт в <head>
// CSS может ещё загружаться!
document.addEventListener('DOMContentLoaded', () => {
  console.log('DOM готов, но CSS может ещё загружаться');
  // Например, элементы может не быть видно на экране
});

// 2. Load (window.onload)
// Срабатывает когда ВСЁМ загружено: HTML, CSS, JS, изображения
window.addEventListener('load', () => {
  console.log('Страница полностью загружена');
  console.log('Все изображения получены');
  console.log('Все CSS применён');
  console.log('Все JS выполнен');
});

// Обычно: DOMContentLoaded < 1s, Load ~ 2-3s

Практический пример: что видит пользователь

// ВРЕМЕННАЯ ШКАЛА:
// 0ms: пользователь нажимает Enter
// 100ms: DNS lookup готов
// 150ms: TCP соединение установлено
// 250ms: TLS handshake завершён (если HTTPS)
// 300ms: первый байт HTML получен (Time to First Byte, TTFB)
// 500ms: весь HTML загружен и парсен
// 800ms: CSS загружен и применён
// 1200ms: DOMContentLoaded — контент виден на экране
// 2000ms: все изображения загружены
// 2500ms: Load событие

// Пользователь видит:
// 1200ms — белый экран, потом вдруг текст появляется
// Это называется "First Contentful Paint" (FCP)

Оптимизация загрузки страницы

// ЛУЧШИЕ ПРАКТИКИ:

// 1. Минимизировать критический путь
<head>
  <!-- Только критичный CSS в <head> -->
  <link rel="stylesheet" href="critical.css">
  <!-- Остальной CSS может быть async -->
  <link rel="stylesheet" href="style.css" media="print" onload="this.media='all'">
</head>
<body>
  <!-- Контент -->
  
  <!-- JS в конце -->
  <script src="app.js"></script>
  <!-- Или используй async/defer -->
  <script src="analytics.js" async></script>
  <script src="framework.js" defer></script>
</body>

// 2. Используй lazy loading для изображений
<img src="image.jpg" loading="lazy" alt="Description">

// 3. Минимизировать JavaScript
// Код-сплиттинг, tree-shaking, compression

// 4. Сжимать ресурсы
// gzip, brotli, минификация

// 5. Используй CDN для раздачи статики
// CSS, JS, изображения должны загружаться быстро

// 6. Кэшировать на сервере
// Cache-Control: max-age=31536000 для статики
// Cache-Control: no-cache для HTML

DevTools для анализа

// В Chrome DevTools Network вкладка можно увидеть:
const networkMetrics = {
  'DNS Lookup': 50,           // ms
  'Initial Connection': 100,  // TCP handshake
  'SSL/TLS': 100,            // HTTPS только
  'TTFB': 200,               // Time to First Byte
  'Content Download': 300,    // получение данных
  'Finish': 750,             // всё загружено
};

// Performance вкладка показывает:
const performanceMetrics = {
  'First Paint': 1200,       // первый пиксель на экране
  'First Contentful Paint': 1500, // первый контент
  'Largest Contentful Paint': 2000, // основной контент
  'Time to Interactive': 2500, // можно взаимодействовать
};

// Lighthouse даст рекомендации по оптимизации

Итог

Когда ты вводишь URL в адресную строку, происходит следующее:

DNS — поиск IP адреса (50-300 мс)
TCP — установка соединения (50-100 мс)
TLS — шифрование (если HTTPS) (100-200 мс)
HTTP Request — отправка запроса (1-2 мс)
HTML Parse — браузер начинает парсить по мере получения
CSS блокирует рендеринг, пока не загрузится
JavaScript может блокировать парсинг HTML
Render — браузер отрисовывает на экран
DOMContentLoaded — контент виден (~1-2 секунды)
Load — всё загружено (~2-3 секунды)

Вся эта цепочка крайне важна для понимания перформанса веб-приложений.