Если CSS блокирует рендеринг, почему мы видим FOUC?

Question

Для построения дерева рендеринга браузер требует как DOM, так и CSSOM. CSSOM может быть создан только после загрузки CSS. По сути, как только CSS загружен, страница должна отображаться правильно. Но почему мы видим Flash Of Unstyled Content (FOUC) на странице? В каком временном окне в браузере отображается неустановленный контент?

Пожалуйста, помогите мне понять это.

Ref: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

Answer 1

Это должно помочь.

1. DOM создан
2. Если мы все еще ждем, чтобы CSSOM был создан, то мы видим, что FOUC
3. CSSOM создается
4. DOMи CSSOM объединяются в дерево рендеринга, которое отображает DOM с помощью CSS (стилизованное содержимое)

Таким образом, браузер показывает FOUC при ожидании CSS.Как только CSS загружен, DOM и CSSOM объединяются в одно дерево, которое называется Render Tree, и это стилизованный контент.

Согласно статье Google, сайт NY Times показывает FOUC до тех пор, пока CSSOM не будет построен, а затем визуализируется дерево рендеринга.Это демонстрирует, что рендеринг дерева рендеринга отличается от рендеринга дерева DOM.Дерево DOM отображается, но выгруженный CSS блокирует отображение дерева рендеринга (обратите внимание на разницу).Вот почему FOUC показывает до того, как CSS разблокируется, а дерево рендеринга показывает

На мой взгляд, это самый полный разговор на эту тему от Дэвида Барона, главного инженера Mozilla: https://vimeo.com/103108124