Браузер

За одно нажатие Enter в адресной строке браузер проделывает длинную цепочку работы. Он находит IP-адрес сервера через DNS, устанавливает защищённое соединение, отправляет HTTP-запрос и получает HTML. Затем разбирает разметку в дерево DOM, подгружает стили, картинки и скрипты, вычисляет, где находится каждый элемент, рисует пиксели и выводит их на экран. Пока страница открыта, браузер выполняет скрипты, отвечает на клики и прокрутку, хранит cookie и данные сайтов.

Внутри браузер состоит из нескольких частей: интерфейс с вкладками и адресной строкой, сетевой модуль, хранилище, браузерный движок, который отвечает за разбор и отрисовку, и движок JavaScript. Современные браузеры запускают вкладки в отдельных изолированных процессах, чтобы зависание или атака на одном сайте не затронули остальные.

Пример: как браузер представляется сайту

GET /catalog/ HTTP/2
Host: example.ru
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
  AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36
Accept-Language: ru-RU,ru;q=0.9

Строка User-Agent исторически перегружена: Chrome в ней одновременно упоминает Mozilla, WebKit, Gecko и Safari ради совместимости со старыми сайтами. Поэтому определять браузер по этой строке ненадёжно — лучше проверять поддержку конкретной возможности.

Почему разные браузеры показывают сайт по-разному

Браузеров много, а движков всего три основных, но даже на одном движке версии отличаются. Новое свойство CSS может уже работать в Chrome и ещё не работать в Safari на старом iPhone. Отличаются и встроенные стили по умолчанию, шрифты системы, поведение форм. Задача вёрстки — добиться, чтобы сайт корректно работал во всех целевых браузерах; это называется кроссбраузерностью.

Инструменты разработчика

В каждом современном браузере есть встроенные инструменты разработчика (клавиша F12). В них видно дерево элементов и применённые стили, сетевые запросы и время их загрузки, ошибки JavaScript в консоли, хранилище cookie. Это первый инструмент, когда заказчик пишет «у меня на сайте что-то не так»: по вкладкам Console и Network часто сразу понятно, что именно сломалось.