Является ли создание CSSOM и DOM асинхронным?

Question

Я читал, что создание CSSOM является узким местом с точки зрения производительности веб-страниц. Но, кажется, есть некоторые способы обойти это, например, добавить media свойство ссылки на таблицу стилей. Я пытаюсь понять, как оптимизировать свое веб-приложение, и наткнулся на эту действительно интересную ссылку, но не мог понять, в каком порядке происходит создание CSSOM и DOM.

Здесь я вижу некоторые ссылки на асинхронную загрузку CSS-файлов, но ответ не очень ясен. Конечно, речь идет о загрузке, а не о создании объектной модели.

Мой вопрос заключается в следующем: происходит ли создание CSSOM и создание DOM параллельно или последовательно?

Answer 1

Да, создание CSSOM и DOM происходит асинхронно, и это только логично. Я бы рекомендовал вам начать с основ Google Web, где такие темы, как рендеринг, обсуждаются и подробно объясняются.

1. Конструкция DOM начинается, как только браузер получает веб-страницу из сетевого запроса или считывает ее с диска. Начинается "разбор" html и "разбивая" его, создавая DOM-дерево узлов, о которых мы знаем.

2. При разборе и построении дерева DOM, если оно встречает тег ссылки в head или любой другой раздел по этому вопросу, ссылающийся на внешнюю таблицу стилей. (из документов)

Предвидя, что этот ресурс понадобится для отображения страницы, он немедленно отправляет запрос на этот ресурс...

3. Правила CSS снова маркируются и начинают формировать то, что мы называем CSSOM. Затем дерево CSSOM генерируется окончательно, когда вся веб-страница анализируется, а затем применяется к узлам в дереве DOM.

При вычислении окончательного набора стилей для любого объекта на странице браузер начинает с самого общего правила, применимого к этому узлу (например, если это дочерний элемент элемента body, тогда применяются все стили тела), а затем рекурсивно уточняет вычисленные стили применяя более конкретные правила - то есть правила "каскад вниз".

Мы все заметили, что при медленных соединениях сначала загружается DOM, а затем применяются стили, и веб-страница выглядит законченной. Именно по этой фундаментальной причине - CSSOM и DOM являются независимыми структурами данных.

Я надеюсь, что это ответит на ваш вопрос и направит вас в правильном направлении.

PS: я бы настоятельно рекомендовал еще раз прочитать основную информацию о веб-производительности Google, чтобы лучше понять ее.