Как работает браузер?

2.0 Middle🔥 121 комментариев

#Браузер и сетевые технологии

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

🐱

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

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

Как работает браузер

Браузер — это сложная система, которая преобразует URL в пиксели на экране. Понимание его работы критично для оптимизации фронтенда.

Основные компоненты браузера

Браузер
├── UI Layer (адресная строка, вкладки, кнопки)
├── Browser Engine (управляет всеми компонентами)
├── Rendering Engine (отрисовка HTML/CSS/JS)
├── JavaScript Engine (выполнение JS)
├── Networking Layer (HTTP запросы)
└── Storage (cookies, localStorage, cache)

Процесс загрузки страницы

1. URL парсинг и DNS резолюция

Когда вы вводите URL в адресную строку:

https://example.com/page
         ↓
      DNS lookup (преобразование имени в IP)
         ↓
   IP адрес 93.184.216.34

Браузер ищет IP адрес в кэше, затем обращается к DNS серверам.

2. HTTP запрос

Browser ────────────────────────> Server
         GET /page HTTP/1.1
         Host: example.com
         
Server ────────────────────────> Browser
       200 OK
       Content-Type: text/html
       <html>...</html>

3. Parsing HTML

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

<html>
  <head>
    <title>Page</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello</h1>
    <script src="app.js"></script>
  </body>
</html>

Особенность: если встречается <script> без async/defer — парсинг HTML останавливается до загрузки и выполнения скрипта.

ParsingHTML
  ↓
<link rel="stylesheet"> — загрузка CSS (парсинг продолжается)
  ↓
<script> — СТОП! ждём загрузки и выполнения
  ↓
</body> — парсинг продолжается

4. CSS парсинг и Style Calculation

Браузер парсит CSS и создаёт CSSOM (CSS Object Model):

body {
  margin: 0;
  font-family: Arial;
}

h1 {
  color: blue;
  font-size: 24px;
}

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

5. JavaScript выполнение

Это критический этап:

// app.js
console.log(document.body); // ✓ DOM доступен

document.body.style.background = 'red'; // Запускается стиль пересчёт

const button = document.querySelector('button');
button.addEventListener('click', () => {
  alert('Clicked!');
});

В этот момент:

Синхронный JS блокирует парсинг HTML
Можно менять DOM
Можно слушать события

6. Construction of the Render Tree

Браузер комбинирует DOM и CSSOM в Render Tree:

DOM Tree          CSSOM Tree
├── html           ├── html
│   ├── head       │   ├── body
│   ├── body       │   │   ├── h1 {color: blue}
│   │   ├── h1
        ↓
    Render Tree
    ├── body
    │   └── h1 {color: blue, visible: true}

Замечание: элементы с display: none не попадают в Render Tree.

7. Layout (Reflow)

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

// Вычисляется
h1 {
  width: 800px,
  height: 30px,
  x: 0,
  y: 0
}

Это дорогая операция.

8. Paint

Браузер рисует пиксели (цвет, фон, тени, текст):

// Paint операции
Paint Layer 0: background
Paint Layer 1: text
Paint Layer 2: borders

9. Composite

Браузер складывает слои (layers) и отправляет на GPU:

Layer 1 + Layer 2 + Layer 3 → Composite → Framebuffer → Monitor

Разные браузеры — разные движки

Browser          Rendering Engine    JavaScript Engine
─────────────────────────────────────────────────────
Chrome           Blink               V8
Firefox          Gecko               SpiderMonkey
Safari           WebKit              JavaScriptCore
Edge             Blink (Chromium)    V8

Важные оптимизации

1. Асинхронная загрузка скриптов

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

<!-- ХОРОШО: загружается параллельно, выполняется после парсинга -->
<script src="app.js" defer></script>

<!-- ХОРОШО: выполняется сразу после загрузки (для независимых скриптов) -->
<script src="analytics.js" async></script>

2. Кэширование

Браузер кэширует:

Статические файлы (CSS, JS, изображения)
HTTP响应 (Cache-Control, ETag)
DNS резолюции

// Cache-Control header
Cache-Control: max-age=31536000  // 1 год
Cache-Control: no-cache          // Проверять свежесть

3. Connection Pooling

Браузер открывает несколько TCP соединений для параллельной загрузки:

Chrome: до 6 соединений per domain
Firefox: до 6 соединений per domain

Событийная модель браузера

Event Loop

while (event queue is not empty) {
  execute next event
  if (render is needed) {
    recalculate styles
    layout
    paint
  }
}

Микротаски vs Макротаски

// Макротаска (Event Queue)
setTimeout(() => console.log('macro'), 0);

// Микротаска (Microtask Queue) — выполняется раньше
Promise.resolve()
  .then(() => console.log('micro'));

// Синхронный код
console.log('sync');

// Порядок: sync → micro → macro

Вывод

Понимание как работает браузер помогает вам:

Оптимизировать производительность (избегать блокирующих операций)
Избежать багов (понимать Event Loop, асинхронность)
Лучше отлаживать (знать, когда срабатывают события)
Писать более эффективный код