Пример сущности в DOM, которая не попадает в render tree

Что проверяют

Различаете ли вы дерево документа и дерево отрисовки. Это проверка на понимание того, как браузер превращает разметку и стили в пиксели, а не на заученный список примеров.

Как отвечать

Сначала разведите понятия: DOM строится из разметки, отдельно из стилей собирается CSSOM, и уже из них получается дерево отрисовки, куда попадают только узлы с визуальным представлением.

Самые точные примеры:

• содержимое <head>: <meta>, <title>, <link>, <script>, <style>. Узлы в DOM есть, показывать нечего;
• любой элемент с display: none, включая те, у кого проставлен атрибут hidden: он и работает через это же значение;
• содержимое <template>: оно живёт в отдельном фрагменте и не рендерится, пока его не клонируют в документ;
• узлы комментариев.

Дальше сами назовите противоположный случай, это сильный ход. Элемент с visibility: hidden в дерево отрисовки попадает: место он занимает, просто не рисуется. Так же ведут себя opacity: 0 и блок, уехавший далеко за пределы экрана.

Где спотыкаются

Ставят в один ряд display: none и visibility: hidden. Разница принципиальная: первое убирает узел и из дерева отрисовки, и из дерева доступности, второе оставляет коробку в потоке. Поэтому переключение display тянет пересчёт геометрии, а visibility обходится перерисовкой.

Второе: считают, что скрытый элемент ничего не грузит. Фоновая картинка у него действительно не запрашивается, а вот <img> внутри скачается как обычно.

Третье: измеряют скрытый блок. У элемента вне дерева отрисовки ширина и высота равны нулю, и код, который считает размеры карусели или таблицы на скрытой вкладке, получает нули и ломает вёрстку при первом показе.