Что строится рядом с DOM после построения Document Object Model
Что проверяют
Знаете ли вы критический путь рендеринга браузера. Вопрос отсеивает тех, кто держится только уровня библиотеки: человек, который никогда не смотрел, что происходит между ответом сервера и первым пикселем, обычно и оптимизирует наугад.
Как отвечать
Рядом с DOM браузер строит CSSOM, объектную модель стилей. Парсер HTML даёт дерево узлов, парсер CSS из всех подключённых источников даёт дерево правил с уже разрешённым каскадом и наследованием.
Дальше по шагам: DOM и CSSOM объединяются в дерево рендеринга, куда попадают только видимые узлы. По этому дереву считается макет, то есть геометрия каждого блока. Затем отрисовка содержимого в слои и композиция слоёв на экране.
Отсюда два практических вывода, их полезно назвать сразу. CSS блокирует отрисовку: пока CSSOM не готов, показывать нечего, поэтому критические стили стараются доставить как можно раньше. Обычный скрипт блокирует разбор HTML, а если выше по документу есть незагруженные стили, ждёт ещё и их, потому что вправе спросить вычисленный стиль.
Virtual DOM к этому ряду отношения не имеет: это структура конкретной библиотеки в памяти JavaScript, браузер о ней ничего не знает.
Где спотыкаются
Отвечают «Virtual DOM». Это подмена уровня: браузер строит CSSOM, а виртуальное дерево живёт внутри библиотеки и в итоге всё равно сводится к обычным операциям над DOM.
Путают дерево рендеринга с DOM. Узел со свойством visibility hidden в дереве рендеринга есть и занимает место, с display none его там нет, и именно поэтому эти свойства по-разному влияют на макет.
Считают перерисовку и пересчёт макета одним и тем же. Смена цвета обходится отрисовкой, смена размеров запускает пересчёт геометрии, а чтение свойств вроде offsetHeight сразу после записи стилей заставляет браузер считать макет синхронно.