Как работает браузер
Как работает браузер
Введение
Браузер — основная среда, в которой живёт веб-приложение. Тестировщик должен понимать, как браузер обрабатывает страницы, почему одно и то же приложение может выглядеть и работать по-разному в Chrome и Safari, и как использовать особенности браузера в своей работе.
Движки браузеров
Каждый браузер использует собственный движок для рендеринга страниц:
| Браузер | Движок рендеринга | Движок JS |
|---|---|---|
| Chrome | Blink | V8 |
| Edge | Blink | V8 |
| Firefox | Gecko | SpiderMonkey |
| Safari | WebKit | JavaScriptCore |
| Opera | Blink | V8 |
Почему это важно: разные движки могут по-разному интерпретировать CSS, поддерживать HTML-атрибуты и выполнять JavaScript. Один и тот же код может работать в Chrome и ломаться в Safari.
Основные компоненты браузера
- Движок рендеринга — преобразует HTML и CSS в визуальное представление
- JavaScript-движок — выполняет JS-код
- Сетевой слой — управляет HTTP-запросами
- Хранилище — cookies, localStorage, sessionStorage, IndexedDB
- UI браузера — адресная строка, кнопки назад/вперёд, вкладки
Процесс рендеринга страницы
Когда браузер получает HTML, происходит следующее:
HTML → DOM (Document Object Model)
CSS → CSSOM (CSS Object Model)
DOM + CSSOM → Render Tree (что отображать)
→ Layout (где разместить)
→ Paint (нарисовать пиксели)
→ Composite (наложить слои)
- Парсинг HTML → браузер строит дерево DOM-узлов
- Применение CSS → каждый узел получает стили
- Layout → браузер вычисляет размеры и позиции элементов
- Paint → рисует пиксели на экране
- Composite → накладывает слои (полезно для анимаций)
Важно: если JS изменяет DOM — браузер может пересчитать layout заново. Слишком частые изменения снижают производительность.
Браузерный кэш
Браузер сохраняет загруженные ресурсы (JS, CSS, картинки), чтобы не скачивать их повторно. Поведение кэша управляется HTTP-заголовками:
| Заголовок | Описание |
|---|---|
Cache-Control: max-age=3600 | Кэшировать на 1 час |
Cache-Control: no-cache | Проверять актуальность перед использованием |
Cache-Control: no-store | Не кэшировать вообще |
ETag | Версия ресурса для проверки актуальности |
Для тестировщика: кэш часто мешает при тестировании обновлений. Жёсткое обновление: Ctrl+Shift+R (Windows/Linux) или Cmd+Shift+R (Mac). Очистка кэша: DevTools → Application → Clear Storage.
JavaScript: однопоточность и event loop
JavaScript выполняется в одном потоке (single-threaded). Это означает:
- Только одна операция выполняется в единицу времени
- Долгие операции блокируют страницу (страница "зависает")
- Асинхронные операции (setTimeout, fetch) ставятся в очередь (event loop)
Для тестировщика: если страница зависает при долгой операции — это баг. Асинхронные данные могут прийти с задержкой — всегда жди завершения загрузки перед проверкой результата.
Кросс-браузерное тестирование
Что проверять в каждом браузере
| Область | Что может отличаться |
|---|---|
| Layout | Отступы, шрифты, выравнивание |
| Функциональность | JS-API, которые не поддерживаются в старых браузерах |
| Производительность | Время загрузки, плавность анимаций |
| JS-ошибки | Ошибки только в конкретном браузере (Console) |
| Формы | Встроенная валидация HTML5 выглядит по-разному |
Минимальный набор для проверки
- Chrome (самый популярный, ~65% пользователей)
- Firefox (второй по популярности)
- Safari (критично для iOS-пользователей)
- Edge (корпоративная среда)
Режим инкогнито / Private Mode
Инкогнито-режим полезен для тестирования:
- Нет кэша — страница загружается как в первый раз
- Нет cookies — пользователь не авторизован
- Нет localStorage — нет сохранённых данных
- Нет расширений — меньше интерференции
Сценарий использования: проверить регистрацию нового пользователя, поведение для неавторизованного пользователя, первый визит на сайт.
Частые ошибки понимания
- ❌ "Тестировал в Chrome — значит работает везде" → Safari и Firefox могут вести себя иначе
- ❌ "Кэш очистился, обновил — теперь чисто" → CDN кэш и серверный кэш могут не сброситься
- ❌ "JS однопоточный, значит нет гонок данных" → гонки данных в async-операциях всё равно возможны
Что мы запомним
- Браузеры используют разные движки: Blink (Chrome/Edge), Gecko (Firefox), WebKit (Safari)
- Рендеринг страницы: HTML → DOM → CSSOM → Layout → Paint → Composite
- Браузерный кэш может мешать тестированию: используй жёсткое обновление (Ctrl+Shift+R)
- JS однопоточный — долгие операции блокируют UI
- Инкогнито-режим даёт чистое состояние без кэша и cookies
- Кросс-браузерное тестирование обязательно: минимум Chrome + Firefox + Safari