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

Веб-браузер бесспорно самый основной инструмент доступа к интернету. Развитие веб-браузеров привело к тому, что многие традиционные "крупные клиенты" были заменены браузерами, что повысило его удобство и повсеместное распространение.

Веб-браузер это приложение, которое предоставляет доступ к веб-серверу, отправляет сетевой запрос на URL (Uniform Resource Locator — унифицированный указатель ресурса), получает ресурсы и предоставляет их в интерактивном режиме. В число основных браузеров входят Internet Explorer, Firefox, Google Chrome, Microsoft Edge и Safari.

Функциональность веб-браузера

Веб-браузер отображает веб-ресурс, который вы выбрали, в информационном окне и продолжает взаимодействие с пользователем. В принципе, это запрашивание, обработка, отображение и хранение.

Структура веб-браузера

1. User Interface (пользовательских интерфейс)
2. Browser Engine (движок браузера)
3. Render Engine (движок рендеринга)
4. Storage (хранилище)
5. UI BackEnd (бекенд для пользовательского интерфейса)
6. JavaScript Interpreter (Scripting Engine) (JS интерпретатор / JS движок)
7. Networking (взаимодействие по сети)

Поподробнее

User Interface

Интерфейс браузера, которая включает в себя всё, кроме главного экрана (запрашиваемого контента), например адресная строка или кнопка "домой".

Browser Engine

Обеспечивает высокоуровневую прослойку (интерфейс) между пользовательским интерфейсом и движком рендеринга. Он делает запрос и управляет механизмом рендеринга на основе взаимодействия с пользователем. Предоставляет метод, инициализирующий загрузку URL, заботится о перезагрузке, "назад" и "вперед" событиях браузера.

Rendering Engine

Отвечает за отображение веб-страницы на странице браузера. Основной его операцией является обработка HTML/XML, построение DOM дерева, рендеринг конструкции дерева, этап Layout'а (расположения), этап Pain'а (отрисовки)

Рассмотрим каждый этап

Парсинг HTML в DOM

На вход получает ответ, полученный из сетевого слоя в виде байтов. Затем необработанные байты преобразуются в символы (на основе кодировки символов) файла HTML. Затем символы превращаются в токены. Во время токенизации учитываются все "открывающие" и "закрывающие" теги в файле. Он знает, как удалить ненужные символы, такие как пробелы и разрывы строк.

Затем парсер выполняет синтаксический анализ, применяя правило синтаксиса языка для построения дерева путем анализа структуры документа. Процесс парсинга является итеративным. Он запросит у лексического анализатора (токенизатора) новый токен, и токен будет добавлен в дерево, если синтаксическое правило языка соответствует. Затем парсер запросит другой токен. Если ни одно из правил не соответствует, анализатор будет хранить токен внутри и продолжать запрашивать токены, пока не будет найдено правило, соответствующее всем внутренне сохраненным токенам. Если правила не найдены, то парсер выбросит ошибку. Это означает, что документ был недействительным и содержал синтаксические ошибки.

Эти узлы (nodes) связаны в древовидной структуре данных, называемой DOM (Document Object Model - объектная модель документа), которая устанавливает отношения родитель-потомок, смежные родственные отношения.

Парсинг CSS в CSSOM

Необработанные байты данных CSS преобразуются в символы -> токены -> узлы и, наконец, в CSSOM (объектная модель CSS). В CSS есть нечто, называемое каскадом, которое определяет, какие стили применяются к элементу. Данные стиля элемента могут поступать от родителей (через наследование) или присваиваться самим элементам. Браузер должен рекурсивно пройти через древовидную структуру CSS и определить стиль конкретного элемента.

Соединение DOM и CSSOM в Render tree

Дерево DOM содержит информацию о связи элементов HTML, а дерево CSSOM содержит информацию о том, как эти элементы стилизованы. Начиная с корневого узла браузер пересекает каждый из видимых узлов. Некоторые узлы скрыты (управляются через CSS) и не отражаются в отображаемом выводе. Для каждого видимого узла браузер соответствует соответствующему правилу, определенному в CSSOM, и, наконец, эти узлы выводятся со своим содержимым и стилем, называемым Render tree.

Layout

Затем он переходит на следующий уровень, называемый layout. Точный размер и положение каждого содержимого должны быть рассчитаны для отображения на странице (viewport браузера). Процесс также упоминается как reflow. HTML использует модель layout на основе потока, то есть большую часть времени геометрия вычисляется за один проход. Это рекурсивный процесс, начинающийся с корневого элемента документа.

Painting

Цель вывести содержимое на экран. Процесс рисования может быть глобальным (рисование всего дерева) или инкрементным (дерево визуализации проверяет свой прямоугольник на экране), и ОС генерирует событие рисования на этих конкретных узлах, и на все дерево это не влияет. Рисование - это постепенный процесс, когда некоторые части анализируются и отображаются, в то время как процесс продолжается с остальной частью элемента из сети.

JavaScript Interpreter (JS Engine)

JavaScript - это язык, позволяющий динамически обновлять веб-контент, управлять мультимедиа и анимированными изображениями, выполняемыми движком JS браузера. DOM и CSSOM предоставляют интерфейс для JS, который может изменять как DOM, так и CSSOM. Поскольку браузер не уверен в том, что будет делать конкретный JS, он немедленно приостановит построение дерева DOM после того, как встретит тег script. Каждый скрипт является блокировщиком парсинга; построение дерева DOM остановлено.

Механизм JS начинает парсинг кода сразу после загрузки с сервера, поступающего в парсер JS.Он превращает код в объект, который понимает машина. Объект, который хранит всю информацию парсера в древовидном представлении абстрактной синтаксической структуры, называется абстрактным синтаксическим деревом (AST). Объекты передаются в интерпретатор, который переводит эти объекты в байт-код. Компилятор работает по принципу Just In Time (JIT), означающий, что файлы JavaScript, загруженные с сервера, компилируются в режиме реального времени на компьютере клиента. Интерпретатор и компилятор объединены. Интерпретатор выполняет исходный код практически сразу; компилятор генерирует машинный код, который клиентская система выполняет непосредственно.

UI BackEnd

Он используется для рисования базового виджета, такого как поля со списком и окна. Под ним используются методы пользовательского интерфейса операционной системы. Он предоставляет общую платформу, которая не зависит от платформы.

Data Storage

Этот слой помогает браузеру хранить данные (например, файлы cookie, сессии, index DB, Web SQL, закладки, настройки и т.д.).

Networking

Он обрабатывает все виды сетевого общения в браузере. Использует набор протоколов связи, таких как HTTP, HTTPs, FTP, при извлечении ресурса из запрошенных URL-адресов.