2015-12-12 6 views
0

Прежде всего позвольте мне дать вам простой обзор того, как он загружается, а затем рассказать об этом.Как браузер частично загружает DOM и CSSOM?

Browser Fetch HTML =>разбора HTML =>создать узлы =>синтаксического анализа узлов и начать их преобразования в Дом элементы =>находит узел стиль так начать создавать CSSOM =>на добивании синтаксический анализ, если существует тег стиля, который ожидает, чтобы он построил дерево CSSOM =>после того, как оба завершены, он объединяет как DOM, так и CSSOM и запускает DOMContentLoaded Событие.

Итак, как только CSSOM готов, браузер начинает рендеринг, а Dom может добавляться постепенно.

Это все хорошо, но как поток идти, когда браузер начинает рендеринга страницы, когда не весь HTML загружается .. (например, в nodejs вы можете парциальное HTML затем ждать 2s, а затем отправить больше)

  1. Что делать, если в нижней части страницы был другой тег стиля. Не получив все html, и никакой браузер css не начнет рендеринг, но из моего понимания рендеринг возникает только после того, как cssom был полностью построен.
  2. Что происходит с тегом скрипта, если css не выполняется, тег сценария выполнения не выполняется и, следовательно, также останавливает синтаксический анализ. JS запускается после завершения выполнения CSSOM.
+0

Рендеринг не должен ждать, пока все CSS будут доступны. – Alohci

+0

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp?hl=ru#performance-patterns в соответствии с этим js и рендеринг происходит после того, как cssom является полным и целыми причинами cssom blocks все, что css позже может изменить выход, где, поскольку элементы dom, загруженные позже, не изменят вывод, но будут только добавляться к дереву dom –

ответ

1

Вещи могут блокировать событие DOMContentLoaded, но это не мешает отображать неполную страницу. Это может быть важно для очень длинных страниц, транслируемых с медленного сервера.

Браузеры могут выполнять и выполнять чередование выполнения сценариев, повторное стилирование, рендеринг с разбором документов. Это можно тривиально показать, выполнив javascript в <head> и запросив DOM, вы увидите, что документ не будет иметь все свои узлы (возможно, даже элемент тела) до того, как событие DOMContentLoaded было запущено.

Вы должны думать о конструкции документа больше как о потоке, чем о последовательно исполняемых блоках, которые выполняются до завершения перед запуском следующего блока.

+0

Разве JS не побежал после строительства CCSOM? –

+0

№. скрипты, синтаксический анализ html, css, анализирующий все чередования друг с другом, в зависимости от того, в какой позиции они находятся в html (и множество других факторов) – the8472

+1

да, я согласен, что они влияют друг на друга, но есть правила, которые я пытаюсь понять , этот курс по udacity по google говорит, что js запускается после того, как cssom закончил создание. https://www.udacity.com/course/viewer#!/c-ud884/l-1469569174/m-1524418577 –

Смежные вопросы