0
Как браузер отображает веб-страницу - CSSOM, механизм рендеринга
Понимание того, что происходит внутри браузера, является наиболее важной частью для каждого веб-разработчика Мы рассмотрим, как браузеры интерпретируют код и как они помогают страницам быстрее загружаться с помощью синтаксического анализа Мы взглянем на движок браузера и механизм рендеринга.
CSSOM (CSS Object Model)
Как уже упоминалось о CSSOM, прежде всего, мы объясним его основную идею. Если вы уже знаете значение CSSOM, вы можете пропустить эту часть. Что такое древовидная структура? Ну, большинство людей знают, что есть нечто, называемое DOM. Точно так же существует также древовидная структура CSS, называемая объектной моделью CSS (CSSOM). DOM и CSSOM являются независимыми древовидными структурами. CSSOM содержит информацию о том, как оформляются элементы.
Объектная модель CSS - это набор API-интерфейсов, позволяющих манипулировать CSS из JavaScript. Это очень похоже на DOM \nно для CSS, а не для HTML. Это позволяет пользователям динамически считывать и изменять стили CSS. (Согласно MDN).
CSS блокирует рендеринг: браузер блокирует рендеринг страницы до тех пор, пока не получит и не обработает весь CSS. CSS блокирует рендеринг, потому что правила могут быть перезаписаны, поэтому содержимое не может быть отрисовано до завершения CSSOM.
Принцип работы движков
Процесс рендеринга объясняет, как код, который мы пишем, в конечном итоге отображается браузером на экране. Понимая, как работает механизм рендеринга, веб-разработчики могут лучше понять, как работают веб-сайты. Таким образом, они могут разрабатывать контент более эффективно. Теперь мы дадим основные объяснения движкам рендеринга:
Движок рендеринга отвечает за отображение контента, запрошенного конечным пользователем. Основная задача механизма рендеринга заключается в выделении запрашиваемой страницы на экране браузера. Механизмы рендеринга могут отображать изображения и документы в формате XML и HTML. В\n кроме того, при использовании плагинов движки также могут отображать различные документы, такие как PDF-файлы.
Движок браузера ведет себя как мост между пользовательским интерфейсом и механизмом рендеринга. В браузерных движках есть специальный фрагмент кода, называемый синтаксическим анализатором, который используется для преобразования данных из одного формата в другой. Затем компьютер может обработать каждый фрагмент программы и преобразовать его в машинный язык. Синтаксический анализ означает анализ и преобразование программы во внутренний формат, который действительно может быть запущен в среде выполнения. HTML-анализатор преобразует данные из HTML в DOM. Процесс рендеринга включает в себя два основных действия: токенизацию и построение дерева.
Раскрытие возможностей токенизации: Расшифровка сути текстового анализа
Токенизация - это лексический анализ, разбор входных данных на токены. Среди HTML-токенов есть начальные теги, конечные теги, имена атрибутов и значения атрибутов. Следовательно, чтобы построить дерево DOM, конечный автомат построения дерева будет обрабатывать токены, испускаемые токенизатором, один за другим\ne. Если он столкнется с каким-либо тегом скрипта, он приостановит текущую работу и позволит JS-движку выполнить свою работу. После этого процесс построения дерева будет продолжаться до тех пор, пока не будет получен токен EOF (представляющий конец HTML-документа). Таким образом, токенизатор распознает токен, передает его конструктору дерева и использует следующий символ для распознавания следующего токена, и так далее до конца ввода. Знаете ли вы, что токены могут иметь типы? Да, HTML-токены бывают 5 типов:
DOCTYPE: представляют и содержат информацию о документе doctype. Да, этот бесполезный <!DOCTYPE html> не так бесполезен, как вы думаете.
Тег: Представляет как начальный тег (например, <html>), так и конечный тег (например, </html>). Комментарий: Представляет комментарий в HTML-документе.
Символ: Представляет символ, который не является частью каких-либо других токенов.
EOF: Представляем конец HTML-документа - это все, чем я могу поделиться в своем путешествии по синтаксическому анализу. Чтобы узнать больше об алгоритме синтаксического анализа, здесь приведены ссылки на спецификацию HTML5 и алгоритм токенизации\nm, где тема подробно описана.
Обзор того, как веб-страницы отображаются в браузере.
Теперь, более подробно, мы рассмотрим процесс рендеринга или, другими словами, построение дерева. Давайте посмотрим, какие шаги предпринимаются для отображения веб-сайта:
Получает запрошенный документ: Содержимое запрошенного документа получается механизмом рендеринга из сетевого уровня HTML.
Создайте дерево DOM: проанализируйте HTML-код в разобранном дереве, а затем настройте дерево DOM, используя его.
Создайте CSSOM (объектную модель CSS): Разместите построение дерева DOM, оно идентифицирует тег ссылки в разделе head, который ссылается на внешний файл style. css. Итак, он проанализировал CSS-файл в дереве CSSOM, которое браузер может воспринимать как дерево DOM.
Создайте дерево рендеринга: Деревья DOM и CSSOM строятся на основе входных данных HTML и CSS. Используйте дерево HTML DOM в сочетании с данными стиля дерева CSSOM для настройки отображения\nr-дерево. Дерево рендеринга - это графическое изображение HTML с соответствующим CSS. Это дерево позволяет отображать содержимое в правильном порядке.
Макет и позиционирование: Когда средство визуализации разработано и встроено в дерево, у него нет размера или положения. Вычисление этих значений определяется как макет. Мы используем систему координат для позиционирования элемента, например, положение корневого средства визуализации равно (0,0).
Компоновка продолжается рекурсивно через часть всей иерархии средств визуализации, вычисляя геометрическую информацию для каждого средства визуализации, которому это необходимо. Начало процесса компоновки подразумевает предоставление каждому узлу точных координат, в которых он должен отображаться на экране.
Раскрашивание дерева рендеринга: Этот шаг часто называют "раскрашиванием" или "растрированием".
Событие "Разметка" фиксирует построение дерева рендеринга, вычисление положения и размера на временной шкале. Когда макет завершен, браузер выдает \"Настройка краски и \"События Paint, которые преобразуют t\nон отображает дерево в пикселях на экране (отдельные узлы на экране). Составной: рисует слои на экране.
Свойства CSS: непрозрачность и преобразование. Время, необходимое для построения дерева рендеринга, компоновки и рисования, зависит от размера документа, примененных стилей и устройства, на котором он запущен: чем больше документ, тем больше работы у браузера, чем сложнее стили, тем больше времени требуется для рисования. Например, сплошной цвет легко нарисовать, в то время как падающую тень трудно вычислить и отрисовать. ПРИМЕЧАНИЕ: Если в случае наличия каких-либо свойств display: none, установленных для элемента, ни он, ни кто-либо из его потомков не находятся в дереве рендеринга. Одним словом: деревья DOM и CSSOM объединяются, образуя дерево рендеринга. Дерево рендеринга содержит только узлы, необходимые для рендеринга страницы. Макет вычисляет точное положение и размер каждого объекта. Paint использует конечное дерево рендеринга и выводит пиксели на экран.
Вывод
Стоит отметить, что дерево рендеринга определяет\nпроцесс настройки зависит от браузера и может незначительно отличаться в зависимости от различных движков рендеринга. Однако общие принципы остаются неизменными в большинстве современных веб-браузеров. Дерево рендеринга является фундаментальным компонентом конвейера рендеринга, поскольку оно служит исходными данными для последующих этапов, таких как рисование, компоновка и отображение веб-страницы пользователю.
