Понимание CSS рендеринга

Question

Поэтому я везде читал, что CSS это блокировка рендеринга . Хотя это отличается от блокировки, вызванной тегом <script>, поскольку он не приостанавливает разбор HTML. Браузер в основном ожидает создания CSSOM , а затем только отображает что-либо на веб-странице. Поэтому, если CSS загружается поздно, это может повлиять на время загрузки вашей веб-страницы. Но что я не понимаю, так это то, что, если это так, то почему FOU C (Fla sh с неустановленным содержимым) вызван? FOU C в основном, когда браузер мгновенно отображает HTML без стиля, а затем, когда доступен CSS, он отображает правильно стилизованную страницу. Поэтому, если браузер всегда ожидает загрузки CSS и его анализа в первую очередь, перед рендерингом чего-либо, FOU C не должно произойти.

Answer 1

, если браузер всегда ожидает загрузки и анализа CSS в первую очередь, прежде чем что-либо делать, FOU C не должно происходить.

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

Обратите внимание, что это не противоречит тому, что вы "читали везде", если вы действительно читали " Браузер в основном ждет создания CSSOM, а затем только отображает что-либо на веб-странице."

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

<h1>test</h1>
<script>
  // without CSSOM, we couldn't get its width yet
  console.log(document.querySelector('h1').offsetWidth);
</script>
<style>
  /* even if it's gonna be invalidated later on */
  h1 { width: 300px; border:1px solid; } 
</style>