Шпаргалка для тестирования сайтов
Что такое браузерный движок?
Это основное программное обеспечение, которое действует как мост между кодом веб-страницы (HTML, CSS, JavaScript) и визуальным восприятием, которое вы видите на экране .
Что он делает?
Основная задача браузерного движка — преобразовать HTML, CSS и JavaScript код визуализируемой страницы в графическое представление, которое пользователь видит в окне браузера.
Основные компоненты браузерного движка:
- HTML парсер: Преобразует текстовый HTML-код в объектную модель документа (DOM — Document Object Model).
DOM представляет собой древовидную структуру, которая описывает все элементы страницы. - CSS парсер: Преобразует CSS-код в объектную модель стилей (CSSOM — CSS Object Model).
CSSOM содержит информацию о стилях каждого элемента страницы. - JavaScript движок: Отвечает за выполнение JavaScript кода, который может динамически изменять содержимое страницы, взаимодействовать с пользователем и выполнять другие действия.
Примеры: V8 (используется в Chrome и Edge), SpiderMonkey (используется в Firefox). - Рендеринг-модуль: Объединяет DOM и CSSOM в рендеринг-дерево , которое определяет порядок отрисовки элементов на экране.
Выполняет расчёты для позиционирования и размеров элементов (layout или reflow).
Рендеринг-модуль также выполняет отрисовку (paint) элементов на экране. - Сборщик мусора: Удаляет неиспользуемые объекты из памяти, чтобы освободить ресурсы и предотвратить утечки памяти.
Основные этапы работы браузерного движка:
- Загрузка: Браузер загружает HTML-документ с сервера.
- Парсинг: HTML-парсер создает DOM-дерево.
CSS-парсер создает CSSOM-дерево. - Создание рендеринг-дерева: Комбинирует DOM и CSSOM в рендеринг-дерево, исключая скрытые элементы (например, display: none).
- Лэйаут (расчёт расположения): Вычисляет финальные позиции и размеры всех элементов на странице.
- Отрисовка (Painting): Отрисовывает элементы на экране согласно данным из рендеринг-дерева.
- Обработка событий и интерактивность: JavaScript движок обрабатывает события пользователя (например, клики, ввод текста) и выполняет соответствующие действия.
Типы браузерных движков:
Blink:
используется в Google Chrome, Microsoft Edge и других Chromium-браузерах. Все современные веб-браузеры, основанные на браузере Chromium, используют движок Blink. На этом движке построено множество других приложений, таких как CEF, Electron или любая другая платформа, основанная на хроме.
Gecko:
Gecko — это движок Mozilla, который используется во многих различных типах браузеров Firefox, почтовом клиенте Thunderbird и интернет-пакете SeaMonkey. Он лицензирован как Mozilla Public, а Goanna также является форком Gecko, который используется в браузерах Pale Moon, Basilisk и K-meleon.
WebKit:
Движок WebKit — самый популярный и наиболее часто используемый движок. Он был создан Apple для своего браузера Safari путем разветвления движка KHTML проекта KDE. Позже Google также использовал тот же движок WebKit своего браузера Chrome, но в конечном итоге модифицированная версия этого движка была разветвлена движком Blink.
Trident and EdgeHTML:
Оба эти движка разработаны и поддерживаются технологическим гигантом Microsoft. Знаменитый Internet Explorer был построен на движке Trident. Раньше браузер Edge использовал EdgeHTML, но теперь использует движок Blink.
Каждый браузер имеет свой уникальный механизм рендеринга. Механизмы рендеринга также могут различаться для разных версий браузера.
Как работает движок браузера?
Браузер похож на переводчик, который превращает исходный код в красиво оформленную страницу с текстом и визуальной графикой, которую вы сможете легко понять, и это самый важный компонент браузера. Браузерные движки являются основной причиной того, что веб-страницы выглядят, загружаются и работают по-разному в разных браузерах.
- Всякий раз, когда пользователь передает какой-либо URL-адрес из пользовательского интерфейса, механизм просмотра получает URL-адрес и отправляет запрос сетевому компоненту, который обрабатывает связь с веб-сервером и получает HTML-документ и другие ресурсы, такие как изображения, видео, текст, таблицы стилей и т. д. скрипт и т. д.
- После получения HTML-документа механизм браузера передает его механизму рендеринга, который анализирует его и создает древовидную структуру данных, называемую объектным режимом документа (DOM). DOM просто представляет логические структуры и содержимое веб-страницы в древовидной структуре.
- Всякий раз, когда движок браузера вычисляет стили, он берет DOM и распознанный стиль и передает их механизму сборки, который использует различные алгоритмы для обработки каждого элемента DOM и рисует блок, с содержимым и применяет все заданные стили.
- После завершения движок превращает макет веб-страницы в ту часть, которую вы обычно видите на экране. Каждое поле, определенное механизмом компоновки, отображается на экране, и пользователь, наконец, видит полную веб-страницу. Он также выполняет любые сценарии, прикрепленные к веб-странице, которые могут изменять DOM или выполнять другие действия, например добавлять интерактивность или анимацию.
Все описанные выше шаги не обязательно выполняются последовательно; может случиться так, что процессы перекрываются или выполняются параллельно, все зависит от реализации движка браузера и механизма рендеринга. Это основная причина, по которой мы видим разные визуальные представления или поведение одной и той же веб-страницы в разных браузерах.