В статье «Восемь шагов дракона» я писал ранее, что происходит после того, как браузер вводит URL-адрес, я поделился с вами всем процессом от ввода URL-адреса в браузере до отображения конечной страницы. Некоторые читатели сообщили мне, что окончательный макет рендеринга в браузере не очень ясен, поэтому эта статья начинается с отдельного объяснения процесса рендеринга в браузере, и я надеюсь, что каждый сможет получить новые достижения.
Структура основного компонента браузера
(основные компоненты браузера)
Движки рендеринга — webkit и Gecko
Firefox использует Geoko, движок рендеринга, разработанный Mozilla.
И Safari, и Chrome используют webkit. Webkit — это движок рендеринга с открытым исходным кодом, который изначально был разработан для платформы Linux, а затем перенесен Apple на Mac и Windows.
В этой статье я в основном объясняю механизм рендеринга webkit.Хотя терминология, используемая webkit и Gecko, немного отличается, их основные процессы в основном одинаковы.
(процесс рендеринга webkit)
критический путь рендеринга
Критический путь рендеринга относится ко всему процессу, когда браузер сначала получает запрошенные HTML, CSS, javascript и другие ресурсы, затем анализирует, строит дерево, рендерит макет, рисует и, наконец, представляет интерфейс, который может видеть клиент.
Поэтому процесс рендеринга браузера в основном включает следующие этапы:
-
Разобрать HTML для создания дерева DOM.
-
Разобрать CSS для создания дерева правил CSSOM.
-
Объедините дерево DOM с деревом правил CSSOM, чтобы создать дерево рендеринга.
-
Пройдите по дереву рендеринга, чтобы начать компоновку, и рассчитайте информацию о положении и размере каждого узла.
-
Рисует каждый узел дерева рендеринга на экране.
Построить DOM-дерево
Когда браузер получает HTML-документ с сервера, он проходит по узлам документа и генерирует дерево DOM.
Следует отметить, что процесс генерации DOM-дерева может быть заблокирован загрузкой и выполнением CSS и JS. Проблема блокировки рендеринга будет обсуждаться позже.
Построить дерево правил CSSOM
Браузер анализирует файлы CSS и создает дерево правил CSS, каждый файл CSS анализируется в объект StyleSheet, и каждый объект содержит правила CSS. Объекты правила CSS содержат объекты селектора и объявления, а также другие объекты, соответствующие синтаксису CSS.
блокировка рендеринга
Когда браузер встречает тег script, построение DOM приостанавливается до тех пор, пока скрипт не завершит выполнение, а затем продолжает построение DOM. Каждый раз, когда выполняется JavaScript-скрипт, построение DOM-дерева будет серьезно блокироваться. DOM, пока не завершится загрузка его CSSOM, и выполните сборку.
Итак, положение тега script очень важно. При фактическом использовании можно следовать следующим двум принципам:
Сначала CSS: в порядке введения ресурсы CSS предшествуют ресурсам JavaScript.
JS после: Обычно мы размещаем код JS внизу страницы, и JavaScript должен как можно меньше влиять на построение DOM.
При синтаксическом анализе html он вставит новый элемент в дерево dom, выполнит поиск css, а затем применит к элементу соответствующие правила стиля.Таблица стилей поиска сопоставляется в порядке справа налево.
Например: div p {font-size: 16px}, он сначала найдет все теги p и определит, является ли его родительский тег div, прежде чем решить, использовать ли этот стиль для рендеринга).
Поэтому, когда мы обычно пишем CSS, мы стараемся максимально использовать id и class и не делать чрезмерного каскадирования.
Построить дерево рендеринга
Из дерева DOM и дерева правил CSS мы можем построить дерево рендеринга. Браузер будет просматривать каждый видимый узел, начиная с корня дерева DOM. Для каждого видимого узла найдите правило стиля CSS, к которому он адаптируется, и примените его.
После построения дерева рендеринга каждый узел является видимым узлом и содержит его содержимое и стиль соответствующих правил. Это также самая большая разница между деревом рендеринга и деревом DOM. Дерево рендеринга используется для отображения, и, конечно, эти невидимые элементы не будут отображаться, например, в этом дереве. Кроме того, элементы со значением display равным none не будут отображаться в этом дереве, но элементы с видимостью, равной hidden, будут отображаться в этом дереве.
визуализировать макет дерева
Фаза компоновки проходит от корневого узла дерева рендеринга и определяет точный размер и положение каждого объекта узла на странице.Выводом фазы компоновки является блочная модель, которая точно фиксирует точное положение каждого элемента на экране с размер.
визуализировать рисунок дерева
На этапе рисования дерево рендеринга просматривается, и вызывается метод paint() рендерера для отображения его содержимого на экране. Рендеринг дерева рендеринга выполняется внутренними компонентами пользовательского интерфейса браузера.
перекомпоновать и перекрасить:
В соответствии с макетом дерева рендеринга вычислите стиль CSS, то есть геометрическую информацию, такую как размер и положение каждого узла на странице. HTML по умолчанию является гибким, CSS и js сломают этот макет, изменив внешний вид и стиль DOM, а также его размер и положение. В настоящее время следует упомянуть два важных понятия: перекраска и оплавление.
replaint: часть экрана перерисовывается, не затрагивая общий макет, например, цвет фона CSS изменился, но геометрический размер и положение элемента остались неизменными.
reflow: означает, что геометрия компонента изменилась, нам нужно повторно проверить и рассчитать дерево рендеринга. Либо часть, либо все дерево рендеринга изменилось. Это Reflow или Layout.
Так что мы должны постараться максимально сократить перекомпоновку и перерисовку, я думаю, что это одна из причин, почему верстка таблиц редко используется в наши дни.
display:none вызовет перекомпоновку, атрибут visible: hidden не является невидимым атрибутом, его семантика заключается в том, чтобы скрыть элемент, но элемент по-прежнему занимает пространство макета, он будет отображаться как пустой фрейм, поэтому атрибут visible:hidden будет только запускать repaint , потому что никаких изменений положения не произошло.
В некоторых случаях, таких как изменение стиля элемента, браузер не будет перекомпоновывать или перерисовывать один раз, а накапливает пакет таких операций, а затем выполняет перекомпоновку, которая также называется асинхронной перекомпоновкой или инкрементной асинхронной перекомпоновкой.
В некоторых случаях, таких как изменение размера окон, изменение шрифта страницы по умолчанию и т. д. Для этих операций браузер немедленно перестроится.
резюме
В этой статье мы шаг за шагом узнали о процессе рендеринга в браузере.Я считаю, что каждый почерпнул для себя что-то новое.Если у вас есть какие-либо вопросы по процессу рендеринга в браузере, вы можете оставить отзыв.Мы будем общаться, учиться и добиться прогресса вместе.
использованная литература:
Он далеко от храма Гаронга.com/projects/ Хорошо…
сегмент fault.com/ah/119000001…
sylva, то есть sun.GitHub.IO/2017/10/03/…
Woohoo.Только Tribe.com/стремиться к ла-ла-ла/ ты…