Блог

Главная - Вопросы по программированию - Как браузеры строят дерево рендеринга до того, как тег появится в дереве DOM?

Как браузеры строят дерево рендеринга до того, как тег появится в дереве DOM?

#javascript #dom #browser #rendering

#javascript #dom #браузер #рендеринг

Вопрос:

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

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

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

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

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

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

Ответ №1:

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

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

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

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

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