Прежде всего позвольте мне дать вам простой обзор того, как он загружается, а затем рассказать об этом.Как браузер частично загружает DOM и CSSOM?
Browser Fetch HTML =>разбора HTML =>создать узлы =>синтаксического анализа узлов и начать их преобразования в Дом элементы =>находит узел стиль так начать создавать CSSOM =>на добивании синтаксический анализ, если существует тег стиля, который ожидает, чтобы он построил дерево CSSOM =>после того, как оба завершены, он объединяет как DOM, так и CSSOM и запускает DOMContentLoaded
Событие.
Итак, как только CSSOM готов, браузер начинает рендеринг, а Dom может добавляться постепенно.
Это все хорошо, но как поток идти, когда браузер начинает рендеринга страницы, когда не весь HTML загружается .. (например, в nodejs вы можете парциальное HTML затем ждать 2s, а затем отправить больше)
- Что делать, если в нижней части страницы был другой тег стиля. Не получив все html, и никакой браузер css не начнет рендеринг, но из моего понимания рендеринг возникает только после того, как cssom был полностью построен.
- Что происходит с тегом скрипта, если css не выполняется, тег сценария выполнения не выполняется и, следовательно, также останавливает синтаксический анализ. JS запускается после завершения выполнения CSSOM.
Рендеринг не должен ждать, пока все CSS будут доступны. – Alohci
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp?hl=ru#performance-patterns в соответствии с этим js и рендеринг происходит после того, как cssom является полным и целыми причинами cssom blocks все, что css позже может изменить выход, где, поскольку элементы dom, загруженные позже, не изменят вывод, но будут только добавляться к дереву dom –