Сучасна архітектура браузера (процеси та потоки)

Сучасна архітектура браузера є складною багатопроцесною системою, де кожен процес відповідає за свій набір завдань. Розуміння цієї архітектури є критично важливим для оптимізації продуктивності та розуміння того, як працюють веб-додатки.

Еволюція: Від однопроцесної до багатопроцесної архітектури

Проблеми однопроцесної архітектури

У ранніх версіях браузерів (наприклад, Internet Explorer 6) все працювало в одному процесі:

Проблеми:

Один зламаний таб вбиває весь браузер
Повільний JavaScript на одному табі заморожує всі
Відсутність ізоляції між сайтами (вразливості)
Накопичення витоків пам'яті

Багатопроцесна архітектура

Сучасні браузери (Chrome, Edge, Firefox, Safari) використовують багатопроцесну архітектуру, де кожен тип завдання виконується в окремому процесі.

Процес браузера
Головний процес

Процес рендерера 1
Таб 1

Процес рендерера 2
Таб 2

Процес рендерера N
Таб N

Процес GPU
Графіка

Процес мережі
Мережа

Процес зберігання
Зберігання

Процес плагінів
Плагіни

Основні процеси браузера

Процес браузера

Головний процес — координує всі інші процеси.

Обов'язки:

UI Thread: рендеринг інтерфейсу браузера (адресний рядок, кнопки, меню)
Network Thread: управління мережевими запитами
Storage Thread: доступ до файлової системи (куки, localStorage, кеш)
Управління життєвим циклом інших процесів
Управління правами доступу та пісочницями

Процес рендерера

Ключовий процес для рендеринг веб-сторінок. Chrome створює один процес на сайт (Site Isolation).

Обов'язки:

Main Thread: виконання JavaScript, побудова DOM, обчислення стилів, макет
Raster Thread: растеризація
Compositor Thread: створення та управління шарами
Worker Threads: Web Workers, Service Workers

Процес GPU

Один процес для всіх табів, відповідальний за взаємодію з GPU.

Обов'язки:

Композиція шарів з усіх процесів рендерера
Растеризація графіки на GPU
Апаратне прискорення відео
Рендеринг Canvas, WebGL

Процес мережі

Ізольований процес для мережевих операцій (Chrome 69+).

Обов'язки:

HTTP/HTTPS запити
Управління HTTP кешем
Управління куками
Перевірки CORS

Процес зберігання

Управління даними для сайтів (Chrome 102+).

Обов'язки:

IndexedDB
Cache API
LocalStorage
File System Access API

Ізоляція сайтів — критично важливо для безпеки

Ізоляція сайтів — архітектурне рішення Chrome, де кожен сайт отримує свій власний процес рендерера.

Захист від Spectre та Meltdown

Ізоляція сайтів захищає від атак на рівні CPU (Spectre, Meltdown).

Вартість ізоляції сайтів:

Переваги:

Безпека: повна ізоляція сайтів
Стабільність: збій одного сайту не впливає на інші
Захист від Spectre/Meltdown

Недоліки:

Збільшене споживання пам'яті (~10-20%)
Складність архітектури

Практичні наслідки для розробників

Управління пам'яттю

javascript

// Погано: витік пам'яті в глобальній області
let heavyData = [];
function leak() {
  heavyData.push(new Array(1000000));
}

// Добре: очищення при закритті
window.addEventListener('beforeunload', () => {
  heavyData = null;
});

Довготривалі завдання

javascript

// Блокує Main Thread
function heavyCalculation() {
  for (let i = 0; i < 1000000000; i++) {
    // Блокуюча операція
  }
}

// Використовуйте Web Worker (окремий потік)
const worker = new Worker('worker.js');
worker.postMessage({ task: 'heavy-calculation' });

Апаратне прискорення GPU

css

/* Викликає Layout і Paint на кожному кадрі */
.animate-left {
  animation: moveLeft 1s;
}

/* Використовує композитний шар (GPU) */
.animate-transform {
  animation: moveTransform 1s;
}
@keyframes moveTransform {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

Порівняння браузерів

Браузер	Архітектура	Ізоляція сайтів	Процеси рендерера
Chrome	Багатопроцесна	Повна	Один на сайт
Firefox	Багатопроцесна (e10s)	Часткова	До 8 процесів
Safari	Багатопроцесна	Часткова	Один на таб
Edge	Багатопроцесна (Chromium)	Повна	Один на сайт

Кращі практики для розробників

Мінімізуйте навантаження на Main Thread

Використовуйте Web Workers для важких обчислень. Main Thread має бути вільним для рендерингу.

Використовуйте Compositor Thread

Анімації через transform та opacity виконуються на Compositor Thread без блокування Main Thread.

Оптимізуйте пам'ять

Кожен таб — це окремий процес. Витоки пам'яті масштабуються лінійно з кількістю табів.

Розгляньте ізоляцію сайтів

Крос-доменний iframe = окремий процес. Мінімізуйте iframes з різних доменів.
Резюме:

Багатопроцесна архітектура сучасних браузерів забезпечує:

Безпеку через ізоляцію сайтів
Стабільність через ізоляцію процесів
Продуктивність через паралелізм

Розуміння цієї архітектури допомагає писати більш продуктивний та безпечний код, правильно використовувати Web Workers, оптимізувати анімації через GPU та уникати блокування Main Thread.

Корисні ресурси

Зміст

Еволюція: Від однопроцесної до багатопроцесної архітектуриПроблеми однопроцесної архітектуриБагатопроцесна архітектураОсновні процеси браузераПроцес браузераПроцес рендерераПроцес GPUПроцес мережіПроцес зберіганняІзоляція сайтів — критично важливо для безпекиЗахист від Spectre та MeltdownПрактичні наслідки для розробниківУправління пам'яттюДовготривалі завданняАпаратне прискорення GPUПорівняння браузерівКращі практики для розробниківКорисні ресурсиСхожі статті

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань