Какие элементы содержатся в DOM, и не находиться в Render Tree

«Какие элементы содержатся в DOM, и не находиться в Render Tree» — вопрос из категории HTML, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

DOM содержит все элементы HTML-документа, включая скрытые и невидимые, а Render Tree включает только визуально отображаемые элементы.

Элементы, которые есть в DOM, но отсутствуют в Render Tree:

  • display: none – элемент скрыт полностью
  • <script>, <meta>, <link> – служебные теги
  • <head> и его содержимое
  • Комментарии <!-- -->
  • Элементы с нулевой шириной/высотой
  • Элементы за пределами viewport (без стилей, обеспечивающих рендеринг)

Пример:

<div style="display: none">Не в Render Tree</div>
<script>console.log('не рендерится')</script>
<!-- Комментарий тоже не рендерится -->