Как браузеры создают дерево рендеринга до того, как тег </body> окажется в дереве DOM? - PullRequest
Новая
       13

Как браузеры создают дерево рендеринга до того, как тег </body> окажется в дереве DOM?

1 голос
/ 24 апреля 2019

Я изучаю, как работают веб-браузеры.

Я понял, как показано ниже,

  • как только HTML-ресурс поступает, браузеры анализируют HTML и создают дерево DOM.
  • Когда встречается элемент link для импорта CSS, он прекращает строить дерево DOM и строить дерево CSSOM.
  • после того, как построено дерево CSSOM, построено дерево DOM.
  • после их объединения строится дерево рендеринга.

Но поскольку построение DOM прекращается при встрече <script>, мы помещаем <script> прямо перед </body>, чтобы завершить построение дерева рендеринга перед загрузкой JS.

Но не значит ли это, что </body> еще не находится в дереве DOM? Записи, которые я видел, объясняют мне, что мы можем закончить рендеринг, не дожидаясь, что делает <script>. Я думаю, что если это правда, дерево рендеринга строится без ожидания полного дерева DOM, а только с деревом CSSOM. Поскольку браузеры могут просматривать до анализа </body>.

Или он распознает, что единственным левым элементом является </body>, и просто игнорирует его?

1 Ответ

1 голос
/ 27 апреля 2019

Ваше понимание немного вышло, но я сосредоточусь на ключевом моменте.

Во-первых, DOM не содержит отдельных начальных и конечных элементов или тегов. Пара тегов {<body>,</body>} создает один элемент с именем body. Точно так же пара тегов {<span>,</span>} создает один элемент с именем span.

Как только синтаксический анализатор обнаруживает начальный тег, элемент создается и добавляется в DOM. Если анализ останавливается, весь DOM, созданный до этого момента, может быть отрендерен, при условии, что в это время не происходит выборки, блокирующей рендеринг.

Что касается конечных тегов, они в основном используются только для определения того, где заканчивается элемент, чтобы следующий элемент или текст в разметке не добавлялся как дочерний элемент только что завершившегося элемента.

Однако </body> - это особый случай. Если синтаксический анализатор встречает теги или текст после тега </body>, он будет "восстанавливать" DOM, помещая элементы и текст как дочерние элементы элемента body. Это не означает, что анализатор полностью игнорирует тег </body> - если узел комментария сразу следует за тегом </body>, он будет добавлен как дочерний элемент html-элемента, а не элемента body.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...