Загрузка...
Загрузка...
Архитектура современного браузера — это сложная многопроцессная система, где каждый процесс отвечает за свою область задач. Понимание этой архитектуры критически важно для оптимизации производительности и понимания того, как работают веб-приложения.
В ранних версиях браузеров (например, Internet Explorer 6) всё работало в одном процессе:
Проблемы:
Современные браузеры (Chrome, Edge, Firefox, Safari) используют multi-process architecture, где каждый тип задачи выполняется в отдельном процессе.
Главный процесс — координирует работу всех остальных процессов.
Ответственность:
Потоки внутри Browser Process:
Browser Process
├── UI Thread // Интерфейс браузера
├── IO Thread // Межпроцессное взаимодействие (IPC)
├── File Thread // Работа с файлами
└── Cache Thread // Управление кешем
Ключевой процесс для отображения веб-страниц. В Chrome создаётся по процессу на каждый сайт (Site Isolation).
Ответственность:
Потоки внутри Renderer Process:
Renderer Process (для каждой вкладки/сайта)
├── Main Thread // JavaScript execution, DOM, Style, Layout
├── Compositor Thread // Layer composition
├── Raster Threads (N) // Растеризация тайлов
└── Worker Threads (N) // Web Workers, Service Workers
Жизненный цикл Renderer Process:
Единственный процесс для всех вкладок, отвечающий за взаимодействие с GPU.
Ответственность:
Почему один GPU Process?
Изолированный процесс для сетевых операций (в Chrome 69+).
Ответственность:
Зачем отдельный процесс?
Отдельный процесс для каждого типа плагина (Flash, PDF viewer).
Ответственность:
Важно:
Flash и большинство NPAPI плагинов устарели. Современные браузеры используют Web APIs вместо плагинов.
Управление данными сайтов (появился в Chrome 102+).
Ответственность:
Site Isolation — это архитектурное решение Chrome, где каждый сайт получает свой отдельный Renderer Process.
Renderer Process (один для всех iframe)
├── example.com (главная страница)
├── ads.com (iframe)
└── analytics.com (iframe)
// Все сайты в одном процессе — уязвимость!
Renderer Process 1
└── example.com (главная страница)
Renderer Process 2
└── ads.com (iframe)
Renderer Process 3
└── analytics.com (iframe)
// Каждый сайт изолирован!
Site Isolation защищает от атак на уровне процессора (Spectre, Meltdown):
Без Site Isolation:
// Вредоносный код на ads.com может прочитать память
// процесса и украсть данные с example.com
const sensitiveData = speculativeExecutionAttack();
С Site Isolation:
// Каждый сайт в отдельном процессе
// Нет доступа к памяти других процессов
// Защита на уровне ОС
Плюсы:
Минусы:
Процессы общаются через IPC (Inter-Process Communication):
// Renderer Process отправляет запрос в Browser Process
renderer.send('network-request', {
url: 'https://api.example.com/data',
method: 'GET'
});
// Browser Process обрабатывает и отправляет ответ
browser.on('network-request', async (data) => {
const response = await fetch(data.url);
renderer.send('network-response', response);
});
Механизмы IPC:
// Плохо: утечка памяти в глобальной области
let heavyData = [];
function leak() {
heavyData.push(new Array(1000000));
}
// Хорошо: очистка при закрытии
window.addEventListener('beforeunload', () => {
heavyData = null;
});
// Блокирует Main Thread
function heavyCalculation() {
for (let i = 0; i < 1000000000; i++) {
// Blocking operation
}
}
// Используем Web Worker (отдельный поток)
const worker = new Worker('worker.js');
worker.postMessage({ task: 'heavy-calculation' });
worker.onmessage = (result) => {
console.log('Result:', result.data);
};
/* Вызывает Layout и Paint на каждом кадре */
.animate-left {
animation: moveLeft 1s;
}
@keyframes moveLeft {
from { left: 0; }
to { left: 100px; }
}
/* Использует композитный слой (GPU) */
.animate-transform {
animation: moveTransform 1s;
}
@keyframes moveTransform {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
| Браузер | Архитектура | Site Isolation | Renderer процессов |
|---|---|---|---|
| Chrome | Multi-process | Полная | Один на сайт |
| Firefox | Multi-process (e10s) | Частичная | До 8 процессов |
| Safari | Multi-process | Частичная | Один на вкладку |
| Edge | Multi-process (Chromium) | Полная | Один на сайт |
chrome://process-internals/Shift + Esc (Windows/Linux) / ⌘ + Option + Esc (Mac)Browser Process (PID: 12345) Memory: 150 MB
Renderer: example.com (PID: 12346) Memory: 80 MB
Renderer: ads.com (PID: 12347) Memory: 45 MB
GPU Process (PID: 12348) Memory: 120 MB
Network Process (PID: 12349) Memory: 30 MB
// Проверка, сколько памяти использует страница
if ('memory' in performance) {
console.log('Used JS Heap:', performance.memory.usedJSHeapSize);
console.log('Total JS Heap:', performance.memory.totalJSHeapSize);
console.log('Limit:', performance.memory.jsHeapSizeLimit);
}
Используйте Web Workers для тяжёлых вычислений. Main Thread должен быть свободен для рендеринга.
Анимации через transform и opacity выполняются на Compositor Thread без блокировки Main Thread.
Каждая вкладка — отдельный процесс. Утечки памяти масштабируются линейно с количеством вкладок.
Cross-origin iframe = отдельный процесс. Минимизируйте количество iframe из разных источников.
Chrome экспериментирует с Service Worker Process Pool — отдельный пул процессов только для Service Workers:
Преимущества:
Итог:
Многопроцессная архитектура современных браузеров обеспечивает:
Понимание этой архитектуры помогает писать более производительный и безопасный код, правильно использовать Web Workers, оптимизировать анимации через GPU и избегать блокировки Main Thread.